<div class="rffwhid-configuration-page">
    <md-sidenav class="md-sidenav-left" md-component-id="telemetryToolbarSidenavHelp">
        <md-toolbar>
            <h1 class="md-toolbar-tools">Help</h1>
        </md-toolbar>

        <md-content layout-margin>
            <p class="md-title">
                Telemetry
            </p>
            <p>
                A feature that allows you to receive real time flight data from the aircraft back to you; It’s commonly seen in radio TX and RX, there are also standalone devices for telemetry
            </p>
            <p class="text-right">
                <md-button ng-click="toggleSidenav('telemetryToolbarSidenavHelp')" class="md-raised md-primary">
                    {{ "CLOSE" | translate }}
                </md-button>
            </p>
        </md-content>
    </md-sidenav>
    <md-sidenav class="md-sidenav-left" md-component-id="escToolbarSidenavHelp">
        <md-toolbar>
            <h1 class="md-toolbar-tools">Help</h1>
        </md-toolbar>

        <md-content layout-margin>
            <p class="md-title">
                Electronic Speed Control(ESC)
            </p>
            <p>
                <img src="/app/resources/img/help_sidebar/esc-body-quadcopter.jpg" class="img-responsive">
                ESC is used to convert signal from Flight controller or radio receiver, and apply the right current to the  electric motors.
            </p>
            <p>
                It also usually includes a Battery Elimination Circuit (BEC), which provides power for the RC system and other onboard electronics.
            </p>
            <p class="text-right">
                <md-button ng-click="toggleSidenav('escToolbarSidenavHelp')" class="md-raised md-primary">
                    {{ "CLOSE" | translate }}
                </md-button>
            </p>
        </md-content>
    </md-sidenav>
    <md-sidenav class="md-sidenav-left" md-component-id="vtxButtonSidenavHelp">
        <md-toolbar>
            <h1 class="md-toolbar-tools">Help</h1>
        </md-toolbar>

        <md-content layout-margin>
            <p class="md-title">
                VTX(Video Transmitter)
            </p>
            <p>
                <img src="/app/resources/img/help_sidebar/vtx-top-plate.jpg" class="img-responsive">
                A device that sends video signal to  our video receiver, video captured from a on-board camera.
            </p>
            <p class="text-right">
                <md-button ng-click="toggleSidenav('vtxButtonSidenavHelp')" class="md-raised md-primary">
                    {{ "CLOSE" | translate }}
                </md-button>
            </p>
        </md-content>
    </md-sidenav>
    <form class="sticky-scroll-wrapper" name="configurationForm">
        <md-toolbar>
            <div class="md-toolbar-tools">{{ "rffwhid.configuration.RADIO_SETTINGS_TOOLBAR_TITLE" | translate }}</div>
        </md-toolbar>

        <div layout="row" layout-padding flex layout-align="begin center">
            <md-button class="md-raised" ui-sref="rffwhid.rffwhid_select_method_bind_spektrum_wizard">
                {{ "rffwhid.configuration.BIND_SPEKTRUM_BUTTON" | translate }}
                <md-tooltip>
                    Binding - the process of pairing Spektrum radio transmitter and receiver when first setting them up to work together
                </md-tooltip>
            </md-button>
        </div>

        <div layout="row" layout-padding>
            <md-input-container flex>
                <label>{{ "rffwhid.configuration.RECEIVER_PROTOCOL_LABEL" | translate }}</label>
                <md-select placeholder="{{ 'rffwhid.configuration.RECEIVER_PROTOCOL_PLACEHOLDER' | translate }}" ng-model="RFDump.set.rx_protocol">
                    <md-option ng-repeat="option in rx_protocol_names" ng-value="option.val">
                        {{ option.name | translate }}
                    </md-option>
                </md-select>
            </md-input-container>
            <md-input-container flex>
                <label>{{ "rffwhid.configuration.RECEIVER_PORT_LABEL" | translate }}</label>
                <md-select placeholder="{{ 'rffwhid.configuration.RECEIVER_PORT_PLACEHOLDER' | translate }}" ng-model="RFDump.set.rx_usart">
                    <md-option ng-repeat="option in rx_usart_names" ng-value="option.val">
                        {{ option.name | translate }}
                    </md-option>
                </md-select>
            </md-input-container>
            <div layout="row" flex>
            </div>
        </div>

        <md-toolbar>
            <div class="md-toolbar-tools">
                {{ "rffwhid.configuration.TELEMETRY_TOOLBAR_TITLE" | translate }}
                <md-button class="md-icon-button" aria-label="Telemetry help" ng-click="toggleSidenav('telemetryToolbarSidenavHelp')">
                    <i class="material-icons">help_outline</i>
                </md-button>
            </div>
        </md-toolbar>

        <div layout="row" layout-padding flex layout-align="begin center">
            <div layout="row" flex>
                <md-button class="md-raised" ui-sref="rffwhid.rffwhid_remove_props_and_connect_battery_vtx_wizard">
                    {{ "rffwhid.configuration.VTX_WIZARD_BUTTON" | translate }}
                </md-button>
                <md-button class="md-icon-button" aria-label="VTX help" ng-click="toggleSidenav('vtxButtonSidenavHelp')">
                    <i class="material-icons">help_outline</i>
                </md-button>
            </div>
        </div>

        <div layout="row" layout-padding flex>
            <div class="row" layout-align="center" flex>
                <md-switch ng-model="RFDump.set.telem_crsf" ng-true-value="3" ng-false-value="0" aria-label="Crossfire Telemetry on TX3">
                    Crossfire Telemetry on TX3
                </md-switch>
            </div>
        </div>

        <div layout="row" layout-padding flex>
            <div class="row" layout-align="start" flex>
                <md-switch ng-model="RFDump.set.telem_spek" ng-true-value="1" ng-false-value="0" aria-label="Spektrum telemetry">
                    {{ "rffwhid.configuration.SPEKTRUM_TELEMETRY_SWITCH_LABEL" | translate }}
                </md-switch>
            </div>
            <div class="row" layout-align="center" flex>
                <md-switch ng-model="RFDump.set.telem_sport" ng-true-value="14" ng-false-value="0" aria-label="Taranis telemetry">
                    {{ "rffwhid.configuration.TARANIS_TELEMETRY_RX3_PIN_SWITCH_LABEL" | translate }}
                </md-switch>
            </div>
        </div>

        <div layout="row" layout-padding flex>
            <div class="row" layout-align="start" flex>
                <md-switch ng-model="RFDump.set.arm_method" ng-true-value="1" ng-false-value="0" aria-label="Arm method">
                    {{ "rffwhid.configuration.DOUBLE_ARM_OPTION" | translate }}
                </md-switch>
            </div>
            <div class="row" layout-align="center" flex>
                <md-input-container>
                    <label>OSD</label>
                    <md-select placeholder="USART" ng-model="RFDump.set.telem_rfosd" required>
                        <md-option ng-repeat="option in  telem_usart_names" ng-value="option.val">
                            {{ option.name | translate }}
                        </md-option>
                    </md-select>
                </md-input-container>
            </div>
        </div>

        <div layout="row" layout-padding>
            <md-input-container flex="33">
                <label>VTX device</label>
                <md-select placeholder="VTX device type" ng-model="vtx_device_type" ng-change="vtx_device_type_changed();" required>
                    <md-option ng-repeat="option in vtx_device_names" ng-value="option.val">
                        {{ option.name | translate }}
                    </md-option>
                </md-select>
            </md-input-container>
            <div layout="row" flex layout-align="start center" ng-show="vtx_device_type == 'tbs_unify_pro'">
                <md-input-container flex="33">
                    <label>{{ "rffwhid.configuration.TELEM_SMARTAUDIO_LABEL" | translate }}</label>
                    <md-select placeholder="{{ 'rffwhid.configuration.TELEM_SMARTAUDIO_PLACEHOLDER' | translate }}" name="telem_smartaudio" ng-model="RFDump.set.telem_smartaudio" ng-required="vtx_device_type == 'tbs_unify_pro'">
                        <md-option ng-repeat="option in telem_smartaudio_names" ng-value="option.val">
                            {{ option.name | translate }}
                        </md-option>
                    </md-select>
                    <div ng-messages="configurationForm.telem_smartaudio.$error">
                        <div ng-message="required" class="error-message">{{ "THIS_FIELD_IS_REQUIRED" | translate }}</div>
                    </div>
                </md-input-container>
                <md-button class="md-icon-button" aria-label="Smart audio select help" ng-click="openExternalLink('http://raceflightinfo.com/2017/08/06/tbs-smart-audio/');">
                    <i class="material-icons">help_outline</i>
                </md-button>
            </div>

            <md-input-container flex="33" ng-show="vtx_device_type == 'tramp_hv'">
                <label>PIN</label>
                <md-select placeholder="PIN" ng-model="RFDump.set.telem_tramp" name="telem_tramp" ng-required="vtx_device_type == 'tramp_hv'">
                    <md-option ng-repeat="option in telem_tramp_names" ng-value="option.val">
                        {{ option.name | translate }}
                    </md-option>
                </md-select>
                <div ng-messages="configurationForm.telem_tramp.$error">
                    <div ng-message="required" class="error-message">{{ "THIS_FIELD_IS_REQUIRED" | translate }}</div>
                </div>
            </md-input-container>
        </div>

        <md-toolbar>
            <div class="md-toolbar-tools">
                {{ "rffwhid.configuration.ESC_SETTINGS_TOOLBAR_TITLE" | translate }}
                <md-button class="md-icon-button" aria-label="ESC help" ng-click="toggleSidenav('escToolbarSidenavHelp')">
                    <i class="material-icons">help_outline</i>
                </md-button>
            </div>
        </md-toolbar>

        <div layout="row" layout-padding>
            <div layout="row" flex>
                <!-- Spektrum SPMFCF400 remove digital precision mode option below -->
                <md-button class="md-raised" ng-hide="RFDump.HARDWARE === 'Spektrum SPMFCF400'"  ng-click="enable_digital_precision_mode();">{{ "rffwhid.configuration.ENABLE_DIGITAL_PRECISION_MODE" | translate }}</md-button>
            </div>
            <md-input-container flex>
                <label>{{ "rffwhid.configuration.FREQUENCY_LABEL" | translate }}</label>
                <md-select placeholder="Frequency" ng-model="RFDump.set.esc_frequency">
                    <md-option ng-repeat="option in esc_frequency_names" ng-value="option.val">
                        {{ option.name | translate }}
                    </md-option>
                </md-select>
            </md-input-container>
            <md-input-container flex>
                <label>{{ "rffwhid.configuration.ESC_PROTOCOL_LABEL" | translate }}</label>
                <md-select placeholder="{{ 'rffwhid.configuration.ESC_PROTOCOL_PLACEHOLDER' | translate }}" ng-model="RFDump.set.esc_protocol">
                    <md-option ng-repeat="option in esc_protocol_names" ng-value="option.val">
                        {{ option.name | translate }}
                    </md-option>
                </md-select>
            </md-input-container>
        </div>

        <div layout="row" layout-padding>
            <div layout="row" flex>
                <md-button class="md-raised" ui-sref="rffwhid.rffwhid_remove_props_and_connect_battery_esc_info_wizard">{{ "rffwhid.configuration.ESC_INFO_BUTTON" | translate }}</md-button>
            </div>
        </div>

        <md-toolbar>
            <div class="md-toolbar-tools">{{ "rffwhid.configuration.TESTING_TOOLBAR_TITLE" | translate }}</div>
        </md-toolbar>

        <div layout="row" layout-padding>
            <div layout="row" flex>
                <md-button class="md-raised" ui-sref="rffwhid.rffwhid_remove_props_and_connect_battery_testmotors_wizard">{{ "rffwhid.configuration.TEST_MOTORS" | translate }}</md-button>
            </div>
            <div layout="row" flex>
                <md-button class="md-raised" ui-sref="rffwhid.rffwhid_remove_props_and_connect_battery_idle_test_motors_wizard">{{ "rffwhid.configuration.IDLE_TESTING_MOTORS" | translate }}</md-button>
            </div>
            <div layout="row" flex>
            </div>
        </div>

        <md-toolbar>
            <div class="md-toolbar-tools">{{ "rffwhid.configuration.MIXER_TOOLBAR_TITLE" | translate }}</div>
        </md-toolbar>

        <div layout="row" layout-align="start center" layout-padding flex>
            <md-switch ng-model="RFDump.set.mixer_type" ng-true-value="1" ng-false-value="0" aria-label="Reverse props direction">
                {{ "rffwhid.configuration.REVERSE_PROP_DIRECTION_SWITCH_LABEL" | translate }}
            </md-switch>
            <md-button class="md-icon-button" aria-label="Reverse prop direction switch help" ng-click="openExternalLink('http://raceflightinfo.com/2017/08/07/motor-directions/');">
                <i class="material-icons">help_outline</i>
            </md-button>
        </div>

        <md-toolbar>
            <div class="md-toolbar-tools">{{ "rffwhid.configuration.LED_TOOLBAR_TITLE" | translate }}</div>
        </md-toolbar>

        <div layout="row" layout-padding>
            <md-input-container flex="30">
                <label>{{ "rffwhid.configuration.LED_COUNT_LABEL" | translate }}</label>
                <input type="number" ng-model="RFDump.set.led_count" name="led_count" ng-required="true">
                <div ng-messages="configurationForm.led_count.$error">
                    <div ng-message="required">{{ "THIS_FIELD_IS_REQUIRED" | translate }}</div>
                </div>
            </md-input-container>

            <md-input-container flex="30">
                <label>{{ "rffwhid.configuration.LED_MODE_LABEL" | translate }}</label>
                <md-select placeholder="LED mode"  ng-model="RFDump.set.led_mode">
                    <md-option ng-repeat="option in led_mode_names" ng-value="option.val">
                        {{ option.name | translate }}
                    </md-option>
                </md-select>
            </md-input-container>
            <div flex="40">
                <div ng-messages="configurationForm.led_red.$error">
                    <div ng-message="required" class="error-message">LED Red color is required</div>
                    <div ng-message="min" class="error-message">LED Red color should be in range from 0 to 255</div>
                    <div ng-message="max" class="error-message">LED Red color should be in range from 0 to 255</div>
                </div>
                <div ng-messages="configurationForm.led_green.$error">
                    <div ng-message="required" class="error-message">LED Green color is required</div>
                    <div ng-message="min" class="error-message">LED Green color should be in range from 0 to 255</div>
                    <div ng-message="max" class="error-message">LED Green color should be in range from 0 to 255</div>
                </div>
                <div ng-messages="configurationForm.led_blue.$error">
                    <div ng-message="required" class="error-message">LED Blue color is required</div>
                    <div ng-message="min" class="error-message">LED Blue color should be in range from 0 to 255</div>
                    <div ng-message="max" class="error-message">LED Blue color should be in range from 0 to 255</div>
                </div>
                <h3>
                    {{ "rffwhid.configuration.LED_COLOR_LABEL" | translate }} <span ng-attr-style="border: 1px solid #333; background: rgb({{RFDump.set.led_red}},{{RFDump.set.led_green}},{{RFDump.set.led_blue}})">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </h3>

                <md-slider-container>
                    <span>Red</span>
                    <md-slider flex min="0" max="255" ng-model="RFDump.set.led_red" aria-label="red" id="led-red-slider" class="red-slider">
                    </md-slider>
                    <md-input-container>
                        <input flex type="number" ng-model="RFDump.set.led_red" aria-label="LED red" aria-controls="led-red-slider" name="led_red" min="0" max="255" required>
                    </md-input-container>
                </md-slider-container>

                <md-slider-container>
                    <span>Green</span>
                    <md-slider flex ng-model="RFDump.set.led_green" min="0" max="255" aria-label="green" id="led-green-slider" class="green-slider">
                    </md-slider>
                    <md-input-container>
                        <input flex type="number" ng-model="RFDump.set.led_green" aria-label="LED green" aria-controls="led-green-slider" name="led_green" min="0" max="255" required>
                    </md-input-container>
                </md-slider-container>

                <md-slider-container>
                    <span>Blue</span>
                    <md-slider flex ng-model="RFDump.set.led_blue" min="0" max="255" aria-label="blue" id="led-blue-slider" class="blue-slider">
                    </md-slider>
                    <md-input-container>
                        <input flex type="number" ng-model="RFDump.set.led_blue" aria-label="LED blue" aria-controls="led-blue-slider" name="led_blue" min="0" max="255" required>
                    </md-input-container>
                </md-slider-container>
            </div>
        </div>
    </form>

    <div class="sticky-footer" flex>
        <md-toolbar class="sticky-toolbar">
            <div class="md-toolbar-tools">
                <span flex></span>
                <md-button class="md-raised" aria-label="Save" ng-click="save()">
                    {{ "SAVE" | translate }}
                </md-button>
            </div>
        </md-toolbar>
    </div>
</div>
