{% 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="list-inline list-spacer">
                    {% if offline_codes_count > 0 %}
                        {% if are_offline_codes_enabled %}
                            <li>
                                <form action="{{ url.create(constant('TwoFAS\\TwoFAS\\Http\\Route::SUBMENU_CHANNEL'), constant('TwoFAS\\TwoFAS\\Http\\Route::ACTION_DISABLE_OFFLINE_CODES')) }}" method="post">
                                    {{ url.create_form_nonce(constant('TwoFAS\\TwoFAS\\Http\\Route::ACTION_DISABLE_OFFLINE_CODES')) | raw }}
                                    <button type="submit" class="twofas-status-btn-as-link">
                                        <span class="success">ENABLED</span>
                                    </button>
                                </form>
                            </li>
                        {% else %}
                            <li>
                                <form action="{{ url.create(constant('TwoFAS\\TwoFAS\\Http\\Route::SUBMENU_CHANNEL'), constant('TwoFAS\\TwoFAS\\Http\\Route::ACTION_ENABLE_OFFLINE_CODES')) }}" method="post">
                                    {{ url.create_form_nonce(constant('TwoFAS\\TwoFAS\\Http\\Route::ACTION_ENABLE_OFFLINE_CODES')) | raw }}
                                    <button type="submit" class="twofas-status-btn-as-link">
                                        <span class="danger">DISABLED</span>
                                    </button>
                                </form>
                            </li>
                        {% endif %}
                    {% endif %}
                    <li>
                        <a href="https://2fas.com/learn-more#offline-codes" class="learn-more" target="_blank">
                            LEARN MORE
                            <i class="icon icon-info"></i>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="twofas-content-description">
                <p>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.</p>
            </div>

            <div class="twofas-content-items-container">
                <div class="offline-stats-container">
                    <div class="offline-stats">
                        <div class="offline-stats-generated">
                            {% if offline_codes_count > 0 %}
                                <div class="offline-stats-active-codes">
                                    <h2>{{ offline_codes_count }}</h2>
                                    <p>Active<br>Code{% if offline_codes_count > 1 %}s{% endif %}</p>
                                </div>

                                {% if quantity %}
                                    <div class="offline-stats-of">
                                        <p><em>out of</em></p>
                                    </div>

                                    <div class="offline-stats-generated-code">
                                        <h2>{{ quantity }}</h2>
                                        <p>Generated<br>Codes</p>
                                    </div>
                                {% endif %}

                                {% set buttonText = 'Regenerate backup codes' %}
                            {% else %}
                                <p>No offline codes</p>

                                {% set buttonText = 'Generate backup codes' %}
                            {% endif %}

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

                                    <span class="spinner_button">
                                        <span class="bounce1"></span>
                                        <span class="bounce2"></span>
                                        <span class="bounce3"></span>
                                    </span>
                                </button>
                            </form>
                        </div>

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

                    {% if date and offline_codes_count > 0 %}
                        <p class="last-generate text-center">
                            Last generated: <strong><span class="offline-codes-date">{{ date }}</span></strong>
                        </p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}