<div layout-fill flex class="rffwhid-page">
    <md-sidenav class="md-sidenav-left" md-component-id="navBarSidenavMore">
        <md-toolbar>
            <h1 class="md-toolbar-tools">{{ "MORE" | translate }}</h1>
        </md-toolbar>

        <md-content layout-margin>
            <p class="text-center">
                <md-button class="md-warn" ng-click="toggleSidenav('navBarSidenavMore');changeTab('rffwhid.telemetry');">
                    {{ "rffwhid.TELEMETRY_TAB_TITLE" | translate }}
                </md-button>
            </p>
            <p class="text-center">
                <md-button class="md-warn" ng-click="toggleSidenav('navBarSidenavMore');changeTab('rffwhid.logging');">
                    {{ "rffwhid.LOGGING_TAB_TITLE" | translate }}
                </md-button>
            </p>
            <p class="text-center">
                <md-button class="md-warn" ng-click="toggleSidenav('navBarSidenavMore');openExternalLink('https://raceflight.net/docs');">
                    {{ "rffwhid.HELP_TAB_TITLE" | translate }}
                </md-button>
            </p>
            <p class="text-center">
                <md-button ng-click="toggleSidenav('navBarSidenavMore');" class="md-raised md-primary">
                    {{ "CLOSE" | translate }}
                </md-button>
            </p>
        </md-content>
    </md-sidenav>

    <div layout="column" flex>
        <div layout="row" flex>
            <div layout="column" flex="33">
                <language-select-menu></language-select-menu>
            </div>
            <div layout="row" flex="33">
                <img src="/app/resources/img/flightOneLogo.svg" class="flight-logo" layout-align="center center">
            </div>
            <div class="version-wrapper" layout="column" flex="33">
                <div layout="row" layout-align="end" flex>
                    <span class="md-caption">{{ "rffwhid.VERSION_TITLE" | translate }}: {{ get_configurator_version() }}</span>
                </div>
                <div layout="row" layout-align="end" flex>
                    <span class="md-caption">{{ "rffwhid.FC_VERSION_TITLE" | translate}}: {{ get_fc_version() }}</span>
                </div>
                <div layout="row" layout-align="end" flex>
                    <span class="md-caption">{{ "rffwhid.FC_HARDWARE_TITLE" | translate}}: {{ get_fc_hardware() }}</span>
                </div>
                <div layout="row" layout-align="end" flex>
                    <div layout="row">
                        <a class="md-caption update-firmware-link" ng-click="changeTab('changeToRFBL');">
                            {{ "rffwhid.UPDATE_FIRMWARE_LINK" | translate }}
                        </a>
                    </div>
                    <div layout="row">
                        <a class="md-caption settings-link" ng-click="changeTab('rffwhid.user_settings');">
                            {{ "SETTINGS" | translate }}
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <md-nav-bar md-selected-nav-item="selectedItem" nav-bar-aria-label="navigation links" class="rffwhid-main-nav-bar" flex>
            <md-nav-item md-nav-click="changeTab('rffwhid.news')" name="news">{{ "rffwhid.NEWS" | translate }}</md-nav-item>
            <md-nav-item md-nav-click="changeTab('rffwhid.setup')" name="setup">{{ "rffwhid.SETUP_TAB_TITLE" | translate }}</md-nav-item>
            <md-nav-item md-nav-click="changeTab('rffwhid.telemetry')" name="telemetry" hide-sm>{{ "rffwhid.TELEMETRY_TAB_TITLE" | translate }}</md-nav-item>
            <md-nav-item md-nav-click="changeTab('rffwhid.configuration')" name="configuration">{{ "rffwhid.CONFIGURATION_TAB_TITLE" | translate }}</md-nav-item>
            <md-nav-item md-nav-click="changeTab('rffwhid.pid_tuning')" name="pid_tuning">{{ "rffwhid.PID_TUNING_TAB_TITLE" | translate }}</md-nav-item>
            <md-nav-item md-nav-click="changeTab('rffwhid.esc')" name="esc">{{ "rffwhid.ESC_TAB_TITLE" | translate }}</md-nav-item>
            <md-nav-item md-nav-click="changeTab('rffwhid.logging')" name="logging" hide-sm>{{ "rffwhid.LOGGING_TAB_TITLE" | translate }}</md-nav-item>
            <md-nav-item md-nav-click="changeTab('rffwhid.console')" name="console">{{ "rffwhid.CONSOLE_TAB_TITLE" | translate }}</md-nav-item>
            <md-nav-item md-nav-click="openExternalLink('https://raceflight.net/docs')" name="help" hide-sm>{{ "rffwhid.HELP_TAB_TITLE" | translate }}</md-nav-item>
            <md-nav-item md-nav-click="toggleSidenav('navBarSidenavMore')" name="more" hide-gt-sm>{{ "MORE" | translate }}</md-nav-item>
        </md-nav-bar>
    </div>

    <ui-view flex class="main-content"></ui-view>
</div>