<div class="newhome fullwidth join" setup-landing>

    <div class="col-xs-12 col-sm-12 small-bg">

        <brand-header></brand-header>

        <!-- Display of error messages, if any -->
        <div class="row" ng-show="vm.showError">
            <div class="col-sm-12">
                <div class="alert alert-danger text-center">{{vm.errorMessage}}</div>
            </div>
        </div>

        <h1>Register</h1>

<!--
        <div class="whitebox col-xs-12 col-sm-10 col-md-8 col-lg-6 col-sm-offset-1 col-md-offset-2 col-lg-offset-3">
            <div class="row colorDesigners">
-->


                <div class="{{'reg-' + vm.currentQuestion.id}}"
                     ng-class="{'container': !vm.templateShowOnlyQuestions, 'container-fluid':  vm.templateShowOnlyQuestions}">
                    <div class="row">
                        <div class="col-sm-10 col-sm-offset-1"
                             ng-class="{'col-md-8 col-md-offset-2': !vm.templateShowOnlyQuestions }">
                            <!-- Display of loading status - when the application is loading the survey -->
                            <div class="row" ng-show="vm.loadingSurvey && !vm.showError">
                                <div class="col-sm-12 text-center"><i class="fa fa-spinner fa fa-spin fa-4x"></i>
                                    <br>
                                </div>
                            </div>

                            <!-- Dummy Spacing -->
                            <div class="row">
                                <div class="col-sm-12">&nbsp;</div>
                            </div>

                            <!-- Display of loading status - when the application is loading the survey -->
                            <div class="row" ng-show="vm.loadingSurvey && !vm.showError">
                                <div class="col-sm-12 text-center text-muted">Loading registration wizard...</div>
                            </div>

                            <!-- Directives for the questions -->
                            <div class="row no-gutter"
                                 ng-hide="vm.loadingSurvey || vm.showError || vm.showFinalScreen || vm.userIsUnderAge || vm.registrationDisabled">
                                <div ng-switch on="vm.currentQuestion.id" ng-animate="vm.cssAnimation">
                                    <div ng-switch-when="gender">
                                        <gender-selection display-mode="modal" question="vm.currentQuestion"
                                                          next-question="vm.nextQuestion()" previous-question="vm.previousQuestion()"
                                                          is-first-question="vm.isFirstQuestion()" validation-error="vm.validationError"
                                                          validation-error-message="vm.validationErrorMessage"
                                                          get-question-count="vm.getQuestionCount()"
                                                          current-question-number="vm.currentQuestionNumber"></gender-selection>
                                    </div>
                                    <div ng-switch-when="height">
                                        <height-selection display-mode="modal" question="vm.currentQuestion"
                                                          next-question="vm.nextQuestion()" previous-question="vm.previousQuestion()"
                                                          is-first-question="vm.isFirstQuestion()" validation-error="vm.validationError"
                                                          validation-error-message="vm.validationErrorMessage"
                                                          get-question-count="vm.getQuestionCount()"
                                                          current-question-number="vm.currentQuestionNumber"></height-selection>
                                    </div>
                                    <div ng-switch-when="weight">
                                        <weight-selection display-mode="modal" question="vm.currentQuestion"
                                                          next-question="vm.nextQuestion()" previous-question="vm.previousQuestion()"
                                                          is-first-question="vm.isFirstQuestion()" validation-error="vm.validationError"
                                                          validation-error-message="vm.validationErrorMessage"
                                                          get-question-count="vm.getQuestionCount()"
                                                          current-question-number="vm.currentQuestionNumber"></weight-selection>
                                    </div>
                                    <div ng-switch-when="shoeSize">
                                        <shoe-size-selection display-mode="modal" question="vm.currentQuestion"
                                                             next-question="vm.nextQuestion()" previous-question="vm.previousQuestion()"
                                                             is-first-question="vm.isFirstQuestion()"
                                                             validation-error="vm.validationError"
                                                             validation-error-message="vm.validationErrorMessage"
                                                             get-question-count="vm.getQuestionCount()"
                                                             current-question-number="vm.currentQuestionNumber"
                                                             gender-value="vm.user.gender | capitalize"></shoe-size-selection>
                                    </div>
                                    <div ng-switch-when="mobilePhone">
                                        <mobile-number-selection display-mode="modal" question="vm.currentQuestion"
                                                              next-question="vm.nextQuestion()"
                                                              previous-question="vm.previousQuestion()"
                                                              is-first-question="vm.isFirstQuestion()"
                                                              validation-error="vm.validationError"
                                                              validation-error-message="vm.validationErrorMessage"
                                                              get-question-count="vm.getQuestionCount()"
                                                              current-question-number="vm.currentQuestionNumber"
                                                              show-update-button="false">
                                        </mobile-number-selection>
                                    </div>
                                    <div ng-switch-when="childShoeSize">
                                        <child-shoe-size-selection
                                            display-mode="modal"
                                            next-question="vm.nextQuestion()"
                                            previous-question="vm.previousQuestion()"
                                            is-first-question="vm.isFirstQuestion()"
                                            get-question-count="vm.getQuestionCount()"
                                            current-question-number="vm.currentQuestionNumber"
                                            question="vm.currentQuestion"
                                            validation-error="vm.validationError"
                                            validation-error-message="vm.validationErrorMessage"
                                            gender-value="vm.user.gender | capitalize">
                                        </child-shoe-size-selection>
                                    </div>
                                    <div ng-switch-when="shoeSizeV2">
                                        <shoe-size-selection-v2 display-mode="modal" question="vm.currentQuestion"
                                                                next-question="vm.nextQuestion()"
                                                                previous-question="vm.previousQuestion()"
                                                                is-first-question="vm.isFirstQuestion()"
                                                                validation-error="vm.validationError"
                                                                validation-error-message="vm.validationErrorMessage"
                                                                get-question-count="vm.getQuestionCount()"
                                                                current-question-number="vm.currentQuestionNumber"
                                                                gender-value="vm.user.gender | capitalize"></shoe-size-selection-v2>
                                    </div>
                                    <div ng-switch-when="productTypes">
                                        <product-types-selection display-mode="modal" question="vm.currentQuestion"
                                                                 next-question="vm.nextQuestion()"
                                                                 previous-question="vm.previousQuestion()"
                                                                 is-first-question="vm.isFirstQuestion()"
                                                                 validation-error="vm.validationError"
                                                                 validation-error-message="vm.validationErrorMessage"
                                                                 get-question-count="vm.getQuestionCount()"
                                                                 current-question-number="vm.currentQuestionNumber"
                                                                 is-private-brand="vm.isPrivateBrand"></product-types-selection>
                                    </div>
                                    <div ng-switch-when="productTypesBrand">
                                        <product-types-selection display-mode="modal" question="vm.currentQuestion"
                                                                 next-question="vm.nextQuestion()"
                                                                 previous-question="vm.previousQuestion()"
                                                                 is-first-question="vm.isFirstQuestion()"
                                                                 validation-error="vm.validationError"
                                                                 validation-error-message="vm.validationErrorMessage"
                                                                 get-question-count="vm.getQuestionCount()"
                                                                 current-question-number="vm.currentQuestionNumber"
                                                                 is-private-brand="vm.isPrivateBrand"></product-types-selection>
                                    </div>
                                    <div ng-switch-when="footwearActivities">
                                        <activity-selection display-mode="modal" question="vm.currentQuestion"
                                                            next-question="vm.nextQuestion()" previous-question="vm.previousQuestion()"
                                                            is-first-question="vm.isFirstQuestion()"
                                                            validation-error="vm.validationError"
                                                            validation-error-message="vm.validationErrorMessage"
                                                            get-question-count="vm.getQuestionCount()"
                                                            current-question-number="vm.currentQuestionNumber"
                                                            user-type="vm.user.utype"></activity-selection>
                                    </div>
                                    <div ng-switch-when="apparelActivities">
                                        <activity-selection display-mode="modal" question="vm.currentQuestion"
                                                            next-question="vm.nextQuestion()" previous-question="vm.previousQuestion()"
                                                            is-first-question="vm.isFirstQuestion()"
                                                            validation-error="vm.validationError"
                                                            validation-error-message="vm.validationErrorMessage"
                                                            get-question-count="vm.getQuestionCount()"
                                                            current-question-number="vm.currentQuestionNumber"
                                                            user-type="vm.user.utype"></activity-selection>
                                    </div>
                                    <div ng-switch-when="fitPreference">
                                        <fit-preference-selection display-mode="modal" question="vm.currentQuestion"
                                                                  next-question="vm.nextQuestion()"
                                                                  previous-question="vm.previousQuestion()"
                                                                  is-first-question="vm.isFirstQuestion()"
                                                                  validation-error="vm.validationError"
                                                                  validation-error-message="vm.validationErrorMessage"
                                                                  get-question-count="vm.getQuestionCount()"
                                                                  current-question-number="vm.currentQuestionNumber"
                                                                  gender-value="vm.user.gender | capitalize"></fit-preference-selection>
                                    </div>
                                    <div ng-switch-when="shirtSize">
                                        <shirt-selection display-mode="modal" question="vm.currentQuestion"
                                                         next-question="vm.nextQuestion()" previous-question="vm.previousQuestion()"
                                                         is-first-question="vm.isFirstQuestion()" validation-error="vm.validationError"
                                                         validation-error-message="vm.validationErrorMessage"
                                                         get-question-count="vm.getQuestionCount()"
                                                         current-question-number="vm.currentQuestionNumber"
                                                         gender-value="vm.user.gender"></shirt-selection>
                                    </div>
                                    <div ng-switch-when="clothingSize">
                                        <clothing-size display-mode="modal" question="vm.currentQuestion"
                                                       next-question="vm.nextQuestion()" previous-question="vm.previousQuestion()"
                                                       is-first-question="vm.isFirstQuestion()" validation-error="vm.validationError"
                                                       validation-error-message="vm.validationErrorMessage"
                                                       get-question-count="vm.getQuestionCount()"
                                                       current-question-number="vm.currentQuestionNumber"></clothing-size>
                                    </div>
                                    <div ng-switch-when="pants">
                                        <pant-selection display-mode="modal" question="vm.currentQuestion"
                                                        next-question="vm.nextQuestion()" previous-question="vm.previousQuestion()"
                                                        is-first-question="vm.isFirstQuestion()" validation-error="vm.validationError"
                                                        validation-error-message="vm.validationErrorMessage"
                                                        get-question-count="vm.getQuestionCount()"
                                                        current-question-number="vm.currentQuestionNumber"></pant-selection>
                                    </div>
                                    <div ng-switch-when="pantSize">
                                        <pant-size-selection display-mode="modal" question="vm.currentQuestion"
                                                             next-question="vm.nextQuestion()" previous-question="vm.previousQuestion()"
                                                             is-first-question="vm.isFirstQuestion()"
                                                             validation-error="vm.validationError"
                                                             validation-error-message="vm.validationErrorMessage"
                                                             get-question-count="vm.getQuestionCount()"
                                                             current-question-number="vm.currentQuestionNumber"></pant-size-selection>
                                    </div>
                                    <div ng-switch-when="shortsSize">
                                        <shorts-size-selection display-mode="modal" question="vm.currentQuestion"
                                                               next-question="vm.nextQuestion()"
                                                               previous-question="vm.previousQuestion()"
                                                               is-first-question="vm.isFirstQuestion()"
                                                               validation-error="vm.validationError"
                                                               validation-error-message="vm.validationErrorMessage"
                                                               get-question-count="vm.getQuestionCount()"
                                                               current-question-number="vm.currentQuestionNumber"></shorts-size-selection>
                                    </div>
                                    <div ng-switch-when="dateOfBirth">
                                        <dob-selection display-mode="modal" question="vm.currentQuestion"
                                                       next-question="vm.nextQuestion()" previous-question="vm.previousQuestion()"
                                                       is-first-question="vm.isFirstQuestion()" validation-error="vm.validationError"
                                                       validation-error-message="vm.validationErrorMessage"
                                                       get-question-count="vm.getQuestionCount()"
                                                       current-question-number="vm.currentQuestionNumber"></dob-selection>
                                    </div>
                                    <div ng-switch-when="dateOfBirthYoung">
                                        <dob-young
                                            display-mode="modal"
                                            question="vm.currentQuestion"
                                            next-question="vm.nextQuestion()"
                                            previous-question="vm.previousQuestion()"
                                            is-first-question="vm.isFirstQuestion()"
                                            validation-error="vm.validationError"
                                            validation-error-message="vm.validationErrorMessage"
                                            get-question-count="vm.getQuestionCount()"
                                            current-question-number="vm.currentQuestionNumber">
                                        </dob-young>
                                    </div>
                                    <div ng-switch-when="ageCheckpoint">
                                        <age-checkpoint display-mode="modal" question="vm.currentQuestion"
                                                        next-question="vm.nextQuestion()" previous-question="vm.previousQuestion()"
                                                        is-first-question="vm.isFirstQuestion()" validation-error="vm.validationError"
                                                        validation-error-message="vm.validationErrorMessage"
                                                        get-question-count="vm.getQuestionCount()"
                                                        current-question-number="vm.currentQuestionNumber"></age-checkpoint>
                                    </div>
                                    <div ng-switch-when="checkpoint">
                                        <checkpoint display-mode="modal" question="vm.currentQuestion" next-question="vm.nextQuestion()"
                                                    previous-question="vm.previousQuestion()" is-first-question="vm.isFirstQuestion()"
                                                    validation-error="vm.validationError"
                                                    validation-error-message="vm.validationErrorMessage"
                                                    get-question-count="vm.getQuestionCount()"
                                                    current-question-number="vm.currentQuestionNumber"></checkpoint>
                                    </div>
                                    <div ng-switch-when="reg-a5-username-v1">
                                        <username-selection display-mode="modal" question="vm.currentQuestion"
                                                            next-question="vm.nextQuestion()" previous-question="vm.previousQuestion()"
                                                            is-first-question="vm.isFirstQuestion()"
                                                            validation-error="vm.validationError"
                                                            validation-error-message="vm.validationErrorMessage"
                                                            get-question-count="vm.getQuestionCount()"
                                                            current-question-number="vm.currentQuestionNumber"></username-selection>
                                    </div>
                                    <div ng-switch-when="reg-a6-password-v1">
                                        <password-selection display-mode="modal" question="vm.currentQuestion"
                                                            next-question="vm.nextQuestion()" previous-question="vm.previousQuestion()"
                                                            is-first-question="vm.isFirstQuestion()"
                                                            validation-error="vm.validationError"
                                                            validation-error-message="vm.validationErrorMessage"
                                                            get-question-count="vm.getQuestionCount()"
                                                            current-question-number="vm.currentQuestionNumber"></password-selection>
                                    </div>
                                    <div ng-switch-when="personal">
                                        <personal-selection display-mode="modal" question="vm.currentQuestion"
                                                            next-question="vm.nextQuestion()" previous-question="vm.previousQuestion()"
                                                            is-first-question="vm.isFirstQuestion()"
                                                            validation-error="vm.validationError"
                                                            validation-error-message="vm.validationErrorMessage"
                                                            get-question-count="vm.getQuestionCount()"
                                                            current-question-number="vm.currentQuestionNumber"></personal-selection>
                                    </div>
                                    <div ng-switch-when="fullName">
                                        <full-name-selection display-mode="modal" question="vm.currentQuestion"
                                                             next-question="vm.nextQuestion()" previous-question="vm.previousQuestion()"
                                                             is-first-question="vm.isFirstQuestion()"
                                                             validation-error="vm.validationError"
                                                             validation-error-message="vm.validationErrorMessage"
                                                             get-question-count="vm.getQuestionCount()"
                                                             current-question-number="vm.currentQuestionNumber"></full-name-selection>
                                    </div>
                                    <div ng-switch-when="nameEmailPassword">
                                        <name-email-password-selection display-mode="modal" question="vm.currentQuestion"
                                                                       next-question="vm.nextQuestion()"
                                                                       previous-question="vm.previousQuestion()"
                                                                       is-first-question="vm.isFirstQuestion()"
                                                                       validation-error="vm.validationError"
                                                                       validation-error-message="vm.validationErrorMessage"
                                                                       get-question-count="vm.getQuestionCount()"
                                                                       current-question-number="vm.currentQuestionNumber"></name-email-password-selection>
                                    </div>
                                    <div ng-switch-when="recieveNotifType">
                                        <notification-selection display-mode="modal" question="vm.currentQuestion"
                                                                next-question="vm.nextQuestion()"
                                                                previous-question="vm.previousQuestion()"
                                                                is-first-question="vm.isFirstQuestion()"
                                                                validation-error="vm.validationError"
                                                                validation-error-message="vm.validationErrorMessage"
                                                                get-question-count="vm.getQuestionCount()"
                                                                current-question-number="vm.currentQuestionNumber"></notification-selection>
                                    </div>
                                    <div ng-switch-when="address">
                                        <address-selection display-mode="modal" question="vm.currentQuestion"
                                                           next-question="vm.nextQuestion()" previous-question="vm.previousQuestion()"
                                                           is-first-question="vm.isFirstQuestion()"
                                                           validation-error="vm.validationError"
                                                           validation-error-message="vm.validationErrorMessage"
                                                           get-question-count="vm.getQuestionCount()"
                                                           current-question-number="vm.currentQuestionNumber"></address-selection>
                                    </div>
                                    <div ng-switch-when="braSize">
                                        <bra-size-selection display-mode="modal" question="vm.currentQuestion"
                                                            next-question="vm.nextQuestion()" previous-question="vm.previousQuestion()"
                                                            is-first-question="vm.isFirstQuestion()"
                                                            validation-error="vm.validationError"
                                                            validation-error-message="vm.validationErrorMessage"
                                                            get-question-count="vm.getQuestionCount()"
                                                            current-question-number="vm.currentQuestionNumber"></bra-size-selection>
                                    </div>
                                    <div ng-switch-when="activities">
                                        <activity-selection display-mode="modal" question="vm.currentQuestion"
                                                            next-question="vm.nextQuestion()" previous-question="vm.previousQuestion()"
                                                            is-first-question="vm.isFirstQuestion()"
                                                            validation-error="vm.validationError"
                                                            validation-error-message="vm.validationErrorMessage"
                                                            get-question-count="vm.getQuestionCount()"
                                                            current-question-number="vm.currentQuestionNumber"
                                                            user-type="vm.user.utype"></activity-selection>
                                    </div>
                                    <div ng-switch-when="winterActivities">
                                        <activity-selection display-mode="modal" question="vm.currentQuestion"
                                                            next-question="vm.nextQuestion()" previous-question="vm.previousQuestion()"
                                                            is-first-question="vm.isFirstQuestion()"
                                                            validation-error="vm.validationError"
                                                            validation-error-message="vm.validationErrorMessage"
                                                            get-question-count="vm.getQuestionCount()"
                                                            current-question-number="vm.currentQuestionNumber"></activity-selection>
                                    </div>
                                    <div ng-switch-when="summerActivities">
                                        <activity-selection display-mode="modal" question="vm.currentQuestion"
                                                            next-question="vm.nextQuestion()" previous-question="vm.previousQuestion()"
                                                            is-first-question="vm.isFirstQuestion()"
                                                            validation-error="vm.validationError"
                                                            validation-error-message="vm.validationErrorMessage"
                                                            get-question-count="vm.getQuestionCount()"
                                                            current-question-number="vm.currentQuestionNumber"></activity-selection>
                                    </div>
                                    <div ng-switch-when="isEmployee">
                                        <is-employee-selection display-mode="modal" question="vm.currentQuestion"
                                                               next-question="vm.nextQuestion()"
                                                               previous-question="vm.previousQuestion()"
                                                               is-first-question="vm.isFirstQuestion()"
                                                               validation-error="vm.validationError"
                                                               validation-error-message="vm.validationErrorMessage"
                                                               get-question-count="vm.getQuestionCount()"
                                                               current-question-number="vm.currentQuestionNumber"></is-employee-selection>
                                    </div>
                                    <div ng-switch-when="currTestingForOtherBrands">
                                        <testing-other-brand display-mode="modal" question="vm.currentQuestion"
                                                             next-question="vm.nextQuestion()" previous-question="vm.previousQuestion()"
                                                             is-first-question="vm.isFirstQuestion()"
                                                             validation-error="vm.validationError"
                                                             validation-error-message="vm.validationErrorMessage"
                                                             get-question-count="vm.getQuestionCount()"
                                                             current-question-number="vm.currentQuestionNumber"></testing-other-brand>
                                    </div>
                                    <div ng-switch-when="availableForTravel">
                                        <available-for-travel display-mode="modal" question="vm.currentQuestion"
                                                              next-question="vm.nextQuestion()"
                                                              previous-question="vm.previousQuestion()"
                                                              is-first-question="vm.isFirstQuestion()"
                                                              validation-error="vm.validationError"
                                                              validation-error-message="vm.validationErrorMessage"
                                                              get-question-count="vm.getQuestionCount()"
                                                              current-question-number="vm.currentQuestionNumber"></available-for-travel>
                                    </div>
                                    <div ng-switch-when="heardAboutUsFrom">
                                        <heard-about-us-from display-mode="modal" question="vm.currentQuestion"
                                                             next-question="vm.nextQuestion()" previous-question="vm.previousQuestion()"
                                                             is-first-question="vm.isFirstQuestion()"
                                                             validation-error="vm.validationError"
                                                             validation-error-message="vm.validationErrorMessage"
                                                             get-question-count="vm.getQuestionCount()"
                                                             current-question-number="vm.currentQuestionNumber"></heard-about-us-from>
                                    </div>
                                    <div ng-switch-when="loginInfo">
                                        <username-password-selection display-mode="modal" question="vm.currentQuestion"
                                                                     next-question="vm.nextQuestion()"
                                                                     previous-question="vm.previousQuestion()"
                                                                     is-first-question="vm.isFirstQuestion()"
                                                                     validation-error="vm.validationError"
                                                                     validation-error-message="vm.validationErrorMessage"
                                                                     get-question-count="vm.getQuestionCount()"
                                                                     current-question-number="vm.currentQuestionNumber">
                                        </username-password-selection>
                                    </div>
                                    <div ng-switch-when="utype">
                                        <user-type-selection
                                            question="vm.currentQuestion"
                                            next-question="vm.nextQuestion()"
                                            previous-question="vm.previousQuestion()"
                                            is-first-question="vm.isFirstQuestion()"
                                            validation-error="vm.validationError"
                                            validation-error-message="vm.validationErrorMessage"
                                            get-question-count="vm.getQuestionCount()"
                                            current-question-number="vm.currentQuestionNumber"
                                            display-mode="modal">
                                        </user-type-selection>
                                    </div>
                                    <div ng-switch-when="brandAssociation">
                                        <brand-association-selection display-mode="modal" question="vm.currentQuestion"
                                                                     next-question="vm.nextQuestion()"
                                                                     previous-question="vm.previousQuestion()"
                                                                     is-first-question="vm.isFirstQuestion()"
                                                                     validation-error="vm.validationError"
                                                                     validation-error-message="vm.validationErrorMessage"
                                                                     get-question-count="vm.getQuestionCount()"
                                                                     current-question-number="vm.currentQuestionNumber">
                                        </brand-association-selection>
                                    </div>
                                    <div ng-switch-when="jacketSize">
                                        <jacket-selection display-mode="modal" question="vm.currentQuestion"
                                                          next-question="vm.nextQuestion()" previous-question="vm.previousQuestion()"
                                                          is-first-question="vm.isFirstQuestion()" validation-error="vm.validationError"
                                                          validation-error-message="vm.validationErrorMessage"
                                                          get-question-count="vm.getQuestionCount()"
                                                          current-question-number="vm.currentQuestionNumber" show-update-button="false">
                                        </jacket-selection>
                                    </div>
                                    <div ng-switch-when="gloveSize">
                                        <glove-selection display-mode="modal" question="vm.currentQuestion"
                                                         next-question="vm.nextQuestion()" previous-question="vm.previousQuestion()"
                                                         is-first-question="vm.isFirstQuestion()" validation-error="vm.validationError"
                                                         validation-error-message="vm.validationErrorMessage"
                                                         get-question-count="vm.getQuestionCount()"
                                                         current-question-number="vm.currentQuestionNumber"></glove-selection>
                                    </div>
                                    <div data-ng-switch-when="TOC">
                                        <rule-display display-mode="modal" question="vm.currentQuestion"
                                                      next-question="vm.nextQuestion()" previous-question="vm.previousQuestion()"
                                                      is-first-question="vm.isFirstQuestion()" validation-error="vm.validationError"
                                                      validation-error-message="vm.validationErrorMessage"
                                                      get-question-count="vm.getQuestionCount()"
                                                      current-question-number="vm.currentQuestionNumber">
                                        </rule-display>
                                    </div>
                                    <div data-ng-switch-when="adobeSign">
                                        <adobe-sign display-mode="modal" question="vm.currentQuestion"
                                                    next-question="vm.nextQuestion()" previous-question="vm.previousQuestion()"
                                                    is-first-question="vm.isFirstQuestion()" validation-error="vm.validationError"
                                                    validation-error-message="vm.validationErrorMessage"
                                                    get-question-count="vm.getQuestionCount()"
                                                    current-question-number="vm.currentQuestionNumber">
                                        </adobe-sign>
                                    </div>
                                    <div data-ng-switch-when="misc">
                                        <misc-questions display-mode="modal" question="vm.currentQuestion"
                                                        next-question="vm.nextQuestion()" previous-question="vm.previousQuestion()"
                                                        is-first-question="vm.isFirstQuestion()" validation-error="vm.validationError"
                                                        validation-error-message="vm.validationErrorMessage"
                                                        get-question-count="vm.getQuestionCount()"
                                                        current-question-number="vm.currentQuestionNumber">
                                        </misc-questions>
                                    </div>
                                    <div ng-switch-when="profession">
                                        <profession-selection display-mode="modal" question="vm.currentQuestion"
                                                              next-question="vm.nextQuestion()"
                                                              previous-question="vm.previousQuestion()"
                                                              is-first-question="vm.isFirstQuestion()"
                                                              validation-error="vm.validationError"
                                                              validation-error-message="vm.validationErrorMessage"
                                                              get-question-count="vm.getQuestionCount()"
                                                              current-question-number="vm.currentQuestionNumber"
                                                              show-update-button="false">
                                        </profession-selection>
                                    </div>
                                    <div ng-switch-when="bodyMeasurements">
                                        <body-measurements-selection display-mode="modal" question="vm.currentQuestion"
                                                                     next-question="vm.nextQuestion()"
                                                                     previous-question="vm.previousQuestion()"
                                                                     is-first-question="vm.isFirstQuestion()"
                                                                     validation-error="vm.validationError"
                                                                     validation-error-message="vm.validationErrorMessage"
                                                                     get-question-count="vm.getQuestionCount()"
                                                                     current-question-number="vm.currentQuestionNumber"
                                                                     show-update-button="false">
                                        </body-measurements-selection>
                                    </div>
                                    <div ng-switch-when="profileSetup">
                                        <profile-setup-selection display-mode="modal" question="vm.currentQuestion"
                                                                 next-question="vm.nextQuestion()"
                                                                 previous-question="vm.previousQuestion()"
                                                                 is-first-question="vm.isFirstQuestion()"
                                                                 validation-error="vm.validationError"
                                                                 validation-error-message="vm.validationErrorMessage"
                                                                 get-question-count="vm.getQuestionCount()"
                                                                 current-question-number="vm.currentQuestionNumber"
                                                                 show-update-button="false">
                                        </profile-setup-selection>
                                    </div>
                                    <div ng-switch-when="heightWeight">
                                        <height-weight-selection display-mode="modal" question="vm.currentQuestion"
                                                                 next-question="vm.nextQuestion()"
                                                                 previous-question="vm.previousQuestion()"
                                                                 is-first-question="vm.isFirstQuestion()"
                                                                 validation-error="vm.validationError"
                                                                 validation-error-message="vm.validationErrorMessage"
                                                                 get-question-count="vm.getQuestionCount()"
                                                                 current-question-number="vm.currentQuestionNumber"
                                                                 show-update-button="false">
                                        </height-weight-selection>
                                    </div>
                                    <div ng-switch-when="pantBottomSize">
                                        <pant-bottom-selection display-mode="modal" question="vm.currentQuestion"
                                                               next-question="vm.nextQuestion()"
                                                               previous-question="vm.previousQuestion()"
                                                               is-first-question="vm.isFirstQuestion()"
                                                               validation-error="vm.validationError"
                                                               validation-error-message="vm.validationErrorMessage"
                                                               get-question-count="vm.getQuestionCount()"
                                                               current-question-number="vm.currentQuestionNumber"
                                                               show-update-button="false" gender-value="vm.user.gender">
                                        </pant-bottom-selection>
                                    </div>
                                    <div ng-switch-when="confirmation">
                                        <confirmation display-mode="modal" question="vm.currentQuestion"
                                                      next-question="vm.nextQuestion()" previous-question="vm.previousQuestion()"
                                                      is-first-question="vm.isFirstQuestion()" validation-error="vm.validationError"
                                                      validation-error-message="vm.validationErrorMessage"
                                                      get-question-count="vm.getQuestionCount()"
                                                      current-question-number="vm.currentQuestionNumber" show-update-button="false"
                                                      gender-value="vm.user.gender">
                                        </confirmation>
                                    </div>

                                    <div ng-switch-when="parentChild">
                                        <parent-child display-mode="modal"
                                                      question="vm.currentQuestion"
                                                      next-question="vm.nextQuestion()"
                                                      previous-question="vm.previousQuestion()"
                                                      is-first-question="vm.isFirstQuestion()"
                                                      validation-error="vm.validationError"
                                                      validation-error-message="vm.validationErrorMessage"
                                                      get-question-count="vm.getQuestionCount()"
                                                      current-question-number="vm.currentQuestionNumber"
                                                      show-update-button="false"
                                                      gender-value="vm.user.gender">
                                        </parent-child>
                                    </div>
                                </div>
                            </div>

                            <!-- Shown after registration process is completed -->
                            <div id="content" ng-show="vm.showFinalScreen">
                                <section class="fullwidth">
                                    <div id="registration-complete" class="text-center"
                                         ng-include="vm.registrationPageUrl">
                                    </div>
                                </section>
                            </div>

                            <!-- Shown when the user is under age -->
                            <div id="content" ng-show="vm.userIsUnderAge">
                                <section class="fullwidth">
                                    <div class="text-center">
                                        <h3 class="text-danger">
                                            Sorry, we do not allow children under the age of {{vm.underAge}} to register
                                        </h3>
                                    </div>
                                </section>
                            </div>

                            <!-- Shown when registration disabled by brand (private label) -->
                            <div id="content" ng-if="vm.registrationDisabled">
                                <section class="">
                                    <div id="registration-complete" class="text-center"
                                         ng-include="'../../brand/views/registration-disabled.html'">
                                    </div>
                                </section>
                            </div>

                            <!-- Dummy Spacing -->
                            <div class="row" ng-hide="vm.showFinalScreen || vm.userIsUnderAge">
                                <div class="col-sm-12">&nbsp;</div>
                            </div>

                            <!-- Dummy Spacing -->
                            <div class="row" ng-hide="vm.showFinalScreen || vm.userIsUnderAge">
                                <div class="col-sm-12">&nbsp;</div>
                            </div>
                        </div>
                    </div>
                </div>


<!--            </div> --><!-- /.row -->
<!--        </div> --><!-- /.whitebox -->

        <div data-ng-include="'/brand/views/page-footer.html'"></div>

    </div><!-- /.col-xs-12 -->
</div><!-- /.newhome.fullwidth.join -->

<!-- main footer -->
<!--
<page-footer class="hidden-xs" ng-if="!vm.templateShowOnlyQuestions">
</page-footer>
-->