{{template "main-top" .}}

<div class="lgn-head">
    <h1>{{t "Registration.Title"}}</h1>
    <p>{{t "Registration.Description"}}</p>
</div>


<form action="{{ registrationUrl }}" method="POST">

    {{ .CSRF }}

    <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />

    <div class="lgn-register">

        <div class="double-col">
            <div class="lgn-field">
                <label class="lgn-label" for="firstname">{{t "Registration.Firstname"}}</label>
                <input class="lgn-input" type="text" id="firstname" name="firstname" autocomplete="given-name"
                    value="{{ .Firstname }}" autofocus required>
            </div>
            <div class="lgn-field">
                <label class="lgn-label" for="lastname">{{t "Registration.Lastname"}}</label>
                <input class="lgn-input" type="text" id="lastname" name="lastname" autocomplete="family-name"
                    value="{{ .Lastname }}" required>
            </div>
        </div>

        <div class="lgn-field double">
            <label class="lgn-label" for="email">{{t "Registration.Email"}}</label>
            <input class="lgn-input" type="text" id="email" name="email" autocomplete="email" value="{{ .Email }}" required>
        </div>

        {{if .ShowUsername}}
        <div class="lgn-field double">
            <label class="lgn-label" for="email">{{t "Registration.Username"}}</label>
            <div class="lgn-suffix-wrapper">
                <input class="lgn-input lgn-suffix-input" type="text" id="username" name="username" autocomplete="email" value="{{ .Email }}" required>
                {{if .DisplayLoginNameSuffix}}
                    <span id="default-login-suffix" lgnsuffix class="loginname-suffix">@{{.PrimaryDomain}}</span>
                {{end}}
            </div>
        </div>
        {{end}}

        <div class="double-col">
            <div class="lgn-field">
                <label class="lgn-label" for="languages">{{t "Registration.Language"}}</label>
                <select id="languages" name="language">
                    <option value=""></option>
                    <option value="de" id="de" {{if (selectedLanguage "de")}} selected {{end}}>{{t "Registration.German"}}
                    </option>
                    <option value="en" id="en" {{if (selectedLanguage "en")}} selected {{end}}>{{t "Registration.English"}}
                    </option>
                </select>
            </div>
            <div class="lgn-field" >
                <label class="lgn-label" for="genders">
                    {{t "Registration.Gender"}}
                    <span class="optional">{{t "optional"}}</span>
                </label>
                <select id="genders" name="gender">
                    <option value=""></option>
                    <option value="1" id="female" {{if (selectedGender 1)}} selected {{end}}>{{t "Registration.Female"}}
                    </option>
                    <option value="2" id="male" {{if (selectedGender 2)}} selected {{end}}>{{t "Registration.Male"}}
                    </option>
                    <option value="3" id="diverse" {{if (selectedGender 3)}} selected {{end}}>{{t "Registration.Diverse"}}
                    </option>
                </select>
            </div>
        </div>

        <div class="double-col">
            <div class="lgn-field">
                <label class="lgn-label" for="register-password">{{t "Registration.Password"}}</label>
                <input data-minlength="{{ .MinLength }}" data-has-uppercase="{{ .HasUppercase }}"
                    data-has-lowercase="{{ .HasLowercase }}" data-has-number="{{ .HasNumber }}"
                    data-has-symbol="{{ .HasSymbol }}" class="lgn-input" type="password" id="register-password"
                    name="register-password" autocomplete="new-password" required>
            </div>
            <div class="lgn-field">
                <label class="lgn-label" for="register-password-confirmation">{{t "Registration.Password2"}}</label>
                <input class="lgn-input" type="password" id="register-password-confirmation"
                    name="register-password-confirmation" autocomplete="new-password" required>
            </div>
        </div>

        <div class="lgn-field">
            {{ .PasswordPolicyDescription }}
        </div>

        <div class="lgn-field">
            <label class="lgn-label">{{t "Registration.TosAndPrivacy"}}</label>
            <div class="lgn-checkbox">
                <input type="checkbox" id="register-term-confirmation"
                    name="register-term-confirmation" required>
                <label for="register-term-confirmation">
                    {{t "Registration.TosConfirm"}}
                    <a class="tos-link" target="_blank" href="{{t "Registration.TosLink"}}" rel="noopener noreferrer">
                        {{t "Registration.TosLinkText"}}
                    </a>
                    {{t "Registration.TosConfirmAnd"}}
                    <a class="tos-link" target="_blank" href="{{t "Registration.PrivacyLink"}}" rel="noopener noreferrer">
                    {{t "Registration.PrivacyLinkText"}}
                    </a>
                </label>
            </div>
        </div>
    </div>

    {{template "error-message" .}}

    <div class="lgn-actions">
        <a class="lgn-stroked-button lgn-primary" href="{{ loginNameChangeUrl .AuthReqID }}">
            {{t "Actions.Back"}}
        </a>
        <span class="fill-space"></span>
        <button class="lgn-raised-button lgn-primary" id="register-button" type="submit">{{t "Actions.Next"}}</button>
    </div>
</form>

<script src="{{ resourceUrl "scripts/input_suffix_offset.js" }}"></script>
<script src="{{ resourceUrl "scripts/form_submit.js" }}"></script>
<script src="{{ resourceUrl "scripts/password_policy_check.js" }}"></script>
<script src="{{ resourceUrl "scripts/register_check.js" }}"></script>

{{template "main-bottom" .}}