{% extends "base.html" %}
{% load i18n l10n %}

{% block content %}
{% localize off %}
{% if user_request %}
<script type="text/javascript">
    $(document).ready(function(){
        $("#qgis-code-button").click(function(){
            navigator.clipboard.writeText($("#qgis-code").html());
            display_info("{% trans 'Key copied to clipboard.' %}");
        });
        $("#qgis-instance-button").click(function(){
            navigator.clipboard.writeText($("#qgis-instance").html());
            display_info("{% trans 'Instance address copied to clipboard.' %}");
        });
        var timer = $("#expire-seconds").text();
        var intervalId = window.setInterval(function(){
            timer -= 1;
            if (timer >= 0){
                $("#expire-seconds").html(timer);
            } else {
                location.reload();
            }
        }, 1000);
    });
</script>
{% endif %}
<h2>{{page_name}}</h2>
<div class='form'>
    <div class="row justify-content-center">
    {% if user_request %}
        <div class="alert alert-info show" role="alert">
            <i class="fa fa-info-circle" aria-hidden="true"></i>&nbsp;&nbsp;
            <span>{% trans "Put instance name and code in the QGIS plugin." %} {{expiry}}</span>
            <div class='m-1'><big><strong>{% trans "Ishtar instance" %}</strong> &nbsp;&nbsp;
                <button id="qgis-instance-button" class="btn btn-secondary text-monospace" data-toggle="tooltip" data-placement="bottom" title="{% trans 'Copy instance name to clipboard' %}"><i class="fa fa-clipboard" aria-hidden="true"></i> <span id='qgis-instance'>{{instance}}</span></button></big></div>
            <div class='m-1'><big><strong>{% trans "Code" %} ({{user_request.access_type_label}})</strong> &nbsp;&nbsp;
                <button id="qgis-code-button" class="btn btn-secondary text-monospace" data-toggle="tooltip" data-placement="bottom" title="{% trans 'Copy code to clipboard' %}"><i class="fa fa-clipboard" aria-hidden="true"></i> <span id='qgis-code'>{{user_request.key}}</span></button></big></div>
        </div>
    {% else %}
        <form method="post" action="{% url 'gis-request-key' %}">
            {% csrf_token %}
            <div class="form-row">
                {% with field=request_form.access_type %}
                {% include "blocks/bs_field_snippet.html" %}
                {% endwith %}
                {% with field=request_form.name %}
                {% include "blocks/bs_field_snippet.html" %}
                {% endwith %}
                <div class="col-lg-6"></div>
                {% with field=request_form.limit_date %}
                {% include "blocks/bs_field_snippet.html" %}
                {% endwith %}
                <div class="form-group col-12 text-center">
                    <button type='submit' class="btn btn-success mt-2">
                        <i class="fa fa-plus"></i> &nbsp;{% trans 'GIS connection' %}
                    </button>
                </div>
            </div>
        </form>
    {% endif %}
    </div>
    {% if object_list %}
    <hr>
    <div class="row justify-content-center">
    <table class="table table-striped w-50">
        <tr>
            <th>{% trans "Access type (limit date)" %}</th>
            <th>{% trans "Name" %}</th>
            <th>{% trans "Last access (IP)" %}</th>
            <th>{% trans "Delete" %}</th>
        </tr>
        {% for access in object_list %}
        <tr>
            <td>{{access.access_type_label}}{% if access.limit_date %} ({{access.limit_date|date:"DATE_FORMAT"|default:"-"}}){% endif %}</td>
            <td>{{access.name|default:"-"}}</td>
            <td>{{access.last_access|date:"DATE_FORMAT"}} ({{access.last_ip|default:"-"}})</td>
            <td>
                <a class="btn btn-danger btn-sm" title="{% trans 'Delete' %}" href="{% url 'gis-token-delete' access.key %}"
                    onclick='return confirm("{% trans 'Are you sure?' %}")'>
                    <i class="fa fa-trash"></i></a>
            </td>
        </tr>
        {% endfor %}
    </table>
    </div>
    {% endif %}
{% endlocalize %}
{% endblock %}