{% extends "_skel.html" %}
{% block title %}Settings{% endblock %}
{% from "_formhelpers.html" import render_field %}
{% block content %}
{% if created_key %}
<div class="section card text-center">
    <p><b>Your new key is</b></p>
    <p class="my-4 font-mono break-all">{{ created_key }}</p>
    <p>Save it now, because it will disappear when you leave this page. <b>Keep it safe</b>, as it allows <b>access to
            your account.</b></p>
</div>
{% endif %}
<div class="section card">
    <form method="POST" class="form">
        {{ form.csrf_token }}
        {{ render_field(form.app_name) }}
        {{ render_field(form.description) }}
        {{ render_field(form.submit, False, class_="btn btn-blue btn-wide btn-center") }}
        {% if success %}<p class="text-center text-green-800">Saved successfuly.</p>{% endif %}
    </form>
</div>
{% for app in apps %}
{% set apploop = loop %}
<div class="section card">
    <ul class="list-disc">
        <h3 class="text-xl font-bold">{{ app }}</h3>
        {% for key in keys[app] %}
        <li class="ml-6 mt-2">
            <div class="flex items-center">
                <div class="flex-grow">
                    <p><span class="font-bold">Description:</span> {{ key.description }}</p>
                    <p><span class="font-bold">Created:</span> {{ key.created_on }}</p>
                    <p><span class="font-bold">Last use:</span> {% if key.last_use %} {{ key.last_use }}{% else
                        %}never{% endif
                        %}</p>
                </div>
                <div>
                    <p>
                        <a class="text-red-700 underline text-sm hover:text-red-500 italic"
                            href="{{ url_for('api.key_delete', key_id=key.id) }}">delete</a>
                    </p>
                </div>
            </div>

        </li>
        {% endfor %}
    </ul>
</div>
{% endfor %}
{% endblock %}
<!-- TODO: make form styling consistent -->