<div class="rffwhid-setup-page" layout="column">
    <div class="sticky-scroll-wrapper">
        <div class="md-padding">
            <md-card flex>
                <md-card-actions layout="row">
                    <div layout="row" flex>
                        <md-button class="md-raised md-primary" ui-sref="rffwhid.rffwhid_use_quad_mostly_fc_wizard">1. {{ "rffwhid.setup.SETUP_FLIGHT_CONTROLLER_BUTTTON" | translate }} </md-button>
                    </div>
                    <div layout="row" layout-align="center center" flex>
                        <md-button class="md-raised md-primary" ui-sref="rffwhid.rffwhid_scan_rx_wizard">2. {{ "rffwhid.setup.DETECT_RECEIVER_BUTTTON" | translate }}</md-button>
                    </div>
                    <div layout="row" layout-align="end center" flex>
                        <md-button class="md-raised md-primary" ui-sref="rffwhid.rffwhid_prepare_step_rca_wizard">3. {{ "rffwhid.setup.SETUP_RADIO_BUTTTON" | translate }}</md-button>
                    </div>
                </md-card-actions>
            </md-card>
        </div>
        <div class="md-padding">
            <md-card flex>
                <md-card-actions layout="row">
                    <div layout="row" flex>
                        <md-button class="md-raised md-primary" ui-sref="rffwhid.rffwhid_remove_props_and_connect_battery_1wire_auto_wizard">4. {{ "rffwhid.setup.UPDATE_ESC_BUTTON" | translate }}</md-button>
                    </div>
                    <div layout="row" layout-align="center center" flex>
                        <md-button class="md-raised md-primary" ui-sref="rffwhid.rffwhid_remove_props_and_disconnect_battery_wiz_mot_wizard">5. {{ "rffwhid.setup.CALIBRATE_MOTORS_BUTTON" | translate }}</md-button>
                    </div>
                    <div layout="row" layout-align="end center" flex>
                        <md-button class="md-raised md-primary" ui-sref="rffwhid.rffwhid_remove_props_and_disconnect_battery_fix_motor_direction_wizard">6. {{ "rffwhid.setup.FIX_MOTOR_DIRECTION_BUTTON" | translate }}</md-button>
                    </div>
                </md-card-actions>
            </md-card>
        </div>
        <div class="md-padding">
            <md-card flex ng-repeat="(key, mode) in modes">
                <md-card-content>
                    <div layout="row">
                        <md-input-container>
                            <label>{{ "rffwhid.setup.CHANNEL_LABEL" | translate: {'channel_name': key } }}</label>
                            <input flex ng-model="mode.channel">
                        </md-input-container>
                        <div layout="column" layout-align="center center" ng-show="modes_help[key]">
                            <md-button class="md-icon-button" aria-label="{{ key }}-mode help" ng-click="toggleSidenav(key+'ModeSidenavHelp')">
                                <i class="material-icons">help_outline</i>
                                <md-tooltip>{{ modes_help[key]['help_text'] }}</md-tooltip>
                            </md-button>
                        </div>
                        <div class="channel-mode-spacer" ng-hide="modes_help[key]">

                        </div>
                        <div flex class="slider-wrapper">
                            <div ya-no-ui-slider="mode.opts" id="{{ key }}-slider"></div>
                        </div>
                    </div>
                </md-card-content>
            </md-card>
            <div ng-hide="modes">{{ "rffwhid.setup.NO_MODES_LABEL" | translate }}</div>
        </div>

        <div class="md-padding">
            <md-card flex>
                <md-card-actions layout="row">
                    <div layout="row" flex>
                        <md-button class="md-raised md-primary" ng-click="showRCdataModal()">{{ "rffwhid.setup.RADIO_DATA_BUTTON" | translate }}</md-button>
                    </div>
                    <div layout="row" layout-align="center center" flex>
                    </div>
                    <div layout="row" layout-align="end center" flex>
                    </div>
                </md-card-actions>
            </md-card>
        </div>

    </div>


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