<div ng-if="$ctrl.pages > 1" style="text-align: center;">
    <md-button class="md-icon-button md-primary" aria-label="" ng-click="$ctrl.pager({ 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.pager({ 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="$ctrl.pages"
                ng-change="$ctrl.pageChange()" ng-model="$ctrl.page"></p3xr-input> / {{ $ctrl.pages }}

    <md-button class="md-icon-button" aria-label="" ng-click="$ctrl.pager({ 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.pager({ page: 'last' })">
        <md-tooltip>{{ $root.p3xr.strings.page.treeControls.pager.last}}</md-tooltip>
        <md-icon>skip_next</md-icon>
    </md-button>
</div>


<div layout-gt-xs="row" layout="column" layout-align-gt-sm="start center" layout-align="center center" md-colors="{ background: 'primary-300' }">
    <div flex="20"><span ng-if="!$root.$mdMedia('xs')">&nbsp;</span>{{ $root.p3xr.strings.page.key.hash.table.hashkey }}</div>
    <div flex="60">
        {{ $root.p3xr.strings.page.key.hash.table.value }}
    </div>
    <div flex="20" style="text-align: right" class="p3xr-connected-readonly-filler">
        <md-button class="md-icon-button " ng-click="$ctrl.addHash({ $event: $event})" ng-if="$root.p3xr.state.connection.readonly !== true">
            <md-tooltip>{{ $root.p3xr.strings.intention.add }}</md-tooltip>
            <md-icon>add</md-icon>
        </md-button>
    </div>
</div>


<div layout-gt-xs="row" layout="column" layout-align-gt-sm="start start" layout-align="center center" ng-repeat="(key, value) in $ctrl.pageBasedList()"
     ng-class="{ 'p3xr-list-key-odd-item': $odd }" class="p3xr-list-key-item">
    <div flex="20" ng-click="$ctrl.editValue({ hashKey: key, value: value, $event: $event})"><span ng-if="!$root.$mdMedia('xs')">&nbsp;</span><span ng-if="$root.p3xr.settings.maxValueDisplay > 0 && key.length > $root.p3xr.settings.maxValueDisplay">{{ key.substring(0, $root.p3xr.settings.maxValueDisplay) }}...</span><span ng-if="$root.p3xr.settings.maxValueDisplay === 0 || key.length <= $root.p3xr.settings.maxValueDisplay || $root.p3xr.settings.maxValueDisplay === -1 ">{{ key }}</span></div>
    <div flex="60" class="p3xr-pre" style="overflow: auto;align-items: flex-start; max-height: 200px;"
    ng-click="$ctrl.editValue({ hashKey: key, value: value, $event: $event})"><span ng-if="$root.p3xr.settings.maxValueDisplay > 0 && value.length > $root.p3xr.settings.maxValueDisplay">{{ value.substring(0, $root.p3xr.settings.maxValueDisplay) }}...</span><span ng-if="$root.p3xr.settings.maxValueDisplay === 0 || value.length <= $root.p3xr.settings.maxValueDisplay || $root.p3xr.settings.maxValueDisplay === -1 ">{{ value }}</span></div>
    <div flex="20" style="text-align: right; ">

        <md-button class="md-icon-button md-warn" ng-click="$ctrl.deleteHashKey({ hashKey: key, $event: $event})" ng-if="$root.p3xr.state.connection.readonly !== true">
            <md-tooltip>{{ $root.p3xr.strings.intention.delete }}</md-tooltip>
            <md-icon>delete</md-icon>
        </md-button>

        <md-button class="md-icon-button md-accent" ng-click="$ctrl.showJson({ value: value})">
            <md-tooltip>{{ $root.p3xr.strings.intention.jsonViewShow }}</md-tooltip>
            <md-icon>table_chart</md-icon>
        </md-button>

        <md-button class="md-icon-button md-accent" ng-click="$ctrl.copy({ $event: $event, value: value})" >
            <md-tooltip>{{ $root.p3xr.strings.intention.copy }}</md-tooltip>
            <md-icon>content_copy</md-icon>
        </md-button>

        <md-button class="md-icon-button md-primary"
                   ng-click="$ctrl.editValue({ hashKey: key, value: value, $event: $event})">
            <md-tooltip>{{ $root.p3xr.strings.intention.edit }}</md-tooltip>
            <md-icon>edit</md-icon>
        </md-button>


    </div>
</div>