<md-toolbar class="md-accent" md-theme="{{ $root.p3xr.state.themeLayout}}" id="p3xr-main-header">
    <div class="md-toolbar-tools">
        <h2 flex md-truncate>{{ $root.p3xr.strings.intention.main }}</h2>
        <span ng-if="$root.p3xr.state.connection !== undefined">

                <md-button class="md-icon-button md-primary" aria-label="{{ $root.p3xr.strings.intention.save }}" ng-click="$ctrl.save()">
                <md-icon>save</md-icon>
                <md-tooltip md-direction="bottom">{{ $root.p3xr.strings.intention.save }}</md-tooltip>
            </md-button>


            <md-input-container>
                <md-tooltip md-direction="bottom">{{ $root.p3xr.strings.form.main.label.database }}</md-tooltip>
                <md-select ng-model="$ctrl.currentDatabase"
                            aria-label="{{ $root.p3xr.strings.form.main.label.database }}" class="md-accent">
                    <md-option ng-repeat="dbIndex in $root.p3xr.state.databaseIndexes" ng-value="dbIndex"
                               ng-click="$ctrl.selectDatabase(dbIndex)">
                        <span ng-if="$root.p3xr.state.info.keyspaceDatabases[dbIndex]">
                            <md-icon>radio_button_checked</md-icon>
                        </span>
                        <span ng-if="!$root.p3xr.state.info.keyspaceDatabases[dbIndex]">
                            <md-icon>radio_button_unchecked</md-icon>
                        </span>
                        {{ dbIndex }}
                    </md-option>
                </md-select>
            </md-input-container>


            <md-button class="md-icon-button md-primary" aria-label="{{ $root.p3xr.strings.intention.statistics }}" ng-click="$ctrl.statistics()">
                <md-icon>show_chart</md-icon>
                <md-tooltip md-direction="bottom">{{ $root.p3xr.strings.intention.statistics }}</md-tooltip>
            </md-button>

            <md-button class="md-icon-button md-primary" aria-label="{{ $root.p3xr.strings.intention.console }}" ui-sref="console">
                    <md-icon>keyboard</md-icon>
                <md-tooltip md-direction="bottom">{{ $root.p3xr.strings.intention.console }}</md-tooltip>
            </md-button>

            <md-button class="md-icon-button md-primary" aria-label="{{ $root.p3xr.strings.intention.refresh }}" ng-click="$ctrl.refresh()">
                <md-icon>refresh</md-icon>
                <md-tooltip md-direction="bottom">{{ $root.p3xr.strings.intention.refresh }}</md-tooltip>
            </md-button>

        </span>
    </div>
</md-toolbar>
<md-content md-theme="{{ $root.p3xr.state.theme}}" id="p3xr-main-content">

    <div class="md-title" layout-padding
         ng-if="$root.p3xr.state.connections.list.length > 0 && $root.p3xr.state.connection === undefined">
        {{ $root.p3xr.strings.title.main }}

    </div>

    <div ng-if="$root.p3xr.state.connections.list.length === 0" layout-padding>
        <md-button ui-sref="settings" md-no-ink
                   style="display: inline-block;  word-wrap: break-word;  white-space: normal;">
            {{ $root.p3xr.strings.intention.noConnections }}
        </md-button>
    </div>

    <div ng-if="$root.p3xr.state.connection !== undefined">

        <p3xr-undefined hide-xs>
            <p3xr-main-treecontrol-controls id="p3xr-main-treecontrol-controls-container" p3xr-main-ref="$ctrl"  ></p3xr-main-treecontrol-controls>
            <p3xr-main-tree id="p3xr-main-treecontrol-container"  p3xr-resize="$ctrl.resize()" p3xr-main-ref="$ctrl"></p3xr-main-tree>
            <div id="p3xr-main-content-sizer"  md-colors="{ background: resizerColor }" md-theme="{{ $root.p3xr.state.themeLayout}}">
                <md-tooltip md-direction="top">{{ $root.p3xr.strings.label.resizerInfo({ width: $root.p3xr.settings.resizeMinWidth}) }}</md-tooltip>
            </div>
            <div id="p3xr-main-content-container">
                <ui-view>
                </ui-view>
            </div>
        </p3xr-undefined>

        <div layout="column" ng-if="$root.$mdMedia('xs')">
            <p3xr-main-treecontrol-controls  p3xr-main-ref="$ctrl" flex></p3xr-main-treecontrol-controls>
            <p3xr-main-tree flex id="p3xr-main-treecontrol-container-directive-small" p3xr-resize="$ctrl.resize()" p3xr-main-ref="$ctrl"></p3xr-main-tree>
            <ui-view flex>
            </ui-view>
            </div>
        </div>



    </div>

</md-content>