{% 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">
                    <li>
                        <a href="https://2fas.com/learn-more#trusted-devices" class="learn-more" target="_blank">
                            LEARN MORE
                            <i class="icon icon-info"></i>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="twofas-content-description">
                <p>The following list contains all of your trusted devices. When you are using a trusted device you don’t need to enter a verification code each time you log in. Ensure that this list is up to date and remove unnecessary devices.</p>
            </div>

            <div class="twofas-content-table">
                {% if trusted_devices is empty %}
                    <h5>No trusted devices</h5>
                {% else %}
                    <table class="trusted-devices">
                        <thead>
                        <tr>
                            <th>Browser and device</th>
                            <th>Added</th>
                            <th>Last logged in</th>
                            <th>IP Address</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for id, device in trusted_devices %}
                            <tr class="trusted-device">
                                <td>
                                    <div class="td-content">
                                        {{ device['browser'] }}
                                    </div>
                                </td>
                                <td class="trusted-device-added-on">
                                    <div class="td-content">
                                        <span class="date">{{ device['added_on'] }}</span>
                                        <span class="hour">{{ device['added_on'] }}</span>
                                    </div>
                                </td>
                                <td class="trusted-device-last-logged-in">
                                    <div class="td-content">
                                        <span class="date">{{ device['last_logged_in'] }}</span>
                                        <span class="hour">{{ device['last_logged_in'] }}</span>
                                    </div>
                                </td>
                                <td>
                                    <div class="td-content">
                                        <span class="trusted-device-country">{{ device['ip'] }}</span>
                                        <span class="ip">{{ device['ip'] }}</span>
                                    </div>
                                </td>
                                <td>
                                    <div class="td-content">
                                        {% set params = {'id': id} %}

                                        <form action="{{ url.create(constant('TwoFAS\\TwoFAS\\Http\\Route::SUBMENU_CHANNEL'), constant('TwoFAS\\TwoFAS\\Http\\Route::ACTION_REMOVE_TRUSTED_DEVICE')) }}" method="post" class="js-open-deletion-confirmation-modal form-inline remove">
                                            {{ url.create_form_nonce(constant('TwoFAS\\TwoFAS\\Http\\Route::ACTION_REMOVE_TRUSTED_DEVICE')) | raw }}
                                            <input type="hidden" name="device_id" value="{{ id }}" />
                                            <button type="submit" class="twofas-status-btn-as-link">
                                                Remove
                                                <i class="icon icon-remove"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                {% endif %}

                {% if not is_current_device_trusted %}
                    <div class="add-trusted-device{% if trusted_devices is empty %} text-center{% endif %}">
                        <form action="{{ url.create(constant('TwoFAS\\TwoFAS\\Http\\Route::SUBMENU_CHANNEL'), constant('TwoFAS\\TwoFAS\\Http\\Route::ACTION_ADD_TRUSTED_DEVICE')) }}" method="post" class="js-waiting-button">
                            {{ url.create_form_nonce(constant('TwoFAS\\TwoFAS\\Http\\Route::ACTION_ADD_TRUSTED_DEVICE')) | raw }}
                            <button type="submit" class="twofas-btn submit-btn">
                                <span>ADD THIS DEVICE</span>

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

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