{{template "main-top" .}}

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

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

    {{ .CSRF }}

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

    <div class="lgn-actions">
        <a class="lgn-icon-button lgn-left-action" href="{{ loginNameChangeUrl .AuthReqID }}">
            <i class="lgn-icon-arrow-left-solid"></i>
        </a>
    </div>
    <div class="lgn-register-options">
        {{if hasRegistration }}
        <button class="lgn-raised-button lgn-primary" name="usernamepassword" value="true"
            formnovalidate>{{t "RegisterOption.RegisterUsernamePasswordButtonText"}}</button>
        {{end}}

        {{if hasExternalLogin}}
            <p>{{t "RegisterOption.ExternalLoginDescription"}}</p>
            {{ $reqid := .AuthReqID}}
            {{range $provider := .IDPProviders}}
                <a href="{{ externalIDPRegisterURL $reqid $provider.IDPConfigID}}"
                    class="lgn-idp {{idpProviderClass $provider.StylingType}}">
                    <span class="logo"></span>
                    <span class="provider-name">{{$provider.Name}}</span>
                </a>
            {{end}}
        {{end}}
    </div>

    {{template "error-message" .}}
</form>


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

{{template "main-bottom" .}}