{% extends 'base.html' %}
{% block header %}
    {% block title %}<h1>Token Registrierung</h1>{% endblock %}
    <script src="../static/js/jquery-3.6.0.js"></script>
{% endblock %}

{% block content %}
<div class="d-grid gap-3">
    <div class="p-2 bg-light border">
    <h2>Anleitung zur Schlüsselregistrierung</h2>
        <ol>
            <li>RFID-Token bereithalten (liegen im Regal im hinteren Raum)<br>
                <img src="static/token.png" title="Token" alt="Token"><br>
            Wichtig: Der RFID-Token darf nicht bereits registriert sein. Falls ein Token neu beschrieben werden soll,
                muss zunächst die bestehende Registrierung gelöscht werden.</li>
            <li>RFID-Token einmal von außen an das Lesegerät an der Tür halten. Danach diese Seite neu laden.</li>
            <li>Im Feld weiter unten erscheint die ID des Token. Außerdem wird die Uhrzeit des Lesevorgangs angezeigt.
            Diese bitte überprüfen, damit nicht versehentlich ein falscher Token registriert wird.</li>
            <li>Wenn alles passt, kann der Token registiert werden. Hierzu im Registierungsfeld Namen,
                Organisationszugehörigkeit (z.B. imaginärraum o. TransitionHaus) und eine E-Mail-Adresse zur
                Kontaktaufnahme angeben. Optional kann die Gültigkeitsdauer des Tokens begrenzt werden.
                Zusätzlich muss angegeben werden, dass der/die NutzerIn über die Nutzungsbedingungen aufgeklärt wurde
                und diesen zustimmt.
            </li>
            <li>Achtung: Der Token funktioniert nicht sofort, sondern muss erst explizit aktiviert werden!
                Dazu in der <a href="{{ url_for('list_tokens') }}">Token-Übersicht</a> auf das Bearbeiten-Symbol
                (<img src="static/edit.png" title="Editieren" alt="Edit">) klicken und den Haken bei "Aktiv?" setzen.
            </li>
            <li>Jetzt kann der Token verwendet werden.</li>
        </ol>
    </div>
    {% if 'token' in token and 'timestamp' in token %}
    <div class="alert alert-success" role="alert">
      <h4 class="alert-heading">Unregistrierter Token gelesen:</h4>
      <p>Token ID: {{ token['token'] }}</p>
      <hr>
      <p class="mb-0">Zeitstempel (UTC): {{ token['timestamp']}} (vor {{ token['timedelta_minutes'] }} Minuten)</p>
    </div>

    <div class="p-2 bg-light border">
    <h3>RaumnutzerIn registrieren:</h3>
        <form method="POST">
        <table>
        {{ form.csrf_token }}
        <tr>
        <td>{{ form.name.label }}</td>
        <td>{{ form.name(size=20) }}</td>
        </tr>
        <tr>
        <td>{{ form.email.label }}</td>
        <td>{{ form.email(size=20) }}</td>
        </tr>
        <tr>
            <td>{{ form.organization.label }}</td>
            <td>{{ form.organization(size=20) }}</td>
        </tr>
        <tr>
            <td>{{ form.limit_validity.label }}</td>
            <td> {{ form.limit_validity() }}</td>
        </tr>

        <tr id="valid_thru_row" style="display: none">
            <td>{{ form.valid_thru.label }} </td>
            <td>{{ form.valid_thru() }}</td>
        </tr>
        <tr>
            <td>{{ form.dsgvo.label }} </td>
            <td> {{ form.dsgvo() }}</td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="submit" value="Abschicken">
            </td>
        </tr>
        </table>
        </form>
    </div>
</div>
{% else %}
    <div class="alert alert-warning" role="alert">
      <p>Keine unregistrierten Tokens in MQTT Nachrichten. </p>
        <p>Bitte Token scannen und die Seite neu laden.</p>
    </div>

{% endif %}

<script>
    $(function () {
        $("#limit_validity").on("click", function () {
            if (this.checked) {
                $("#valid_thru_row").css("display", "table-row")
            }
            else {
                $("#valid_thru_row").css("display", "none")
            }
        });
    });
</script>
{% endblock %}