<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>
</div>

<span ng-if="$root.p3xr.state.pages > 1">
    <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" style="opacity: 0.5; float: right; line-height: 26px;">
    {{ $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>
        <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-primary">add</md-icon>
    </span>
</div>