<!--
<div ng-if="$root.isElectron" class="p3x-margin-height"></div>
-->

<p3xr-accordion p3xr-title="$root.p3xr.strings.label.connections" p3xr-accordion-key="settings">
    <p3xr-accordion-actions ng-if="!$root.p3xr.state.cfg.readonlyConnections" >
        <p3xr-button  ng-click="$ctrl.setLicense({ $event: $event })"
                      p3xr-label="$root.p3xr.strings.intention.license" p3xr-md-icon="fingerprint"></p3xr-button>

        <p3xr-button  ng-click="$ctrl.connectionForm({ type: 'new'})"
                     p3xr-label="$root.p3xr.strings.intention.connectionAdd" p3xr-md-icon="add_box"></p3xr-button>
    </p3xr-accordion-actions>
    <p3xr-accordion-content>
        <div ng-if="$root.p3xr.state.connections.list.length == 0" layout-padding>
            {{ $root.p3xr.strings.intention.noConnectionsInSettings }}
        </div>

        <md-list ng-if="$root.p3xr.state.connections.list.length > 0">
            <md-list-item class="md-2-line" ng-repeat="connection in $root.p3xr.state.connections.list">
                <div class="md-list-item-text">
                    <h3>{{connection.name}}</h3>
                    <!--                    <h4>{{item.who}}</h4> -->
                    <p>{{connection.host}}:{{connection.port}}</p>
                </div>


                <md-button class="md-warn md-raised" ng-click="$ctrl.deleteConnection({ model: connection, ev: $event})"
                           ng-if="!$root.p3xr.state.cfg.readonlyConnections">
                    <md-icon>delete_forever</md-icon>
                    <span hide-xs>{{ $root.p3xr.strings.intention.delete }}</span>
                    <md-tooltip ng-if="$root.$mdMedia('xs')">{{ $root.p3xr.strings.intention.delete }}</md-tooltip>
                </md-button>

                <md-button class="md-primary md-raised"
                           ng-click="$ctrl.connectionForm({ type: 'edit', model: connection})"
                           ng-if="!$root.p3xr.state.cfg.readonlyConnections">
                    <md-icon>edit</md-icon>
                    <span hide-xs>{{ $root.p3xr.strings.intention.edit }}</span>
                    <md-tooltip ng-if="$root.$mdMedia('xs')">{{ $root.p3xr.strings.intention.edit }}</md-tooltip>
                </md-button>

                <md-button class="md-primary md-raised"
                           ng-click="$ctrl.connectionForm({ type: 'edit', model: connection})"
                           ng-if="$root.p3xr.state.cfg.readonlyConnections">
                    <md-icon>mode_comment</md-icon>
                    <span hide-xs>{{ $root.p3xr.strings.intention.view }}</span>
                    <md-tooltip ng-if="$root.$mdMedia('xs')">{{ $root.p3xr.strings.intention.view }}</md-tooltip>
                </md-button>

                <md-divider ng-if="!$last"></md-divider>
            </md-list-item>
        </md-list>

    </p3xr-accordion-content>
</p3xr-accordion>

<br/>

<p3xr-accordion p3xr-title="$root.p3xr.strings.form.treeSettings.label.formName" p3xr-accordion-key="tree-settings">
    <p3xr-accordion-actions>
        <p3xr-button ng-click="$ctrl.openTreeSettingDialog({ $event: $event})"
                     p3xr-label="$root.p3xr.strings.intention.edit" p3xr-md-icon="edit"></p3xr-button>
    </p3xr-accordion-actions>
    <p3xr-accordion-content>

        <md-list>
            <md-list-item>
                <div layout="row" flex>
                    <div flex>
                        {{ $root.p3xr.strings.form.treeSettings.field.treeSeparator}}
                    </div>
                    <div>
                        <span ng-if="$root.p3xr.settings.redisTreeDivider.length > 0">
                        {{ $root.p3xr.settings.redisTreeDivider}}
                        </span>
                        <span
                            ng-if="$root.p3xr.settings.redisTreeDivider.length < 1 || $root.p3xr.settings.redisTreeDivider === undefined || $root.p3xr.settings.redisTreeDivider === ''">
                            {{ $root.p3xr.strings.label.treeSeparatorEmptyNote}}
                        </span>
                    </div>
                </div>
            </md-list-item>

            <md-divider></md-divider>

            <md-list-item>
                <div layout="row" flex>
                    <div flex>
                        {{ $root.p3xr.strings.form.treeSettings.field.page}}
                    </div>
                    <div>
                        {{ $root.p3xr.settings.pageCount}}
                    </div>
                </div>
            </md-list-item>

            <md-divider></md-divider>


            <md-list-item class="md-2-line">
                <div class="md-list-item-text">
                    <h3>
                        <div layout="row" flex>
                            <div flex>
                                {{ $root.p3xr.strings.form.treeSettings.maxValueDisplay}}
                            </div>
                            <div>
                                {{ $root.p3xr.settings.maxValueDisplay}}
                            </div>
                        </div>
                    </h3>
                    <p>
                        {{ $root.p3xr.strings.form.treeSettings.maxValueDisplayInfo }}
                    </p>
                </div>
            </md-list-item>

            <md-divider></md-divider>

            <md-list-item>
                <div layout="row" flex>
                    <div flex>
                        {{ $root.p3xr.strings.form.treeSettings.field.keysSort}}
                    </div>
                    <div>
                        {{ $root.p3xr.settings.keysSort ? $root.p3xr.strings.label.keysSort.on :
                        $root.p3xr.strings.label.keysSort.off }}
                    </div>
                </div>
            </md-list-item>


            <md-divider></md-divider>

            <md-list-item>
                <div layout="row" flex>
                    <div flex>
                        {{ $root.p3xr.strings.form.treeSettings.field.searchMode}}
                    </div>
                    <div>
                        {{ $root.p3xr.settings.searchClientSide ?
                        $root.p3xr.strings.form.treeSettings.label.searchModeClient :
                        $root.p3xr.strings.form.treeSettings.label.searchModeServer }}
                    </div>
                </div>
            </md-list-item>
            <md-divider></md-divider>

            <md-list-item>
                <div layout="row" flex>
                    <div flex>
                        {{ $root.p3xr.strings.form.treeSettings.field.searchModeStartsWith}}
                    </div>
                    <div>
                        {{ $root.p3xr.settings.searchStartsWith ?
                        $root.p3xr.strings.form.treeSettings.label.searchModeStartsWith :
                        $root.p3xr.strings.form.treeSettings.label.searchModeIncludes }}
                    </div>
                </div>
            </md-list-item>

            <md-divider></md-divider>

            <md-list-item>
                <div layout="row" flex>
                    <div flex>
                        {{ $root.p3xr.settings.jsonFormat == 2 ? $root.p3xr.strings.form.treeSettings.label.jsonFormatTwoSpace : $root.p3xr.strings.form.treeSettings.label.jsonFormatFourSpace }}
                    </div>
                </div>
            </md-list-item>
            <md-divider></md-divider>

            <md-list-item>
                <div layout="row" flex>
                    <div flex>
                        {{ $root.p3xr.settings.animation ? $root.p3xr.strings.form.treeSettings.label.animation : $root.p3xr.strings.form.treeSettings.label.noAnimation }}
                    </div>
                </div>
            </md-list-item>
        </md-list>

    </p3xr-accordion-content>
</p3xr-accordion>