<div style="float: left;">
    <md-button class="md-icon-button md-primary" aria-label="" ng-click="$ctrl.treeExpandAll()">
        <md-tooltip>{{ $root.p3xr.strings.page.treeControls.expandAll}}</md-tooltip>
        <md-icon>keyboard_arrow_down</md-icon>
    </md-button>

    <md-button class="md-icon-button" aria-label="" ng-click="$ctrl.treeCollapseAll()" id="p3xr-main-treecontrol-controls-collapse-all">
        <md-tooltip>{{ $root.p3xr.strings.page.treeControls.collapseAll}}</md-tooltip>
        <md-icon>keyboard_arrow_up</md-icon>
    </md-button>

    <span ng-click="$ctrl.noop()" id="p3xr-main-treecontrol-controls-click-noop"></span>

    <md-button class="md-icon-button" aria-label="" ng-click="$ctrl.openTreeSettingDialog({ $event: $event})">
        <md-tooltip>{{ $root.p3xr.strings.form.treeSettings.label.formName}}</md-tooltip>
        <md-icon>settings</md-icon>
    </md-button>

    <span>
        <p3xr-input id="p3xr-main-treecontrol-controls-tree-divider-input" ng-change="$ctrl.treeDividerChange()" style="width: 10px; text-align:center; font-family: 'Roboto Mono';"
                    ng-model="$root.p3xr.settings.redisTreeDivider" ng-model-options="{debounce: 666 }"></p3xr-input>
        <md-tooltip>{{ $root.p3xr.strings.form.treeSettings.field.treeSeparator }}</md-tooltip>
    </span>

    <span ng-if="$root.p3xr.state.cfg.treeDividers.length > 0">
        <!-- md-on-open="$ctrl.dividerSelectStatus(true)" md-on-close="$ctrl.dividerSelectStatus(false)"  -->
        <md-select ng-model="$root.p3xr.settings.redisTreeDivider" ng-change="$ctrl.treeDividerChange()" class="p3xr-main-treecontrol-controls-divider-select md-no-underline" md-container-class="p3xr-main-treecontrol-controls-divider-select-container">
            <md-option ng-repeat="divider in $root.p3xr.state.cfg.treeDividers" ng-value="divider">
                {{ divider }}
            </md-option>
        </md-select>
        <md-tooltip>{{ $root.p3xr.strings.form.treeSettings.field.treeSeparatorSelector }}</md-tooltip>
    </span>

</div>

<span ng-if="$root.p3xr.state.pages > 1" class="p3xr-main-treecontrol-controls-pager">
    <md-tooltip>{{ $root.p3xr.strings.status.keyCount({keyCount: $root.p3xr.state.keysRaw.length }) }}</md-tooltip>
    <md-button class="md-icon-button md-primary" aria-label="" ng-click="$ctrl.page({ page: 'first' })">
        <md-tooltip>{{ $root.p3xr.strings.page.treeControls.pager.first}}</md-tooltip>
        <md-icon>skip_previous</md-icon>
    </md-button>
    <md-button class="md-icon-button" aria-label="" ng-click="$ctrl.page({ page: 'prev' })">
        <md-tooltip>{{ $root.p3xr.strings.page.treeControls.pager.prev}}</md-tooltip>
        <md-icon>keyboard_arrow_left</md-icon>
    </md-button>

    <p3xr-input type="number" style="width: 48px" step="1" min="1" ng-maxlength="$root.p3xr.state.pages"
                ng-change="$ctrl.pageChange()" ng-model="$root.p3xr.state.page"></p3xr-input> / {{ $root.p3xr.state.pages }}

    <md-button class="md-icon-button" aria-label="" ng-click="$ctrl.page({ page: 'next' })">
        <md-tooltip>{{ $root.p3xr.strings.page.treeControls.pager.next}}</md-tooltip>
        <md-icon>keyboard_arrow_right</md-icon>
    </md-button>
    <md-button class="md-icon-button md-primary" aria-label="" ng-click="$ctrl.page({ page: 'last' })">
        <md-tooltip>{{ $root.p3xr.strings.page.treeControls.pager.last}}</md-tooltip>
        <md-icon>skip_next</md-icon>
    </md-button>
</span>
<span ng-if="$root.p3xr.state.pages < 2" class="p3xr-main-treecontrol-controls-keycount">
    {{ $root.p3xr.strings.status.keyCount({keyCount: $root.p3xr.state.keysRaw.length }) }}&nbsp;
</span>
<!--
<div style="float: right;">

</div>
-->

<div class="p3xr-main-treecontrol-controls-search">
    <p3xr-input
        placeholder="{{ $root.p3xr.settings.searchClientSide ? $root.p3xr.strings.page.treeControls.search.placeholderClient : $root.p3xr.strings.page.treeControls.search.placeholderServer }}"
        ng-model="$root.p3xr.state.search"
        ng-class="{ 'withSearch': $root.p3xr.state.search.length > 0, 'withoutSearch': $root.p3xr.state.search.length  === 0}"
        ng-enter="$ctrl.onSearchChange()"></p3xr-input>
    <md-tooltip md-direction="top">{{ $root.p3xr.strings.page.treeControls.search.infoDetails }}</md-tooltip>

    <md-button class="md-icon-button md-primary" aria-label="" ng-click="$ctrl.onSearchChange()">
        <md-tooltip>{{ $root.p3xr.strings.page.treeControls.search.search}}</md-tooltip>
        <md-icon>search</md-icon>
    </md-button>

    <span ng-if="$root.p3xr.state.search.length > 0">

        <md-button class="md-icon-button md-primary"  aria-label="" ng-click="$root.p3xr.state.search = ''; $ctrl.onSearchChange()"><md-tooltip>{{ $root.p3xr.strings.page.treeControls.search.clear}}</md-tooltip>
            <md-icon>clear</md-icon>
        </md-button>
    </span>

    <span style="display: inline-block; position: relative; top: -2px;">
        <md-tooltip>{{ $root.p3xr.strings.intention.addKeyRoot }}</md-tooltip>
        <md-icon ng-click="$ctrl.p3xrMainRef.addKey({event: $event})" md-theme="{{ $root.p3xr.state.themeCommon }}"
                 class="md-warn">add</md-icon>
    </span>
</div>