{% extends "mfa_base.html" %}
{% load static %}
{% block head %}
{{block.super}}
    <script type="text/javascript">
    function confirmDel(id) {
        $.ajax({
            url:"{% url 'mfa_delKey' %}",
            data:{"id":id},
            success:function (data) {
                alert(data)
                window.location.reload();
            }
        })
    }
    function deleteKey(id,name)
    {
        $("#modal-title").html("Confirm Delete")
        $("#modal-body").html("Are you sure you want to delete '"+name+"'? you may lose access to your system if this your only 2FA.");
        $("#actionBtn").remove()
        $("#modal-footer").prepend("<button id='actionBtn' class='btn btn-danger' onclick='confirmDel("+id+")'>Confirm Deletion</button>")
        $("#popUpModal").modal()
    }

    function toggleKey(id) {
        $.ajax({
            url:"{% url 'toggle_key' %}?id="+id,
            success:function (data) {
                if (data == "Error")
                    $("#toggle_"+id).toggle()

            },
            error:function (data) {
                $("#toggle_"+id).toggle()
            }
        })
    }
    </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 align="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' %}">Authenticator app</a></li>
                {% endif %}
                {% if not 'Email' in UNALLOWED_AUTHEN_METHODS %}
                    <li><a class="dropdown-item" href="{% url 'start_email' %}">Email Token</a></li>
                {% endif %}
                {% if not 'U2F' in UNALLOWED_AUTHEN_METHODS %}
                    <li><a class="dropdown-item" href="{% url 'start_u2f' %}">Security Key</a></li>
                {% endif %}
            {% if not 'FIDO2' in UNALLOWED_AUTHEN_METHODS %}
                    <li><a class="dropdown-item" href="{% url 'start_fido2' %}">FIDO2 Security Key</a></li>
                {% endif %}
            {% if not 'Trusted_Devices' in UNALLOWED_AUTHEN_METHODS %}
                    <li><a class="dropdown-item" href="{% url 'start_td' %}">Trusted Device</a></li>
                {% endif %}
            </ul>
            </div>
        </div>
    <br/>
    <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>
        {% for key in keys %}
           <tr>

               <td>{{ key.key_type }}</td>
               <td>{{ key.added_on }}</td>
               <td>{{ key.expires }}</td>
               <td>{% if key.device %}{{ key.device }}{% endif %}</td>
               <td>{{ key.last_used }}</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"  onchange="toggleKey({{ key.id }})" data-toggle="toggle" class="status_chk"></td>
                {% endif %}
               <td>{% if key.key_type in HIDE_DISABLE %}
                   ----
                   {% else %}
                    <a href="javascript:void(0)" onclick="deleteKey({{ key.id }},'{{ key.key_type }}')"> <span class="fa fa-trash"></span></a></td>
                    {% endif %}
           </tr>
       {% empty %}
           <tr><td colspan="7" align="center">You didn't have any keys yet.</td> </tr>
       {% endfor %}
        </table>
    </div>
    </div>
    {% include "modal.html" %}
{% endblock %}