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

{% block page %}
    <div class="twofas-admin-account-wrapper">
        <h2>Account</h2>

        <div class="twofas-account">
            <div class="twofas-account-col">
                <div class="twofas-account-row">
                    <p>
                        <strong>This 2FAS account is managed by:</strong>
                        <span class="email">{{ twofas_email }}</span>
                    </p>
                </div>
                <div class="twofas-account-row">
                    <p class="plan">
                        <strong>Current plan:</strong>
                        {% if is_plan_premium %}
                            <span>PREMIUM</span>
                        {% else %}
                            <span>BASIC</span>
                        {% endif %}
                    </p>
                </div>
                <div class="twofas-account-row">
                    {% if has_client_card %}
                        <p class="credit-card">
                            <strong>Credit Card: </strong>
                            <span>{{ credit_card }}</span>
                        </p>
                        {% set card_button = 'Change / Remove Card' %}
                    {% else %}
                        <p class="credit-card">
                            <strong>Credit Card: </strong>
                            <span>None</span>
                        </p>
                        {% set card_button = 'Add Credit Card' %}
                    {% endif %}
                    <button class="twofas-btn upgrade-btn js-open-plan-modal">{{ card_button }}</button>
                </div>
            </div>
            <div class="twofas-account-col pull-right disable-container">
                {% if true == is_plugin_enabled %}
                <form action="{{ url.create(constant('TwoFAS\\TwoFAS\\Http\\Route::SUBMENU_DASHBOARD'), constant('TwoFAS\\TwoFAS\\Http\\Route::ACTION_DISABLE_PLUGIN')) }}" method="post" class="js-waiting-button">
                    {{ url.create_form_nonce(constant('TwoFAS\\TwoFAS\\Http\\Route::ACTION_DISABLE_PLUGIN')) | raw }}
                    <button type="submit" class="twofas-btn disable-btn" >
                        <i class="icon icon-turn-on-off"></i>
                        <span>Disable 2FAS</span>

                        <span class="spinner_button">
                            <span class="bounce1"></span>
                            <span class="bounce2"></span>
                            <span class="bounce3"></span>
                        </span>
                    </button>
                </form>
                {% else %}
                    <form action="{{ url.create(constant('TwoFAS\\TwoFAS\\Http\\Route::SUBMENU_DASHBOARD'), constant('TwoFAS\\TwoFAS\\Http\\Route::ACTION_ENABLE_PLUGIN')) }}" method="post" class="js-waiting-button">
                        {{ url.create_form_nonce(constant('TwoFAS\\TwoFAS\\Http\\Route::ACTION_ENABLE_PLUGIN')) | raw }}
                        <button type="submit" class="twofas-btn enable-btn">
                            <i class="icon icon-turn-on-off"></i>
                            <span>Enable 2FAS</span>

                            <span class="spinner_button">
                                <span class="bounce1"></span>
                                <span class="bounce2"></span>
                                <span class="bounce3"></span>
                            </span>
                        </button>
                    </form>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6">
                <div class="twofas-admin-users-wrapper">
                    <h2>Users of this 2FAS plugin</h2>

                    <div class="twofas-users anim-off">
                        <div id="js-legend"></div>
                        <div class="chart-container">
                            <canvas id="myChart"></canvas>
                        </div>
                    </div>

                    <div class="twofas-stats-data">
                        <input type="hidden" class="js-active-users-count" value="{{ statistics['active_users_count'] }}">
                        <input type="hidden" class="js-inactive-users-count" value="{{ statistics['inactive_users_count'] }}">
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="twofas-admin-video-wrapper">
                    <h2>Learn how 2FAS works</h2>

                    <div class="twofas-video">
                        <div class="video_player">
                            <div class="content">
                                <video
                                    id="my-player"
                                    class="video-js"
                                    controls
                                    preload="auto"
                                    poster="{{ assets_url }}images/player_background.png"
                                    data-setup='{}'>
                                    <source src="https://2fas.com/video/twofas-video-white.mp4" type="video/mp4"></source>
                                    <source src="https://2fas.com/video/twofas-video-white.webm" type="video/webm"></source>
                                    <source src="https://2fas.com/video/twofas-video-white.ogv" type="video/ogg"></source>
                                    <p class="vjs-no-js">
                                        To view this video please enable JavaScript, and consider upgrading to a
                                        web browser that
                                        <a href="http://videojs.com/html5-video-support/" target="_blank">
                                            supports HTML5 video
                                        </a>
                                    </p>
                                </video>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="twofas-admin-plans-wrapper">
                    <h2>Manage authentication plans</h2>

                    <div class="twofas-plans">
                        <table{% if is_plan_premium %} class="active-premium"{% else %} class="active-free"{% endif %}>
                            <thead>
                            <tr>
                                <th>AUTHENTICATION FACTORS</th>
                                <th class="basic">BASIC</th>
                                <th class="premium">PREMIUM</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>
                                    <div class="cell-icon">
                                        <i class="icon icon-twofas-auth"></i>
                                    </div>
                                    <div class="cell-content">
                                        <h6>2FAS Authenticator</h6>
                                        <p>Installation of the 2FAS Authenticator mobile application or Google Authenticator enables you to log in to a WordPress account using TOTP tokens, which increases the protection level of your website.</p>
                                    </div>
                                </td>
                                <td>
                                    <i class="icon icon-tick-admin"></i>
                                </td>
                                <td>
                                    <i class="icon icon-tick-admin"></i>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="cell-icon">
                                        <i class="icon icon-offline-codes"></i>
                                    </div>
                                    <div class="cell-content">
                                        <h6>Offline codes</h6>
                                        <p>If you lose your smartphone or delete an app, you can log in to your account using offline codes. Anytime you will generate 5 codes in the "Backup codes" bookmark.</p>
                                    </div>
                                </td>
                                <td>
                                    <i class="icon icon-tick-admin"></i>
                                </td>
                                <td>
                                    <i class="icon icon-tick-admin"></i>
                                </td>
                            </tr>
                            <tr class="premium downgrade">
                                <td>
                                    <div class="tick-content">
                                        {% if is_plan_premium %}
                                            <form action="{{ url.create(constant('TwoFAS\\TwoFAS\\Http\\Route::SUBMENU_DASHBOARD'), constant('TwoFAS\\TwoFAS\\Http\\Route::ACTION_DOWNGRADE_PLAN')) }}" method="post" {% if number_of_users_with_enabled_sms_backup > 0 %}class="js-open-downgrade-modal"{% endif %}>
                                                {{ url.create_form_nonce(constant('TwoFAS\\TwoFAS\\Http\\Route::ACTION_DOWNGRADE_PLAN')) | raw }}
                                                <input type="submit" class="twofas-btn admin-table-btn" value="DOWNGRADE TO BASIC" />
                                            </form>
                                            <p>FREE</p>
                                        {% else  %}
                                            <h5>FREE</h5>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                            <tr class="premium">
                                <td>
                                    <div class="cell-icon">
                                        <i class="icon icon-twofas-auth"></i>
                                    </div>
                                    <div class="cell-content">
                                        <h6>2FAS Authenticator</h6>
                                        <p>Installation of the 2FAS Authenticator mobile application or Google Authenticator enables you to log in to a WordPress account using TOTP tokens, which increases the protection level of your website.</p>
                                    </div>
                                </td>
                                <td>
                                    <i class="icon icon-tick-admin"></i>
                                </td>
                                <td>
                                    <i class="icon icon-tick-admin"></i>
                                </td>
                            </tr>
                            <tr class="premium">
                                <td>
                                    <div class="cell-icon">
                                        <i class="icon icon-offline-codes"></i>
                                    </div>
                                    <div class="cell-content">
                                        <h6>Offline codes</h6>
                                        <p>If you lose your smartphone or delete an app, you can log in to your account using offline codes. Anytime you will generate 5 codes in the "Backup codes" bookmark.</p>
                                    </div>
                                </td>
                                <td>
                                    <i class="icon icon-tick-admin"></i>
                                </td>
                                <td>
                                    <i class="icon icon-tick-admin"></i>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="cell-icon">
                                        <i class="icon icon-vms"></i>
                                    </div>
                                    <div class="cell-content">
                                        <h6>Text message (SMS) or Voice Call (VMS)</h6>
                                        <p>You cannot access a mobile app but you don't want to print or save your backup codes? Leave your phone number and we will send you a generated TOTP token via text or VMS (voice message service).</p>
                                    </div>
                                </td>
                                <td></td>
                                <td>
                                    <div class="tick-content">
                                        <i class="icon icon-tick-admin"></i>
                                        <p>
                                            <a href="https://2fas.com/premium" target="_blank">Check price list</a>
                                        </p>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="cell-icon">
                                        <i class="icon icon-support"></i>
                                    </div>
                                    <div class="cell-content">
                                        <h6>Support</h6>
                                        <p>In case of queries or technical issues, you can rely on our support. We are always available at our e-mail address.</p>
                                    </div>
                                </td>
                                <td></td>
                                <td>
                                    <div class="tick-content">
                                        <i class="icon icon-tick-admin"></i>
                                        <p>
                                            <a href="https://2fas.com/contact" target="_blank">Contact us</a>
                                        </p>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td>
                                    <div class="tick-content">
                                        {% if is_plan_premium %}
                                            <form action="{{ url.create(constant('TwoFAS\\TwoFAS\\Http\\Route::SUBMENU_DASHBOARD'), constant('TwoFAS\\TwoFAS\\Http\\Route::ACTION_DOWNGRADE_PLAN')) }}" method="post" {% if number_of_users_with_enabled_sms_backup > 0 %}class="js-open-downgrade-modal"{% endif %}>
                                                {{ url.create_form_nonce(constant('TwoFAS\\TwoFAS\\Http\\Route::ACTION_DOWNGRADE_PLAN')) | raw }}
                                                <input type="submit" class="twofas-btn admin-table-btn" value="DOWNGRADE TO BASIC" />
                                            </form>
                                            <p>FREE</p>
                                        {% else  %}
                                            <h5>FREE</h5>
                                        {% endif %}
                                    </div>
                                </td>
                                <td>
                                    <div class="tick-content">
                                        {% if is_plan_premium %}
                                            <h5>Active Plan</h5>
                                        {% else %}
                                            <form action="{{ url.create(constant('TwoFAS\\TwoFAS\\Http\\Route::SUBMENU_DASHBOARD'), constant('TwoFAS\\TwoFAS\\Http\\Route::ACTION_UPGRADE_PLAN')) }}" method="post" {% if not has_client_card %}class="js-open-credit-card-modal"{% endif %}>
                                                {{ url.create_form_nonce(constant('TwoFAS\\TwoFAS\\Http\\Route::ACTION_UPGRADE_PLAN')) | raw }}
                                                <input type="submit" class="twofas-btn admin-table-btn" value="UPGRADE NOW" />
                                            </form>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="twofas-admin-delete-bar-wrapper">
                    <div class="twofas-delete-bar">
                        <span>If you want to log out,</span>
                        <form action="{{ url.create(constant('TwoFAS\\TwoFAS\\Http\\Route::SUBMENU_DASHBOARD'), constant('TwoFAS\\TwoFAS\\Http\\Route::ACTION_LOGOUT')) }}" method="post" class="js-open-logout-modal form-inline">
                            {{ url.create_form_nonce(constant('TwoFAS\\TwoFAS\\Http\\Route::ACTION_LOGOUT')) | raw }}
                            <input type="submit" value="click here." class="twofas-btn-as-link" />
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% include 'modals/confirmation/logout-modal.html.twig' %}
    {% include 'modals/confirmation/downgrade-modal.html.twig' %}
    {% include 'modals/plan-modal.html.twig' %}
    {% include 'modals/credit-card-modal.html.twig' %}

    {% if true == show_wizard_modal  %}
        {% include 'modals/wizard-modal.html.twig' %}
    {% endif %}
{% endblock %}