{% extends 'generic/_base.html' %}
{% load i18n %}

{% block title %}{% trans "Setup" %}{% endblock %}

{% block content %}

<div class="alert alert-warning mt-3" role="alert">
    <h4 class="alert-heading">{% trans "Important" %}</h4>
    <p>{% trans "Diode is not currently configured and requires a set of users and API keys to be created before using Diode. If fields in this form are read-only, they have been pre-populated based on application settings that cannot be overwritten." %}</p>
    <p>{% trans "Click the \"Create\" button to create the required Diode users and API keys and proceed." %}</p>
</div>

<div class="tab-pane show active" id="setup-form" role="tabpanel" aria-labelledby="setup-tab">
    <form action="" method="post" enctype="multipart/form-data" class="object-edit mt-5">
        {% csrf_token %}

        <div class="row">
            <h2 class="col-9 offset-3">{% trans "Diode users and API Keys" %}</h2>
        </div>

        <div id="form_fields" hx-disinherit="hx-select hx-swap">
            {% block form %}
            {% include 'htmx/form.html' %}
            {% endblock form %}
        </div>

        <div class="text-end my-3">
            {% block buttons %}
            <button type="submit" name="_update" class="btn btn-primary">
                {% trans "Create" %}
            </button>
            {% endblock buttons %}
        </div>
    </form>
</div>
{% endblock content %}