<div layout="column" layout-align="center center" class="interview-wizard-page">
    <div layout="column">
        <img src="/app/resources/img/flightOneLogo.svg" height="80" layout-align="center center" flex>
        <md-card flex>
            <md-card-title>
                <md-card-title-text layout-align="center center">
                    <span class="md-display-2">{{ "choose_vtx_interview_wizard.CHOOSE_VTX_TITLE" | translate }}</span>
                </md-card-title-text>
                <md-card-title-media>
                    <div class="md-media-sm"></div>
                </md-card-title-media>
            </md-card-title>
            <md-card-content>
                <md-radio-group ng-model="vtxType" layout="column" class="vtx-radio-buttons">
                    <div layout="row" flex>
                        <div layout="row" flex>
                            <md-radio-button ng-value="'tbs_unify_pro'" aria-label="tbs_unify_pro">
                                <img src="/app/resources/img/interview_wizard/TBS_UNIFY_PRO_5G8_V2.jpg" class="img-responsive">
                                <p class="text-center">TBS UNIFY PRO 5G8 V2</p>
                            </md-radio-button>
                        </div>
                        <div layout="row" flex>
                            <md-radio-button ng-value="'tramp_hv'" aria-label="tramp_hv">
                                <img src="/app/resources/img/interview_wizard/Tramp_HV_5.8GHz.jpg" class="img-responsive">
                                <p class="text-center">Tramp HV 5.8GHz</p>
                            </md-radio-button>
                        </div>
                        <div layout="row" flex>
                            <md-radio-button ng-value="'other'" aria-label="other">
                                <img src="/app/resources/img/interview_wizard/OtherVTX.jpg" class="img-responsive">
                                <p class="text-center">Other</p>
                            </md-radio-button>
                        </div>
                    </div>
                </md-radio-group>
                <div layout="column" ng-show="vtxType == 'tramp_hv'">
                    <div layout="row" flex>
                        <h2 class="md-title">USART TX pin on:</h2>
                    </div>
                    <div layout="row" flex>
                        <md-radio-group ng-model="trampPin">
                            <md-radio-button value="1">1</md-radio-button>
                            <md-radio-button value="2">2</md-radio-button>
                            <md-radio-button value="3">3</md-radio-button>
                            <md-radio-button value="4">4</md-radio-button>
                            <md-radio-button value="5">5</md-radio-button>
                            <md-radio-button value="6">6</md-radio-button>
                        </md-radio-group>
                    </div>
                </div>
            </md-card-content>
            <md-card-actions layout="row" layout-align="end center">
                <md-button ui-sref="rffwhid.setup" ng-disabled="busy">{{ "CANCEL" | translate }}</md-button>
                <md-button ui-sref="choose_receiver_interview_wizard" ng-disabled="busy">{{ "BACK" | translate }}</md-button>
                <md-button class="md-raised md-primary" ng-click="next()" ng-disabled="busy || !vtxType || (vtxType == 'tramp_hv' && !trampPin)">{{ "NEXT" | translate }}</md-button>
            </md-card-actions>
        </md-card>
    </div>
</div>