{include file="$template/includes/flashmessage.tpl"}
{assign var="linkedProvidersCount" value=0}
{if $linkableProviders}
    {assign var="linkedProvidersCount" value=$linkableProviders|@count}
{/if}
{assign var="securityQuestionsCount" value=0}
{if $securityQuestions}
    {assign var="securityQuestionsCount" value=$securityQuestions->count()}
{/if}

<section class="dashboard-page-section">
    <section class="dashboard-analytics-grid dashboard-analytics-grid--three">
        <article class="dashboard-analytics-card dashboard-analytics-card--green dashboard-analytics-card--spark">
            <span class="dashboard-analytics-card__icon"><i class="fas fa-shield-alt"></i></span>
            <div class="dashboard-analytics-card__copy">
                <span class="dashboard-analytics-card__label">{lang key='navAccountSecurity'}</span>
                <strong class="dashboard-analytics-card__value">{if $twoFactorAuthEnabled}{lang key='enabled'}{else}{lang key='disabled'}{/if}</strong>
                <span class="dashboard-analytics-card__meta">{lang key='twofactorauth'}</span>
            </div>
            <span class="dashboard-analytics-card__line dashboard-analytics-card__line--green"></span>
        </article>
        <article class="dashboard-analytics-card dashboard-analytics-card--mint dashboard-analytics-card--spark">
            <span class="dashboard-analytics-card__icon"><i class="fas fa-link"></i></span>
            <div class="dashboard-analytics-card__copy">
                <span class="dashboard-analytics-card__label">{lang key='remoteAuthn.titleLinkedAccounts'}</span>
                <strong class="dashboard-analytics-card__value">{$linkedProvidersCount}</strong>
                <span class="dashboard-analytics-card__meta">{lang key='userManagement.settings'}</span>
            </div>
            <span class="dashboard-analytics-card__line dashboard-analytics-card__line--mint"></span>
        </article>
        <article class="dashboard-analytics-card dashboard-analytics-card--amber dashboard-analytics-card--spark">
            <span class="dashboard-analytics-card__icon"><i class="fas fa-question-circle"></i></span>
            <div class="dashboard-analytics-card__copy">
                <span class="dashboard-analytics-card__label">{lang key='clientareanavsecurityquestions'}</span>
                <strong class="dashboard-analytics-card__value">{$securityQuestionsCount}</strong>
                <span class="dashboard-analytics-card__meta">{lang key='aboutsecurityquestions'}</span>
            </div>
            <span class="dashboard-analytics-card__line dashboard-analytics-card__line--amber"></span>
        </article>
    </section>

    <section class="dashboard-panel dashboard-page-table-panel">
        <div class="dashboard-page-heading dashboard-page-heading--inline">
            <div class="dashboard-page-heading__title">
                <span class="dashboard-page-heading__icon"><i class="fas fa-user-shield"></i></span>
                <div>
                    <h1 class="dashboard-page-title">{lang key='navAccountSecurity'}</h1>
                    <p class="dashboard-panel__copy">{lang key='userManagement.settings'}</p>
                    <div class="dashboard-page-heading__actions dashboard-page-heading__actions--security">
                        <a href="{routePath('user-password')}" class="dashboard-link dashboard-link--hero">
                            <i class="fas fa-key"></i>
                            {lang key='clientareanavchangepw'}
                        </a>
                        <a href="{routePath('user-profile')}" class="dashboard-action-ghost">
                            <i class="fas fa-user"></i>
                            {lang key='userProfile.profile'}
                        </a>
                    </div>
                </div>
            </div>
        </div>

        {if $linkableProviders}
            <div class="dashboard-panel mb-4">
                <div class="dashboard-panel__header">
                    <div>
                        <h2 class="dashboard-panel__title">{lang key='remoteAuthn.titleLinkedAccounts'}</h2>
                        <p class="dashboard-panel__copy">{lang key='userManagement.settings'}</p>
                    </div>
                </div>

                {include file="$template/includes/linkedaccounts.tpl" linkContext="clientsecurity" }

                <div class="mt-4">
                    {include file="$template/includes/linkedaccounts.tpl" linkContext="linktable" }
                </div>
            </div>
        {/if}

        {if $securityQuestions->count() > 0}
            <div class="dashboard-panel mb-4">
                <div class="dashboard-panel__header">
                    <div>
                        <h2 class="dashboard-panel__title">{lang key='clientareanavsecurityquestions'}</h2>
                        <p class="dashboard-panel__copy">{lang key='clientAreaSecurityNoSecurityQuestions'}</p>
                    </div>
                </div>

                <form method="post" action="{routePath('user-security-question')}">
                    {if $user->hasSecurityQuestion()}
                        <div class="form-group">
                            <label for="inputCurrentAns" class="col-form-label">{$user->getSecurityQuestion()}</label>
                            <input type="password" name="currentsecurityqans" id="inputCurrentAns" class="form-control" autocomplete="off" />
                        </div>
                    {/if}

                    <div class="form-group">
                        <label for="inputSecurityQid" class="col-form-label">{lang key='clientareasecurityquestion'}</label>
                        <select name="securityqid" id="inputSecurityQid" class="form-control custom-select">
                            {foreach $securityQuestions as $question}
                                <option value="{$question->id}">
                                    {$question->question}
                                </option>
                            {/foreach}
                        </select>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="inputSecurityAns1" class="col-form-label">{lang key='clientareasecurityanswer'}</label>
                                <input type="password" name="securityqans" id="inputSecurityAns1" class="form-control" autocomplete="off" />
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="inputSecurityAns2" class="col-form-label">{lang key='clientareasecurityconfanswer'}</label>
                                <input type="password" name="securityqans2" id="inputSecurityAns2" class="form-control" autocomplete="off" />
                            </div>
                        </div>
                    </div>

                    <div class="form-group mt-3">
                        <input class="btn btn-primary" type="submit" name="submit" value="{lang key='clientareasavechanges'}" />
                        <input class="btn btn-default" type="reset" value="{lang key='cancel'}" />
                    </div>
                </form>
            </div>
        {/if}

        {if $twoFactorAuthAvailable}
            <div class="dashboard-panel">
                <div class="dashboard-panel__header">
                    <div>
                        <h2 class="dashboard-panel__title">{lang key='twofactorauth'}</h2>
                        <p class="dashboard-panel__copy">{lang key='clientAreaSecurityTwoFactorAuthRecommendation'}</p>
                    </div>
                </div>

                <p class="twofa-config-link disable{if !$twoFactorAuthEnabled} w-hidden{/if}">
                    {lang key='twofacurrently'} <strong>{lang key='enabled'|strtolower}</strong>
                </p>
                <p class="twofa-config-link enable{if $twoFactorAuthEnabled} w-hidden{/if}">
                    {lang key='twofacurrently'} <strong>{lang key='disabled'|strtolower}</strong>
                </p>

                {if $twoFactorAuthRequired}
                    {include file="$template/includes/alert.tpl" type="warning" msg="{lang key="clientAreaSecurityTwoFactorAuthRequired"}"}
                {else}
                    {include file="$template/includes/alert.tpl" type="warning" msg="{lang key="clientAreaSecurityTwoFactorAuthRecommendation"}"}
                {/if}

                <div class="mt-3">
                    <a href="{routePath('account-security-two-factor-disable')}" class="btn btn-danger open-modal twofa-config-link disable{if !$twoFactorAuthEnabled} w-hidden{/if}" data-modal-title="{lang key='twofadisable'}" data-modal-class="twofa-setup" data-btn-submit-label="{lang key='twofadisable'}" data-btn-submit-color="danger" data-btn-submit-id="btnDisable2FA">
                        {lang key='twofadisableclickhere'}
                    </a>
                    <a href="{routePath('account-security-two-factor-enable')}" class="btn btn-success open-modal twofa-config-link enable{if $twoFactorAuthEnabled} w-hidden{/if}" data-modal-title="{lang key='twofaenable'}" data-modal-class="twofa-setup" data-btn-submit-id="btnEnable2FA">
                        <i class="fas fa-shield-alt"></i>
                        <span>Enable Two-Factor Authentication</span>
                    </a>
                </div>
            </div>
        {/if}
    </section>
</section>
