<#import "template.ftl" as layout>
<@layout.registrationLayout displayMessage=!messagesPerField.existsError('username','password') displayInfo=realm.password && realm.registrationAllowed && !registrationDisabled??; section>
    <#if section = "header">
        ${msg("loginAccountTitle")}
    <#elseif section = "form">
        <div id="ty-auth-root"
             data-identity-api="${properties.identityApiUrl!'http://localhost:8001'}"
             data-callback-url="${properties.frontendCallbackUrl!'http://localhost:3000/auth/callback'}">

            <div id="ty-auth-header" class="ty-auth-header">
                <h2 id="ty-auth-title" class="ty-auth-title">${msg("tyTitleLogin")}</h2>
                <p id="ty-auth-subtitle" class="ty-auth-subtitle">${msg("tySubtitlePhone")}</p>
            </div>

            <div class="ty-auth-tabs" role="tablist">
                <button type="button" class="ty-auth-tab ty-auth-tab--active" data-ty-tab="mobile" role="tab">
                    ${msg("tyTabMobile")}
                </button>
                <button type="button" class="ty-auth-tab" data-ty-tab="password" role="tab">
                    ${msg("tyTabPassword")}
                </button>
            </div>

            <div id="ty-panel-mobile" class="ty-auth-panel ty-auth-panel--active">
                <div id="ty-mobile-error" class="ty-mobile-error" hidden role="alert"></div>

                <div id="ty-mobile-step-phone">
                    <div class="${properties.kcFormGroupClass!} ty-form-group">
                        <label for="ty-mobile-input" class="${properties.kcLabelClass!}">${msg("tyMobileLabel")}</label>
                        <input id="ty-mobile-input" type="tel" dir="ltr" class="${properties.kcInputClass!} ty-input-ltr"
                               placeholder="09123456789" autocomplete="tel"/>
                    </div>

                    <div id="ty-signup-fields" class="ty-signup-fields" hidden>
                        <p class="ty-signup-title">${msg("tySignupTitle")}</p>
                        <div class="${properties.kcFormGroupClass!} ty-form-group">
                            <label for="ty-display-name">${msg("tyDisplayName")}</label>
                            <input id="ty-display-name" type="text" class="${properties.kcInputClass!}" placeholder="نام نمایشی"/>
                        </div>
                        <div class="${properties.kcFormGroupClass!} ty-form-group">
                            <label for="ty-email">${msg("email")}</label>
                            <input id="ty-email" type="email" dir="ltr" class="${properties.kcInputClass!} ty-input-ltr"/>
                        </div>
                        <div class="${properties.kcFormGroupClass!} ty-form-group">
                            <label for="ty-username">${msg("username")}</label>
                            <input id="ty-username" type="text" dir="ltr" class="${properties.kcInputClass!} ty-input-ltr"/>
                        </div>
                        <div class="${properties.kcFormGroupClass!} ty-form-group">
                            <label for="ty-password">${msg("password")}</label>
                            <input id="ty-password" type="password" class="${properties.kcInputClass!}" minlength="8"/>
                        </div>
                    </div>

                    <button type="button" id="ty-toggle-signup" class="ty-link-btn">${msg("tyNoAccount")}</button>
                    <button type="button" id="ty-request-otp" class="ty-btn-primary">${msg("tySendOtp")}</button>
                </div>

                <div id="ty-mobile-step-code" hidden>
                    <p class="ty-otp-sent">${msg("tyOtpSent")} <strong id="ty-mobile-display" dir="ltr"></strong></p>
                    <p id="ty-countdown" class="ty-countdown" hidden></p>
                    <div class="${properties.kcFormGroupClass!} ty-form-group">
                        <input id="ty-otp-code" type="text" inputmode="numeric" maxlength="4" dir="ltr"
                               class="${properties.kcInputClass!} ty-otp-input" placeholder="••••" autocomplete="one-time-code"/>
                    </div>
                    <button type="button" id="ty-verify-otp" class="ty-btn-primary">${msg("doLogIn")}</button>
                    <button type="button" id="ty-back-phone" class="ty-link-btn">${msg("tyChangeMobile")}</button>
                </div>
            </div>

            <div id="ty-panel-password" class="ty-auth-panel" hidden>
                <#if realm.password>
                    <form id="kc-form-login" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post">
                        <#if !usernameHidden??>
                            <div class="${properties.kcFormGroupClass!} ty-form-group">
                                <label for="username" class="${properties.kcLabelClass!}">${msg("usernameOrEmailOrMobile")}</label>
                                <input tabindex="2" id="username" class="${properties.kcInputClass!} ty-input-ltr" name="username"
                                       value="${(login.username!'')}" type="text" autocomplete="username"
                                       dir="ltr"
                                       aria-invalid="<#if messagesPerField.existsError('username','password')>true</#if>"/>
                                <#if messagesPerField.existsError('username','password')>
                                    <span id="input-error" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
                                        ${kcSanitize(messagesPerField.getFirstError('username','password'))?no_esc}
                                    </span>
                                </#if>
                            </div>
                        </#if>

                        <div class="${properties.kcFormGroupClass!} ty-form-group">
                            <label for="password" class="${properties.kcLabelClass!}">${msg("password")}</label>
                            <input tabindex="3" id="password" class="${properties.kcInputClass!}" name="password"
                                   type="password" autocomplete="current-password"
                                   aria-invalid="<#if messagesPerField.existsError('username','password')>true</#if>"/>
                        </div>

                        <div class="${properties.kcFormGroupClass!} ${properties.kcFormSettingClass!}">
                            <#if realm.resetPasswordAllowed>
                                <div class="${properties.kcFormOptionsWrapperClass!}">
                                    <span><a tabindex="6" href="${url.loginResetCredentialsUrl}">${msg("doForgotPassword")}</a></span>
                                </div>
                            </#if>
                        </div>

                        <div id="kc-form-buttons" class="${properties.kcFormGroupClass!}">
                            <input type="hidden" id="id-hidden-input" name="credentialId"
                                   <#if auth.selectedCredential?has_content>value="${auth.selectedCredential}"</#if>/>
                            <input tabindex="7" class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}"
                                   name="login" id="kc-login" type="submit" value="${msg("doLogIn")}"/>
                        </div>
                    </form>
                </#if>
            </div>
        </div>
    <#elseif section = "info">
        <#-- ثبت‌نام از تب موبایل انجام می‌شود -->
    <#elseif section = "socialProviders">
        <#if realm.password && social.providers??>
            <div id="kc-social-providers" class="${properties.kcFormSocialAccountSectionClass!}">
                <hr/>
                <h4>${msg("identityProviderLoginLabel")}</h4>
                <ul class="${properties.kcFormSocialAccountListClass!}">
                    <#list social.providers as p>
                        <li>
                            <a class="${properties.kcFormSocialAccountListButtonClass!}" href="${p.loginUrl}">${p.displayName!}</a>
                        </li>
                    </#list>
                </ul>
            </div>
        </#if>
    </#if>
</@layout.registrationLayout>
