{% extends "base.html" %}
{% load i18n static wger_extras %}

{% block title %}{% translate "API access" %}{% endblock %}


{% block content %}
    <p>
        {% blocktranslate trimmed %}
            Theare are two ways to authenticate against the API: JWT is the preferred
            mechanism for client applications, the static API key is intended for personal
            scripts or one-off integrations.
        {% endblocktranslate %}
    </p>

    <h4 class="mt-4">{% translate "Long-lived refresh tokens" %}</h4>

    <p>
        {% blocktranslate trimmed %}
            Refresh tokens let scripts and CLI tools talk to the wger API using
            the JWT flow without logging in interactively each time.
        {% endblocktranslate %}
    </p>

    <p>
        <button
            type="button"
            class="btn btn-block btn-light"
            hx-post="{% url 'core:user:api-key' %}"
            hx-vals='{"new_refresh_token": "true"}'
            hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
            hx-target="body"
            hx-push-url="true"
        >
            {% translate "Generate a new refresh token" %}
        </button>
    </p>

    {% if new_refresh_token %}
        <div class="alert alert-warning">
            <strong>{% translate "Copy this token now." %}</strong>
            {% blocktranslate trimmed %}
                It is shown only once. If you lose it, generate a new one and
                revoke the old session below.
            {% endblocktranslate %}
        </div>
        <div class="card mb-4 text-white bg-success">
            <div class="card-body">
                <code class="text-white" style="word-break: break-all;">{{ new_refresh_token }}</code>
            </div>
        </div>
    {% endif %}

    {% if long_lived_sessions %}
        <p>
            {% blocktranslate trimmed with days=refresh_token_lifetime_days %}
                Refresh tokens expire {{ days }} days after they were
                generated, unless you revoke them sooner.
            {% endblocktranslate %}
        </p>

        <table class="table">
            <thead>
                <tr>
                    <th>{% translate "Created" %}</th>
                    <th>{% translate "Expires" %}</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% for session in long_lived_sessions %}
                    <tr>
                        <td>{{ session.long_lived.created|date:"Y-m-d H:i" }}</td>
                        <td>{{ session.expire_date|date:"Y-m-d H:i" }}</td>
                        <td>
                            <button
                                type="button"
                                class="btn btn-sm btn-outline-danger"
                                hx-post="{% url 'core:user:api-key' %}"
                                hx-vals='{"revoke_refresh_token": "{{ session.session_key }}"}'
                                hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                                hx-target="body"
                                hx-push-url="true"
                            >
                                {% translate "Revoke" %}
                            </button>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>

        <p>
            <button
                type="button"
                class="btn btn-block btn-light"
                hx-post="{% url 'core:user:api-key' %}"
                hx-vals='{"revoke_all_refresh_tokens": "true"}'
                hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                hx-target="body"
                hx-push-url="true"
            >
                {% translate "Revoke all refresh tokens" %}
            </button>
        </p>
    {% endif %}

    <h4 class="mt-4">{% translate "JWT sessions" %}</h4>

    <p>
        <button
            type="button"
            class="btn btn-block btn-light"
            {% if not active_jwt_sessions %}disabled{% endif %}
            hx-post="{% url 'core:user:api-key' %}"
            hx-vals='{"revoke_jwt_sessions": "true"}'
            hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
            hx-target="body"
            hx-push-url="true"
        >
            {% translate 'Revoke all JWT sessions' %}
        </button>
    </p>

    <div class="card mb-4 {% if active_jwt_sessions %}text-white bg-success{% else %}bg-light{% endif %}">
        <div class="card-body">
            {% blocktranslate count counter=active_jwt_sessions %}
                There is currently <strong>{{ counter }}</strong> active JWT session
            {% plural %}
                There are currently <strong>{{ counter }}</strong> active JWT sessions
            {% endblocktranslate %}
        </div>
    </div>

    <p>
    {% blocktranslate trimmed %}
        Revoking JWT sessions logs out every device that obtained a refresh token via the JWT login endpoint.
    {%  endblocktranslate %}
    </p>

    <h4 class="mt-4">{% translate "API key" %}</h4>

        <p>
        <button
            type="button"
            class="btn btn-block btn-light"
            hx-post="{% url 'core:user:api-key' %}"
            hx-vals='{"new_key": "true"}'
            hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
            hx-target="body"
            hx-push-url="true"
        >
            {% if token %}
                {% translate 'Delete current API key and generate new one' %}
            {% else %}
                {% translate 'Generate new API key' %}
            {% endif %}
        </button>
    </p>

    {% if token %}
        <p>
            <button
                type="button"
                class="btn btn-block btn-light"
                hx-post="{% url 'core:user:api-key' %}"
                hx-vals='{"delete_key": "true"}'
                hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                hx-target="body"
                hx-push-url="true"
            >
                {% translate 'Delete API key' %}
            </button>
        </p>
    {% endif %}

    <div class="card mb-4 {% if token %}text-white bg-success{% else %}bg-light{% endif %}">
        <div class="card-body">
            {% if token %}
                <strong>{{ token.key }}</strong>
            {% else %}
                <em>{% translate "You have no API key yet" %}</em>
            {% endif %}
        </div>
    </div>

    <p>
        {% blocktranslate with key=token.key|default:"1234567890abcde..." %}
            Pass <code>Token {{ key }}</code> in the
            <code>Authorization</code> header to use it.
        {% endblocktranslate %}
    </p>

    <p>{% translate "Example with curl:" %}</p>
    <pre>
curl -X GET https://wger.de/api/v2/routine/ \
     -H 'Authorization: Token {% if token %}{{ token.key }}{% else %}1234567890abcde...{% endif %}'
</pre>

{% endblock %}


{#         #}
{# Sidebar #}
{#         #}
{% block sidebar %}

    <h5 class="mt-4">{% translate "Documentation" %}</h5>

    <p>
        <a href="{% url 'software:api' %}">{% translate 'API documentation' %}</a>
    </p>
{% endblock %}