{% extends "mfa_base.html" %}
{% load static %}
{% block head %}
    {{ block.super }}
    <link href="{% static 'mfa/css/mfa.css' %}" rel="stylesheet">
    {% url 'mfa_delKey' as mfa_delKey %}
    {{ mfa_delKey|json_script:"mfa_delKey" }}
    {{ csrf_token|stringformat:"s"|json_script:"csrf_token" }}
    {% url 'toggle_key' as toggle_key %}
    {{ toggle_key|json_script:"toggle_key" }}
    <script type="application/javascript" src="{% static 'mfa/js/mfa.js' %}"></script>
    <link href="{% static 'mfa/css/bootstrap-toggle.min.css' %}" rel="stylesheet">
    <script src="{% static 'mfa/js/bootstrap-toggle.min.js' %}"></script>
{% endblock %}
{% block content %}
    {{ block.super }}
    <br/>
    <br/>
    <div class="container">
        <div class="row">
            <div class="offset-5 col-2 text-center">
                <div class="btn-group">
                    <button class="btn btn-success dropdown-toggle" data-toggle="dropdown" data-bs-toggle="dropdown">
                        Add Method&nbsp;<span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        {% if not 'TOTP' in UNALLOWED_AUTHEN_METHODS %}
                            <li><a class="dropdown-item" href="{% url 'start_new_otop' %}">{% if 'TOTP' in RENAME_METHODS.keys %}{{ RENAME_METHODS.TOTP }}{% else %}Authenticator app{% endif %}</a></li>
                        {% endif %}
                        {% if not 'Email' in UNALLOWED_AUTHEN_METHODS %}
                            <li><a class="dropdown-item" href="{% url 'start_email' %}">{% if 'Email' in RENAME_METHODS.keys %}{{ RENAME_METHODS.Email }}{% else %}Email Token{% endif %}</a></li>
                        {% endif %}
                        {% if not 'U2F' in UNALLOWED_AUTHEN_METHODS %}
                            <li><a class="dropdown-item" href="{% url 'start_u2f' %}">{% if 'U2F' in RENAME_METHODS.keys %}{{ RENAME_METHODS.U2F }}{% else %}Security Key{% endif %}</a></li>
                        {% endif %}
                        {% if not 'FIDO2' in UNALLOWED_AUTHEN_METHODS %}
                            <li><a class="dropdown-item" href="{% url 'start_fido2' %}">{% if 'FIDO2' in RENAME_METHODS.keys %}{{ RENAME_METHODS.FIDO2 }}{% else %}FIDO2 Security Key{% endif %}</a></li>
                        {% endif %}
                        {% if not 'Trusted_Devices' in UNALLOWED_AUTHEN_METHODS %}
                            <li><a class="dropdown-item" href="{% url 'start_td' %}">{% if 'Trusted_Devices' in  RENAME_METHODS.keys %}{{ RENAME_METHODS.Trusted_Devices }}{% else %}Trusted Device{% endif %}</a></li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </div>
        <br/>
        <table class="table table-striped">
            <tr>
                <th>Type</th>
                <th>Date Added</th>
                <th>Expires On</th>
                <th>Device</th>
                <th>Last Used</th>
                <th>Status</th>
                <th>Delete</th>
            </tr>
            {% if keys %}
                {% for key in keys %}
                    <tr class="mfa_key" data-key-id="{{ key.id }}" data-key-type="{{ key.key_type }}">
                        <td>{{ key.name }}</td>
                        <td>{{ key.added_on }}</td>
                        <td>{% if key.expires %}{{ key.expires }}{% else %}N/A{% endif %}</td>
                        <td>{% if key.device %}{{ key.device }}{% endif %}</td>
                        <td>{% if key.last_used %}{{ key.last_used }}{% else %}Never{% endif %}</td>
                        {% if key.key_type in HIDE_DISABLE %}
                            <td>{% if key.enabled %}On{% else %} Off{% endif %}</td>
                        {% else %}
                            <td><input type="checkbox" id="toggle_{{ key.id }}" {% if key.enabled %}checked{% endif %}
                                       data-onstyle="success" data-offstyle="danger"
                                       data-toggle="toggle" class="status_chk"></td>
                        {% endif %}
                        {% if key.key_type in HIDE_DISABLE %}
                            <td>----</td>
                        {% else %}
                            <td>
                                <a href="#" id="delete_{{ key.id}}">
                                    <span class="fa fa-trash fa-solid fa-trash-can bi bi-trash-fill"></span>
                                </a>
                            </td>
                        {% endif %}
                    </tr>
                {% endfor %}
                {% if "RECOVERY" not in UNALLOWED_AUTHEN_METHODS and recovery %}
                    <tr>
                        <td>{{ recovery.name }}</td>
                        <td>{{ recovery.added_on }}</td>
                        <td>N/A</td>
                        <td>N/A</td>
                        <td>{% if recovery.last_used %}{{ recovery.last_used }}{% else %}Never{% endif %}</td>
                        <td>On</td>
                        <td>
                            <a href="{% url 'manage_recovery_codes' %}">
                                <span class="fa fa-wrench fa-solid fa-wrench bi bi-wrench-fill"></span>
                            </a>
                        </td>
                    </tr>
                {% endif %}
            {% else %}
                <tr>
                    <td colspan="7" class="text-center">You didn't have any keys yet.</td>
                </tr>
            {% endif %}
        </table>
    </div>
    {% include "modal.html" %}
{% endblock %}