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

{% block tab %}
    <div class="twofas-content{% if is_sms_configured %} twofas-configured{% endif %}">
        <div class="twofas-content-container">
            <div class="twofas-content-header">
                <ul class="twofas-list-inline twofas-list-spacer">
                    {% if is_sms_configured %}
                        {% if is_sms_enabled %}
                            <li>
                                <form action="{{ create_url(constant('TwoFAS\\TwoFAS\\Http\\Action_Index::SUBMENU_CHANNEL'), constant('TwoFAS\\TwoFAS\\Http\\Action_Index::ACTION_DISABLE_SMS')) }}" method="post" class="js-open-disable-phone-modal">
                                    {{ create_form_nonce(constant('TwoFAS\\TwoFAS\\Http\\Action_Index::ACTION_DISABLE_SMS')) | 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_SMS')) }}" method="post">
                                    {{ create_form_nonce(constant('TwoFAS\\TwoFAS\\Http\\Action_Index::ACTION_ENABLE_SMS')) | raw }}
                                    <button type="submit" class="twofas-status-btn-as-link">
                                        <span class="twofas-danger">{{ esc_html__('Disabled', '2fas')|upper }}</span>
                                    </button>
                                </form>
                            </li>
                            <li>
                                <form action="{{ create_url(constant('TwoFAS\\TwoFAS\\Http\\Action_Index::SUBMENU_CHANNEL'), constant('TwoFAS\\TwoFAS\\Http\\Action_Index::ACTION_REMOVE_SMS_CONFIGURATION')) }}" method="post" class="js-open-deletion-confirmation-modal">
                                    {{ create_form_nonce(constant('TwoFAS\\TwoFAS\\Http\\Action_Index::ACTION_REMOVE_SMS_CONFIGURATION')) | raw }}
                                    <button type="submit" class="twofas-status-btn-as-link">
                                        <span class="twofas-danger">
                                            {{ esc_html__('Remove configuration', '2fas')|upper }}
                                        </span>
                                        <i class="twofas-icon twofas-icon-info-x"></i>
                                    </button>
                                </form>
                            </li>
                        {% endif %}
                    {% endif %}
                    <li>
                        <a href="https://2fas.com/learn-more#sms-vms-backup" 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__("Text Message (SMS) and Voice Call backup will allow you to authenticate to your WordPress account when you can't use tokens generated by 2FAS Authenticator.", '2fas')|raw }}</p>
            </div>

            <div class="twofas-content-items-container">
                <div class="twofas-configured-collapse">
                    <div class="twofas-configured-collapse-box-container">
                        <div class="twofas-configured-collapse-box">
                            <h3>{{ esc_html__('Backup codes - SMS/VMS are already configured.', '2fas') }}</h3>
                            <p class="twofas-phone-number"><strong>{{ esc_html__('Phone number', '2fas') }}: </strong>{{ phone_number }}</p>
                            <p>{{ esc_html__('If you want to change phone number, click button below.', '2fas' ) }}</p>
                            <a href="#" class="twofas-btn twofas-collapse-btn js-collapse-expand">{{ esc_html__('Configure Backup codes - SMS/VMS' ,'2fas') }}</a>
                        </div>
                    </div>
                </div>

                <div class="twofas-content-item">
                    <div class="twofas-content-item-left text-center">
                        <i class="twofas-icon twofas-icon-numpad"></i>
                    </div>

                    <div class="twofas-content-item-right twofas-phone-container">
                        <div class="twofas-content-item-right-content">
                            <p class="twofas-step twofas-muted">{{ esc_html__('Step 1', '2fas') }}</p>
                            <h6>{{ esc_html__('Add phone number', '2fas') }}</h6>

                            <div class="twofas-content-mobile">
                                <i class="twofas-icon twofas-icon-numpad"></i>
                            </div>

                            <p>{{ esc_html__('Enter your phone number.', '2fas') }}</p>
                            <form action="{{ create_url(constant('TwoFAS\\TwoFAS\\Http\\Action_Index::SUBMENU_CHANNEL'), constant('TwoFAS\\TwoFAS\\Http\\Action_Index::ACTION_REQUEST_AUTH_VIA_SMS')) }}" method="post" class="twofas-send-sms-form">
                                {{ create_form_nonce(constant('TwoFAS\\TwoFAS\\Http\\Action_Index::ACTION_REQUEST_AUTH_VIA_SMS')) | raw }}

                                <input type="tel" class="tel-input js-tel" value="{{ configuration_phone_number }}" required="required" />
                                <input type="hidden" id="phone-number" name="phone_number" class="js-tel-value" value="{{ configuration_phone_number }}" />

                                <div class="twofas-content-mobile">
                                    <div class="twofas-clear-fix"></div>
                                </div>

                                <button type="submit" class="twofas-btn twofas-action-btn twofas-block-btn twofas-send-sms-button js-send-sms">
                                    <span class="twofas-sms-sent-button-text">{{ esc_html__('Send token via sms', '2fas')|upper }}</span>
                                    <span class="twofas-sms-sent-message">{{ esc_html__('Code has been sent', '2fas')|upper }}</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>

                    <div class="twofas-clear-fix"></div>
                </div>

                <div class="twofas-content-item">
                    <div class="twofas-content-item-left text-center">
                        <i class="twofas-icon twofas-icon-sms"></i>
                    </div>

                    <div class="twofas-content-item-right">
                        <div class="twofas-content-item-right-content">
                            <p class="twofas-step twofas-muted">{{ esc_html__('Step 2', '2fas') }}</p>
                            <h6>{{ esc_html__('Enter token', '2fas') }}</h6>

                            <div class="twofas-content-mobile">
                                <i class="twofas-icon twofas-icon-sms"></i>
                            </div>

                            <p>{{ esc_html__('Select backup services and enter the 6-digit token you received in the SMS.', '2fas') }}</p>
                            <form action="{{ create_url(constant('TwoFAS\\TwoFAS\\Http\\Action_Index::SUBMENU_CHANNEL'), constant('TwoFAS\\TwoFAS\\Http\\Action_Index::ACTION_CONFIGURE_SMS')) }}" method="post" class="js-waiting-button">
                                {{ create_form_nonce(constant('TwoFAS\\TwoFAS\\Http\\Action_Index::ACTION_CONFIGURE_SMS')) | raw }}
                                <input type="hidden" id="authentication-id" name="twofas[authentication_id]" value="{{ authentication_id }}" />
                                <input type="hidden" id="verified-phone-number" name="twofas[phone_number]" value="{{ configuration_phone_number }}" />

                                {% if not authentication_id and not configuration_phone_number %}
                                    {% set disabledProperty = 'disabled = disabled' %}
                                {% else %}
                                    {% set disabledProperty = '' %}
                                {% endif %}

                                <input type="text"
                                       id="twofas-token"
                                       name="twofas[token]"
                                       class="twofas-token-input js-token-input"
                                       minlength="6"
                                       maxlength="6"
                                       placeholder=""
                                       required="required"
                                       pattern="[0-9]{6}"
                                       {{ disabledProperty }} />
                                <button type="submit" class="twofas-btn twofas-submit-btn twofas-enable-token-btn" {{ disabledProperty }}>
                                    <span>{{ esc_html__('Enable', '2fas')|upper }}</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>

                    <div class="twofas-clear-fix"></div>
                </div>

                <div class="twofas-clear-fix"></div>
            </div>
        </div>
    </div>

    {% include 'modals/confirmation/deletion-confirmation-modal.html.twig' %}
    {% include 'modals/confirmation/disable-phone-modal.html.twig' %}
{% endblock %}