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

{% block tab %}
    <div class="twofas-content{% if is_sms_configured %} configured{% endif %}">
        <div class="twofas-content-container">
            <div class="twofas-content-header">
                <ul class="list-inline list-spacer">
                    {% if is_sms_configured %}
                        {% if is_sms_enabled %}
                            <li>
                                <form action="{{ url.create(constant('TwoFAS\\TwoFAS\\Http\\Route::SUBMENU_CHANNEL'), constant('TwoFAS\\TwoFAS\\Http\\Route::ACTION_DISABLE_SMS')) }}" method="post" class="js-open-disable-phone-modal">
                                    {{ url.create_form_nonce(constant('TwoFAS\\TwoFAS\\Http\\Route::ACTION_DISABLE_SMS')) | 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_SMS')) }}" method="post">
                                    {{ url.create_form_nonce(constant('TwoFAS\\TwoFAS\\Http\\Route::ACTION_ENABLE_SMS')) | raw }}
                                    <button type="submit" class="twofas-status-btn-as-link">
                                        <span class="danger">DISABLED</span>
                                    </button>
                                </form>
                            </li>
                            <li>
                                <form action="{{ url.create(constant('TwoFAS\\TwoFAS\\Http\\Route::SUBMENU_CHANNEL'), constant('TwoFAS\\TwoFAS\\Http\\Route::ACTION_REMOVE_SMS_CONFIGURATION')) }}" method="post" class="js-open-deletion-confirmation-modal">
                                    {{ url.create_form_nonce(constant('TwoFAS\\TwoFAS\\Http\\Route::ACTION_REMOVE_SMS_CONFIGURATION')) | raw }}
                                    <button type="submit" class="twofas-status-btn-as-link">
                                        <span class="danger">
                                            REMOVE CONFIGURATION
                                        </span>
                                        <i class="icon icon-info-x"></i>
                                    </button>
                                </form>
                            </li>
                        {% endif %}
                    {% endif %}
                    <li>
                        <a href="https://2fas.com/learn-more#sms-vms-backup" class="learn-more" target="_blank">
                            LEARN MORE
                            <i class="icon icon-info"></i>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="twofas-content-description">
                <p>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.</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>Backup codes - SMS/VMS are already configured.</h3>
                            <p class="phone-number"><strong>Phone number: </strong>{{ phone_number }}</p>
                            <p>If you want to change phone number, click button below.</p>
                            <a href="#" class="twofas-btn collapse-btn js-collapse-expand">Configure Backup codes &mdash; SMS/VMS</a>
                        </div>
                    </div>
                </div>

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

                    <div class="twofas-content-item-right phone-container">
                        <div class="twofas-content-item-right-content">
                            <p class="step muted">Step 1</p>
                            <h6>Add phone number</h6>

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

                            <p>Enter your phone number.</p>
                            <form action="{{ url.create(constant('TwoFAS\\TwoFAS\\Http\\Route::SUBMENU_CHANNEL'), constant('TwoFAS\\TwoFAS\\Http\\Route::ACTION_REQUEST_AUTH_VIA_SMS')) }}" method="post" class="send-sms-form">
                                {{ url.create_form_nonce(constant('TwoFAS\\TwoFAS\\Http\\Route::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="content-mobile">
                                    <div class="clear-fix"></div>
                                </div>

                                <button type="submit" class="twofas-btn action-btn block-btn send-sms-button js-send-sms">
                                    <span class="sms-sent-button-text">SEND TOKEN VIA SMS</span>
                                    <span class="sms-sent-message">CODE HAS BEEN SENT</span>

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

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

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

                    <div class="twofas-content-item-right">
                        <div class="twofas-content-item-right-content">
                            <p class="step muted">Step 2</p>
                            <h6>Enter token</h6>

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

                            <p>Select backup services and enter the 6-digit token you received in the SMS.</p>
                            <form action="{{ url.create(constant('TwoFAS\\TwoFAS\\Http\\Route::SUBMENU_CHANNEL'), constant('TwoFAS\\TwoFAS\\Http\\Route::ACTION_CONFIGURE_SMS')) }}" method="post" class="js-waiting-button">
                                {{ url.create_form_nonce(constant('TwoFAS\\TwoFAS\\Http\\Route::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 }}" />
                                <input type="text"
                                       id="twofas-token"
                                       name="twofas[token]"
                                       class="token-input js-token-input"
                                       minlength="6"
                                       maxlength="6"
                                       placeholder=""
                                       required="required"
                                       pattern="[0-9]{6}" />
                                <button type="submit" class="twofas-btn submit-btn enable-token-btn">
                                    <span>ENABLE</span>

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

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

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

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