<h3 translate>Enroll a new token</h3>

<!-- hide the form, after the token was enrolled -->
<div ng-hide="enrolledToken">
    <!-- Configurable prolog -->
    <div ng-if="$state.includes('token.wizard')"
         ng-include="instanceUrl+'/'+piCustomization+
         '/views/includes/token.enroll.pre.top.html'"></div>

    <form name="formEnrollToken" role="form" validate>

        <select class="form-control"
                ng-hide="$state.includes('token.wizard')"
                id="tokentype"
                ng-change="changeTokenType()"
                ng-model="form.type"
                ng-options="type as desc for (type, desc) in formInit.tokenTypes"
                >
        </select>
        <!-- This is the token data section. It differs for every token type-->
        <ng-include src="instanceUrl +
        '/static/components/token/views/token.enroll.'
         + form.type + '.html'">
        </ng-include>

        <!-- User Assignment -->
        <div ng-show="loggedInUser.role == 'admin'">
            <h4 translate>Assign token to user</h4>

            <div assign-user new-user-object="newUser" realms="realms"
                 default-realm="defaultRealm"></div>

            <div class="msg-block"
                 ng-show="formEnrollToken.otppin2.$error.passwordVerify">
                <span class="msg-error" translate>OTP PINs do not match!</span>
            </div>
        </div>
        <!-- Token PIN -->
        <div class="form-group"
             ng-show="loggedInUser.role == 'user' && !hidePin &&
                    !$state.includes('token.wizard') &&
                    checkRight('enrollpin')">
            <label for="otppin" translate>PIN</label>
            <input name="otppin" ng-model="newUser.pin"
                   type=password class="form-control"
                   equals="{{ pin2 }}"
                   placeholder="{{ 'Type a password'|translate }}">
            <input name="otppin2" ng-model="pin2"
                   type=password class="form-control"
                   equals="{{ newUser.pin }}"
                   placeholder="{{ 'Repeat password'|translate }}">
        </div>

        <!-- Extended attributes -->
        <accordion ng-hide="$state.includes('token.wizard') ||
                        loggedInUser.role=='user'">
            <accordion-group heading="{{ 'Extended Attributes'|translate }}">
                <div class="form-group col-sm-6">
                    <label for="validity_start"
                           translate>Validity Start
                    </label>
                    <p class="input-group col-sm-12">
                            <input type="text" class="form-control"
                                   name="validity_start"
                                   datepicker-popup="yyyy-MM-ddTHH:mmZ"
                                   ng-model="form.validity_period_start"
                                   is-open="startOpened"
                                   min-date="today"
                                   show-button-bar="false"
                                   close-text="Close"/>
                          <span class="input-group-btn">
                            <button type="button" class="btn btn-default"
                                    ng-click="startOpened = openDate($event)">
                                <i class="glyphicon glyphicon-calendar"></i>
                            </button>
                          </span>
                    </p>
                </div>
                <div class="form-group col-sm-6">
                    <label for="validity_end"
                           translate>Validity End
                    </label>
                    <p class="input-group col-sm-12">
                            <input type="text" class="form-control"
                                   name="validity_end"
                                   datepicker-popup="yyyy-MM-ddTHH:mmZ"
                                   ng-model="form.validity_period_end"
                                   is-open="endOpened"
                                   show-button-bar="false"
                                   min-date="today"
                                   close-text="Close"/>
                          <span class="input-group-btn">
                            <button type="button" class="btn btn-default"
                                    ng-click="endOpened = openDate($event)"><i
                                    class="glyphicon glyphicon-calendar"></i>
                            </button>
                          </span>
                    </p>
                </div>
                <p class="help" translate>
                    The start time and the end time of the validity period
                    should be entered in the format
                    <em>YYYY-MM-DDThh:mm+oooo</em>.
                </p>
            </accordion-group>
        </accordion>

        <div class="text-center">
            <button type="button" ng-click="enrollToken()"
                    ng-disabled="formEnrollToken.$invalid"
                    class="btn btn-primary" translate>Enroll Token
            </button>
        </div>
    </form>

    <!-- Configurable epilog -->
    <div ng-if="$state.includes('token.wizard')"
         ng-include="instanceUrl+'/'+piCustomization+
         '/views/includes/token.enroll.pre.bottom.html'"></div>

</div>

<!-- Show this information after the token was enrolled -->
<div ng-show="enrolledToken">
    <p>
        <span ng-show="newUser.user && loggedInUser.role == 'admin'" translate>
            The token was successfully enrolled with serial number
            <a ui-sref="token.details({tokenSerial:enrolledToken.serial})">
                {{ enrolledToken.serial }}</a>
            for user
            <a ui-sref="user.details({username:newUser.user, realmname:newUser.realm})"
                    >{{ newUser.user }}</a> in realm
            {{ newUser.realm }}.
        </span>
        <span ng-show="!newUser.user || loggedInUser.role != 'admin'" translate
              ng-hide="$state.includes('token.wizard')">
            The token was successfully enrolled with serial number
            <a ui-sref="token.details({tokenSerial:enrolledToken.serial})">
                {{ enrolledToken.serial }}</a>.
        </span>
    </p>

    <div ng-if="$state.includes('token.wizard')"
         ng-include="instanceUrl+'/'+piCustomization+
         '/views/includes/token.enroll.post.top.html'"></div>

    <!-- This is the token data section. It differs for every token type-->
    <ng-include src="instanceUrl +
    '/static/components/token/views/token.enrolled.' + form.type + '.html'">
    </ng-include>

    <div ng-if="$state.includes('token.wizard')"
         ng-include="instanceUrl+'/'+piCustomization+
         '/views/includes/token.enroll.post.bottom.html'"></div>

    <div class="text-center" ng-hide="click_wait">
        <button ng-click="enrolledToken = null;"
                ng-hide="$state.includes('token.wizard')"
                class="btn btn-primary" translate>Enroll a new token
        </button>
        <button ng-click="logout()"
                ng-show="$state.includes('token.wizard')"
                class="btn btn-primary" translate>Logout
        </button>
    </div>
</div>
