<#import "template.ftl" as layout>
<#assign userType = "not"/>
<@layout.registrationLayout; section>
    <#if section = "title">
        ${msg("registerWithTitle",(realm.displayName!''))}
    <#elseif section = "header">
        ${msg("registerWithTitleHtml",(realm.displayNameHtml!''))?no_esc}
        <#if realm.internationalizationEnabled><small>(<#list locale.supported as l><#if l.label!=locale.current><a href="${l.url}">${l.label}</a></#if></#list>)</small></#if> 
    <#elseif section = "form">
    <div class="medium-12 large-6 large-push-1 columns">
        <form id="kc-register-form" class="sso-form" action="${url.registrationAction}"
              method="post">

          <#if !realm.registrationEmailAsUsername>
            <div class="${messagesPerField.printIfExists('username','sso-form-input-error')}">
                <label for="username">${msg("username")}</label>
                <input type="text" id="username" name="username" value="${(register.formData.username!'')}"/>
            </div>
          </#if>
            <div class="${messagesPerField.printIfExists('firstName','sso-form-input-error')}">
                <label for="firstName">${msg("firstName")}</label>
                <input type="text" id="firstName" name="firstName" value="${(register.formData.firstName!'')}"/>
            </div>

            <div class="${messagesPerField.printIfExists('lastName','sso-form-input-error')}">
                <label for="lastName">${msg("lastName")}</label>
                <input type="text" id="lastName" name="lastName" value="${(register.formData.lastName!'')}"/>
            </div>

            <div class="${messagesPerField.printIfExists('email','sso-form-input-error')}">
                <label for="email">${msg("email")}</label>
                <input type="text" id="email" name="email" value="${(register.formData.email!'')}"/>
            </div>

            <#if passwordRequired>
            <div class="${messagesPerField.printIfExists('password','sso-form-input-error')}">
                <label for="password">${msg("password")}</label>
                <input type="password" id="password" name="password"/>
            </div>

            <div class="${messagesPerField.printIfExists('password-confirm','sso-form-input-error')}">
                <label for="password-confirm">${msg("passwordConfirm")}</label>
                <input type="password" id="password-confirm" name="password-confirm"/>
            </div>
            </#if>

            <#switch userType>
                <#case "member">
            <div>
                <label for="user.attributes.postcode">PSČ</label>
                <input type="text" id="user.attributes.postcode" name="user.attributes.postcode"/>
            </div>
                    <#break>
            </#switch>

            <#if recaptchaRequired??>
            <div class="form-group">
                <div class="${properties.kcInputWrapperClass!}">
                    <div class="g-recaptcha" data-size="compact" data-sitekey="${recaptchaSiteKey}"></div>
                </div>
            </div>
            </#if>

            <div class="sso-form-buttons">
                <input class="sso-form-button sso-form-button-primary" type="submit" value="${msg("doRegister")}">
                <a class="sso-form-button" href="${url.loginUrl}">${msg("backToLogin")?no_esc}</a>
            </div>
        </form>
    </div>
    <div class="medium-12 large-4 large-pull-1 columns sso-form">
        <a id="info"></a>
        <h2>Proč se registrovat ?</h2>
        <p>Vplutím do zátoky Pirátů získáte možnost odebírat
            emailové newslettery a přihlašovat se k dalším systémům strany 
            (např. <a href="https://forum.pirati.cz" target="_blank">fórum</a>).
            </p>
        <p>Kromě odběratele novinek se můžete později stát příznivcem či dokonce
                plnoprávným členem Pirátů.
            </p>

        <h2>Přihlášení existujícím účtem</h2>
        <div>Pro vytvoření účtu můžete použít již existující příhlášení do následujících služeb:
        <#if realm.password && social.providers??>
            <div id="kc-social-providers" class="sso-social-buttons">
                <#list social.providers as p>
                    <div class="sso-social-button sso-social-button-${p.providerId}"><a href="${p.loginUrl}">
                        <div class="sso-social-button-icon">
                        <#switch p.providerId>
                            <#case "facebook">
                                <i class="fab fa-fw fa-facebook-f"></i>
                                <#break>
                            <#case "google">
                                <i class="fab fa-fw fa-google"></i>
                                <#break>
                            <#case "twitter">
                                <i class="fab fa-fw fa-twitter"></i>
                                <#break>
                            <#case "microsoft">
                                <i class="fab fa-fw fa-microsoft"></i>
                                <#break>
                            <#case "oidc">
                                <i class="fab fa-fw fa-openid"></i>
                                <#break>
                            <#default>
                                <i class="fa fa-fw fa-question-square"></i>
                                <#break>
                        </#switch>
                        </div>
                        <div class="sso-social-button-text">${p.displayName}</div>
                    </a></div>
                </#list>
            </div>
        </#if>
        </div>
        <br/>

        <h2>Více informací</h2>
            <p>Proč se registrovat a další související informace najdete v aplikaci <a href="https://nalodeni.pirati.cz">Nalodění</a>.
        </p>

    </div>
    </#if>
</@layout.registrationLayout>
