{{template "main-top" .}}

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

</div>


<form action="{{ externalNotFoundOptionUrl "none" }}" method="POST">

    {{ .CSRF }}

    <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
    <input type="hidden" id="external-idp-config-id" name="external-idp-config-id" value="{{ .ExternalIDPID }}" />
    <input type="hidden" id="external-idp-ext-user-id" name="external-idp-ext-user-id" value="{{ .ExternalIDPUserID }}" />
    <input type="hidden" id="external-idp-display-name" name="external-idp-display-name" value="{{ .ExternalIDPUserDisplayName }}" />
    <input type="hidden" id="external-email" name="external-email" value="{{ .ExternalEmail }}" />
    <input type="hidden" id="external-email-verified" name="external-email-verified" value="{{ .ExternalEmailVerified }}" />
    <input type="hidden" id="external-phone" name="external-phone" value="{{ .ExternalPhone }}" />
    <input type="hidden" id="external-phone-verified" name="external-phone-verified" value="{{ .ExternalPhoneVerified }}" />

    <div class="lgn-register">
        <div class="double-col">
            <div class="lgn-field">
                <label class="lgn-label" for="firstname">{{t "ExternalRegistrationUserOverview.FirstnameLabel"}}</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 "ExternalRegistrationUserOverview.LastnameLabel"}}</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="username">{{t "ExternalRegistrationUserOverview.UsernameLabel"}}</label>
            <div class="lgn-suffix-wrapper">
                <input class="lgn-input lgn-suffix-input" type="text" id="username" name="username"
                       value="{{ .Username }}" required>
                {{if .ShowUsernameSuffix}}
                <span id="default-login-suffix" lgnsuffix class="loginname-suffix">@{{.PrimaryDomain}}</span>
                {{end}}
            </div>
        </div>

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

        <div class="lgn-field double">
            <label class="lgn-label" for="phone">{{t "ExternalRegistrationUserOverview.PhoneLabel"}}</label>
            <input class="lgn-input" type="text" id="phone" name="phone" autocomplete="tel" value="{{ .Phone }}">
        </div>

        <div class="double-col">
            <div class="lgn-field">
                <label class="lgn-label" for="languages">{{t "ExternalRegistrationUserOverview.LanguageLabel"}}</label>
                <select id="languages" name="language">
                    <option value=""></option>
                    <option value="de" id="de" {{if (selectedLanguage "de")}} selected {{end}}>{{t "ExternalNotFound.German"}}
                    </option>
                    <option value="en" id="en" {{if (selectedLanguage "en")}} selected {{end}}>{{t "ExternalNotFound.English"}}
                    </option>
                    <option value="es" id="es" {{if (selectedLanguage "es")}} selected {{end}}>{{t "ExternalNotFound.Spanish"}}
                    </option>
                    <option value="fr" id="fr" {{if (selectedLanguage "fr")}} selected {{end}}>{{t "ExternalNotFound.French"}}
                    </option>
                    <option value="it" id="it" {{if (selectedLanguage "it")}} selected {{end}}>{{t "ExternalNotFound.Italian"}}
                    </option>
                    <option value="ja" id="ja" {{if (selectedLanguage "ja")}} selected {{end}}>{{t "ExternalNotFound.Japanese"}}
                    </option>
                    <option value="pl" id="pl" {{if (selectedLanguage "pl")}} selected {{end}}>{{t "ExternalNotFound.Polish"}}
                    </option>
                    <option value="zh" id="zh" {{if (selectedLanguage "zh")}} selected {{end}}>{{t "ExternalNotFound.Chinese"}}
                    </option>
                    <option value="bg" id="bg" {{if (selectedLanguage "bg")}} selected {{end}}>{{t "ExternalNotFound.Bulgarian"}}
                    </option>
                    <option value="mk" id="mk" {{if (selectedLanguage "mk")}} selected {{end}}>{{t "ExternalNotFound.Macedonian"}}
                    </option>
                </select>
            </div>
        </div>

        {{ if or .TOSLink .PrivacyLink }}
        <div class="lgn-field">
            <label class="lgn-label">{{t "ExternalNotFound.TosAndPrivacyLabel"}}</label>
            {{ if .TOSLink }}
            <div class="lgn-checkbox">
                <input type="checkbox" id="terms-confirm"
                       name="terms-confirm" required>
                <label for="terms-confirm">
                    {{t "ExternalNotFound.TosConfirm"}}
                    <a class="tos-link" target="_blank" href="{{ .TOSLink }}" rel="noopener noreferrer">
                        {{t "ExternalNotFound.TosLinkText"}}
                    </a>
                </label>
            </div>
            {{end}}
            {{ if and .TOSLink .PrivacyLink }}
            <br />
            {{end}}
            {{ if .PrivacyLink }}
            <div class="lgn-checkbox">
                <input type="checkbox" id="terms-confirm-privacy"
                       name="terms-confirm-privacy" required>
                <label for="terms-confirm-privacy">
                    {{t "ExternalNotFound.PrivacyConfirm"}}
                    <a class="tos-link" target="_blank" href="{{ .PrivacyLink}}" rel="noopener noreferrer">
                        {{t "ExternalNotFound.PrivacyLinkText"}}
                    </a>
                </label>
            </div>
            {{end}}
        </div>
        {{ end }}
    </div>

    {{template "error-message" .}}

    <div class="lgn-actions">
        <button class="lgn-icon-button lgn-left-action" name="resetlinking" value="true"
                formnovalidate>
            <i class="lgn-icon-arrow-left-solid"></i>
        </button>

        {{ if .IsLinkingAllowed }}
        <button type="submit" formaction="{{ externalNotFoundOptionUrl "linkbutton"}}" class="lgn-raised-button lgn-primary" name="linkbutton" value="true">
            {{t "ExternalNotFound.LinkButtonText"}}
        </button>
        {{ end }}
        <span class="fill-space"></span>
        {{ if .IsCreationAllowed }}
        <button type="submit" formaction="{{ externalNotFoundOptionUrl "autoregisterbutton"}}" class="lgn-raised-button lgn-primary" name="autoregisterbutton" value="true">
            {{t "ExternalNotFound.AutoRegisterButtonText"}}
        </button>
        {{ end }}
    </div>
</form>

<script src="{{ resourceUrl "scripts/form_submit.js" }}"></script>
<script src="{{ resourceUrl "scripts/external_not_found_check.js" }}"></script>

{{template "main-bottom" .}}