<div class="header header-split-edit">
    <div class="header-feature-desc dku-title"
         ng-class="{'with-radio': features[selectedNode.featureChildren].hasOwnProperty('mean')}">
        <i class="icon-font" ng-show="!treatedAsNum(selectedNode.featureChildren)"></i>
        <div class="numerical" ng-show="treatedAsNum(selectedNode.featureChildren)">#</div>
        <div class="ellipsed-text long-text" title="{{selectedNode.featureChildren}}">
            &emsp;{{selectedNode.featureChildren}}
        </div>
    </div>
    <form class="radio-buttons"
          ng-show="features[selectedNode.featureChildren].hasOwnProperty('mean')"
          ng-attr-title="{{!selectedNode.isLeaf ? 'Feature type cannot be changed on a node with splits' : null}}">
        <label ng-class="{'label--disabled': !selectedNode.isLeaf}">
            <input type="radio"
                   name="change-meaning"
                   ng-disabled="!selectedNode.isLeaf"
                   ng-checked="treatedAsNum(selectedNode.featureChildren)"
                   ng-click="changeMeaning(true, selectedNode.featureChildren)">
            Numerical
        </label>
        <label ng-class="{'label--disabled': !selectedNode.isLeaf}">
            <input type="radio"
                   name="change-meaning"
                   ng-disabled="!selectedNode.isLeaf"
                   ng-checked="!treatedAsNum(selectedNode.featureChildren)"
                   ng-click="changeMeaning(false, selectedNode.featureChildren)">
            Categorical
        </label>
    </form>
</div>

<div class="histogram-placeholder histogram-placeholder-empty" ng-if="histData[selectedNode.featureChildren].no_values">
    <em>No values</em>
</div>
<div histogram class="histogram-placeholder" ng-if="!histData[selectedNode.featureChildren].no_values">
    <div class="histogram-svg"></div>
</div>

<div class="split-editor" ng-if="selectedSplit">
    <div>
        <div class="header">
            <div class="dku-title spaced-title">
                <div>
                    {{ selectedSplit.left === undefined ? 'Create a split' : 'Edit a split' }}
                </div>
                <div class="button-div">
                    <button class="dku-button dku-button--border" ng-click="cancel(split)">
                        <i class="icon icon-remove"></i>
                        &nbsp;Cancel
                    </button>
                    <button class="dku-button dku-button--border dku-button--primary"
                            type="submit"
                            ng-click="checkBeforeAdd(selectedSplit, selectedNode.featureChildren)"
                            ng-disabled="disableAddSplit "
                            ng-if="selectedSplit.left === undefined">
                        <i class="icon-plus"></i>
                        &nbsp;Create
                    </button>
                    <button class="dku-button dku-button--border dku-button--primary"
                            type="submit"
                            ng-click="checkBeforeUpdate(selectedSplit, selectedNode.featureChildren)"
                            ng-disabled="valueNotChanged(treeData[selectedSplit.left], selectedSplit.value) || disableAddSplit"
                            ng-if="selectedSplit.left !== undefined">
                        <i class="icon-pencil"></i>
                        &nbsp;Apply
                    </button>
                </div>
            </div>
        </div>
        <div class="split-edit">
            <div class="split-edit__manual">
                <div class="split-edit-manual__nb-rows" ng-if="!treatedAsNum(selectedNode.featureChildren)">
                    <b>{{selectedSplit.value.size}}</b> selected
                </div>
                <form ng-if="treatedAsNum(selectedNode.featureChildren)"
                      ng-submit="submit(selectedSplit, selectedNode.featureChildren)">
                    <input focus-here
                           type="number"
                           name="num-split-input"
                           placeholder="Enter a number"
                           ng-keyup="$event.keyCode == 27 && cancel(split)"
                           ng-model="selectedSplit.value"
                           ng-change="changeNumValue()"
                           step="any"
                           required/>
                </form>
                &nbsp;
                <div class="button-div">
                    <button type="button" class="dku-button dku-button--primary"
                            ng-click="!selectedNode.children_ids.length && selectedNode.probabilities.length > 1 && autosplit()"
                            ng-disabled="selectedNode.children_ids.length || selectedNode.probabilities.length <= 1"
                            ng-attr-title="{{selectedNode.children_ids.length && 'This node already has splits'
                                || selectedNode.probabilities.length < 2 && 'The target takes one or less value in this sample'
                                || null}}">
                       <i class="icon icon-magic"></i>
                       &nbsp;Auto create
                    </button>
                </div>
            </div>
        </div>
        <form class="search-row" ng-if="!treatedAsNum(selectedNode.featureChildren)">
            <input focus-here class="search-bar" placeholder="Search value in {{selectedNode.featureChildren}}"
                ng-model="search.catSplitValue">
        </form>
    </div>
    <div class="table" ng-if="!treatedAsNum(selectedNode.featureChildren)">
        <div class="table-title">
            <div>
                <input type="checkbox"
                       ng-model="selectedSplit.selectAll"
                       dku-indeterminate="selectedSplit.value.size && selectedSplit.value.size < histData[selectedNode.featureChildren].bins.length"
                       ng-click="massSelect(search.catSplitValue, histData[selectedNode.featureChildren].bins)">
                value
            </div>
            <div>proportion</div>
        </div>
        <div class="table-records">
            <div class="record record-cat"
                 ng-repeat="bin in histData[selectedNode.featureChildren].bins"
                 ng-class="{'record-cat-selected': selectedSplit.value && selectedSplit.value.has(bin.value),
                            'record-cat-disabled': selectedSplit.usedValues.has(bin.value),
                            'record-cat-selectable': !selectedSplit.usedValues.has(bin.value) && (!selectedSplit.value || !selectedSplit.value.has(bin.value))}"
                 ng-click="!selectedSplit.usedValues.has(bin.value) && changeCatValue(bin.value, $index, $event)"
                 ng-if="bin.value != 'No values' && (!search.catSplitValue || bin.value.toString().toLowerCase().includes(search.catSplitValue.toLowerCase()))">
                <div class="ellipsed-text small-text" title="{{bin.value}}">
                    <input type="checkbox"
                           id="{{'checkbox-'+$index}}"
                           ng-checked="selectedSplit.value.has(bin.value) || selectedSplit.usedValues.has(bin.value)"
                           ng-disabled="selectedSplit.usedValues.has(bin.value)">
                    {{bin.value}}
                </div>
                <div class="very-small-text proportion-cat-table">
                    <div class="ellipsed-text" title="{{bin.count}}" style="width: 100%">{{bin.count}}</div>
                    <em>&nbsp;({{selectedNode.samples[0] ? toFixedIfNeeded(100*bin.count/selectedNode.samples[0], 2, true) : 0}}%)</em>
                </div>
            </div>
        </div>
    </div>
    <div class="table" ng-if="treatedAsNum(selectedNode.featureChildren)">
        <div class="table-title">
            <div>min</div>
            <div>max</div>
            <div>mean</div>
        </div>
        <div class="table-records">
            <div class="record">
                <div>{{!histData[selectedNode.featureChildren].no_values ? toFixedIfNeeded(histData[selectedNode.featureChildren].min, 2) : "N/A"}}</div>
                <div>{{!histData[selectedNode.featureChildren].no_values ? toFixedIfNeeded(histData[selectedNode.featureChildren].max, 2) : "N/A"}}</div>
                <div>{{!histData[selectedNode.featureChildren].no_values ? toFixedIfNeeded(histData[selectedNode.featureChildren].mean, 2) : "N/A"}}</div>
            </div>
        </div>
    </div>
</div>
