<div class="sticky-scroll-wrapper-without-footer">
    <div layout="row" flex>
        <md-card flex>
            <md-card-title>
                <md-card-title-text>
                    <span class="md-headline">{{ "rffwhid.rffwhid_change_motor_order_fix_motor_direction_wizard.HEADLINE" | translate }}</span>
                    <span class="md-subhead">{{ "STEP" | translate }} 2/4</span>
                </md-card-title-text>
                <md-card-title-media>
                </md-card-title-media>
            </md-card-title>

            <md-card-content>
                <div layout="row" flex>
                    <p class="text-center md-title" flex>
                        <span class="md-headline">{{ "rffwhid.rffwhid_change_motor_order_fix_motor_direction_wizard.TITLE_ROW" | translate }}</span>
                    </p>
                </div>
                <div layout="row" layout-align="center center" flex>
                    <md-button class="md-raised md-primary" ng-click="toggleMotorSpinning(currentMotor)" ng-disabled="busy">{{ motorSpinning ? ("STOP"|translate) : ("START"|translate) }}</md-button>
                </div>
                <md-radio-group ng-model="mout">
                    <div layout="row" flex>
                        <div layout="row" flex layout-align="center">
                            <!--HACK: Hide translation because i18nextract not catch it in IF block-->
                            <span ng-show="false">{{ "rffwhid.rffwhid_change_motor_order_fix_motor_direction_wizard.ALREADY_SET_MOTOR" | translate }}</span>
                            <md-radio-button value="0" class="md-primary" ng-disabled="checkMoutKey(1) != null">{{ "FRONT_LEFT" | translate }} {{ checkMoutKey(1) != null ? ("rffwhid.rffwhid_change_motor_order_fix_motor_direction_wizard.ALREADY_SET_MOTOR"|translate): "" }}</md-radio-button>
                        </div>
                        <div layout="row" flex layout-align="center">
                            <md-radio-button value="1" class="md-primary" ng-disabled="checkMoutKey(2) != null">{{ "FRONT_RIGHT" | translate }} {{ checkMoutKey(2) != null ? ("rffwhid.rffwhid_change_motor_order_fix_motor_direction_wizard.ALREADY_SET_MOTOR"|translate): "" }}</md-radio-button>
                        </div>
                    </div>
                    <div layout="row" flex layout-align="center center">
                        <img src="/app/resources/img/quad_direction.png" class="card-media" width="320" ng-show="RFDump.set.mixer_type == 0">
                        <img src="/app/resources/img/quad_direction1.png" class="card-media" width="320" ng-hide="RFDump.set.mixer_type == 0">
                    </div>
                    <div layout="row" flex>
                        <div layout="row" flex layout-align="center">
                            <md-radio-button value="3" class="md-primary" ng-disabled="checkMoutKey(4) != null">{{ "REAR_LEFT" | translate }} {{ checkMoutKey(4) != null ? ("rffwhid.rffwhid_change_motor_order_fix_motor_direction_wizard.ALREADY_SET_MOTOR"|translate): "" }}</md-radio-button>
                        </div>
                        <div layout="row" flex layout-align="center">
                            <md-radio-button value="2" class="md-primary" ng-disabled="checkMoutKey(3) != null">{{ "REAR_RIGHT" | translate }} {{ checkMoutKey(3) != null ? ("rffwhid.rffwhid_change_motor_order_fix_motor_direction_wizard.ALREADY_SET_MOTOR"|translate): "" }}</md-radio-button>
                        </div>
                    </div>
                </md-radio-group>
            </md-card-content>
            <md-card-actions layout="row" layout-align="end center">
                <md-button class="md-warn" ui-sref="rffwhid.setup" ng-disabled="busy">{{ "CANCEL" | translate }}</md-button>
                <md-button ng-click="back()" ng-disabled="busy">{{ "BACK" | translate }}</md-button>
                <md-button class="md-raised md-primary" ng-click="next()" ng-disabled="busy || !mout">{{ "NEXT" | translate }}</md-button>
            </md-card-actions>
        </md-card>
    </div>
</div>
