{% extends "dashboard/user/user-base.html.twig" %}

{% block tab %}
    <div class="twofas-content">
        <div class="twofas-content-container">
            <div class="twofas-content-header">
                <ul class="twofas-list-inline twofas-list-spacer">
                    {% if offline_codes_count > 0 %}
                        {% if are_offline_codes_enabled %}
                            <li>
                                <form action="{{ create_url(constant('TwoFAS\\TwoFAS\\Http\\Action_Index::SUBMENU_CHANNEL'), constant('TwoFAS\\TwoFAS\\Http\\Action_Index::ACTION_DISABLE_OFFLINE_CODES')) }}"
                                      method="post">
                                    {{ create_form_nonce(constant('TwoFAS\\TwoFAS\\Http\\Action_Index::ACTION_DISABLE_OFFLINE_CODES')) | raw }}
                                    <button type="submit" class="twofas-status-btn-as-link">
                                        <span class="twofas-success">{{ esc_html__('Enabled', '2fas')|upper }}</span>
                                    </button>
                                </form>
                            </li>
                        {% else %}
                            <li>
                                <form action="{{ create_url(constant('TwoFAS\\TwoFAS\\Http\\Action_Index::SUBMENU_CHANNEL'), constant('TwoFAS\\TwoFAS\\Http\\Action_Index::ACTION_ENABLE_OFFLINE_CODES')) }}"
                                      method="post">
                                    {{ create_form_nonce(constant('TwoFAS\\TwoFAS\\Http\\Action_Index::ACTION_ENABLE_OFFLINE_CODES')) | raw }}
                                    <button type="submit" class="twofas-status-btn-as-link">
                                        <span class="twofas-danger">{{ esc_html__('Disabled', '2fas')|upper }}</span>
                                    </button>
                                </form>
                            </li>
                        {% endif %}
                    {% endif %}
                    <li>
                        <a href="https://2fas.com/learn-more#offline-codes" class="twofas-learn-more" target="_blank" rel="noreferrer noopener">
                            {{ esc_html__('Learn more', '2fas')|upper }}
                            <i class="twofas-icon twofas-icon-info"></i>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="twofas-content-description">
                <p>
                    {{ esc_html__("Backup codes will allow you to authenticate to your WordPress account when you can't use tokens generated by 2FAS Authenticator.
                    Generate codes and keep them in a safe place.", '2fas')|raw }}
                </p>
            </div>

            <div class="twofas-content-items-container">
                <div class="twofas-offline-stats-container">
                    <div class="twofas-offline-stats">
                        <div class="twofas-offline-stats-generated">
                            {% if offline_codes_count > 0 %}
                                <div class="twofas-offline-stats-active-codes">
                                    {{ sprintf(
                                        _n(
                                            '%1$s %2$s %3$s %4$s Active %5$s Code %6$s',
                                            '%1$s %2$s %3$s %4$s Active %5$s Codes %6$s',
                                            offline_codes_count,
                                            '2fas'
                                        ),
                                        '<h2>',
                                        offline_codes_count,
                                        '</h2>',
                                        '<p>',
                                        '<br/>',
                                        '</p>'
                                    )|raw }}
                                </div>

                                {% if quantity %}
                                    <div class="twofas-offline-stats-of">
                                        <p><em>{{ esc_html__('Out of', '2fas')|lower }}</em></p>
                                    </div>

                                    <div class="twofas-offline-stats-generated-code">
                                        <h2>{{ quantity }}</h2>
                                        {{ sprintf(
                                            esc_html__('%1$s Generated %2$s Codes %3$s', '2fas'),
                                            '<p>',
                                            '<br/>',
                                            '</p>'
                                        )|raw }}
                                    </div>
                                {% endif %}

                                {% set buttonText = esc_html__('Regenerate backup codes', '2fas') %}
                            {% else %}
                                <p>{{ esc_html__('No offline codes', '2fas') }}</p>

                                {% set buttonText = esc_html__('Generate backup codes', '2fas') %}
                            {% endif %}

                            <form action="{{ create_url(constant('TwoFAS\\TwoFAS\\Http\\Action_Index::SUBMENU_CHANNEL'), constant('TwoFAS\\TwoFAS\\Http\\Action_Index::ACTION_GENERATE_OFFLINE_CODES')) }}"
                                  method="post" class="twofas-generate-offline-codes-form">
                                {{ create_form_nonce(constant('TwoFAS\\TwoFAS\\Http\\Action_Index::ACTION_GENERATE_OFFLINE_CODES')) | raw }}
                                <button class="js-generate-offline-codes twofas-btn twofas-generate-backup-btn">
                                    <span>{{ buttonText }}</span>

                                    <span class="twofas-spinner-button">
                                        <span class="twofas-spinner-button-bounce-1"></span>
                                        <span class="twofas-spinner-button-bounce-2"></span>
                                        <span class="twofas-spinner-button-bounce-3"></span>
                                    </span>
                                </button>
                            </form>
                        </div>

                        <div class="twofas-offline-codes-data"></div>
                        <div class="twofas-offline-codes-list">
                            <div class="twofas-download-form">
                                <a href="#" download="{{ filename }}"
                                   class="twofas-download-codes-link twofas-btn twofas-backup-action-btn">
                                    <span>{{ esc_html__('Download', '2fas') }}</span>
                                </a>
                            </div>
                            <div class="twofas-print-form">
                                <form action="{{ create_url(constant('TwoFAS\\TwoFAS\\Http\\Action_Index::SUBMENU_CHANNEL'), constant('TwoFAS\\TwoFAS\\Http\\Action_Index::ACTION_PRINT_OFFLINE_CODES')) }}"
                                      method="post" target="_blank" rel="noreferrer noopener">
                                    {{ create_form_nonce(constant('TwoFAS\\TwoFAS\\Http\\Action_Index::ACTION_PRINT_OFFLINE_CODES')) | raw }}
                                    <div class="twofas-offline-codes-inputs"></div>
                                    <button type="submit" class="twofas-btn twofas-generate-backup-btn">
                                        <span>{{ esc_html__( 'Print', '2fas') }}</span>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>

                    {% if date and offline_codes_count > 0 %}
                        <p class="twofas-last-generate text-center">
                            {{ esc_html__( 'Last generated:', '2fas') }}<strong><span class="twofas-offline-codes-date">{{ date }}</span></strong>
                        </p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}