{% extends 'account/base.html' %}
{% load helpers %}
{% load form_helpers %}
{% load i18n %}

{% block title %}{% trans "User Preferences" %}{% endblock %}

{% block content %}
  <form method="post" action="" class="object-edit object-edit--with-sticky-actions" hx-disable="true" id="preferences-update">
    {% csrf_token %}

    {# Built-in preferences #}
    {% for fieldset in form.fieldsets %}
      {% render_fieldset form fieldset %}
    {% endfor %}

    {# Plugin preferences #}
    {% with plugin_fields=form.plugin_fields %}
      {% if plugin_fields %}
        <div class="field-group my-5">
          <div class="row">
            <h2 class="col-9 offset-3">{% trans "Plugins" %}</h2>
          </div>
          {% for name in plugin_fields %}
            {% render_field form|getfield:name %}
          {% endfor %}
        </div>
      {% endif %}
    {% endwith %}

    {# Table configurations #}
    <div class="field-group my-5">
      <div class="row">
        <h2 class="col-9 offset-3">{% trans "Table Configurations" %}</h2>
      </div>
      <div class="row">
        {% if request.user.config.data.tables %}
          <label class="col-sm-3 col-form-label text-lg-end">
            {% trans "Clear table preferences" %}
          </label>
          <div class="col-sm-9">
            <div class="card">
              <table class="table table-hover object-list">
                <thead>
                  <tr>
                    <th>
                      <input type="checkbox" class="toggle form-check-input" title="{% trans "Toggle All" %}" aria-label="{% trans "Toggle All" %}">
                    </th>
                    <th>{% trans "Table" %}</th>
                    <th>{% trans "Ordering" %}</th>
                    <th>{% trans "Columns" %}</th>
                  </tr>
                </thead>
                <tbody>
                  {% for table, prefs in request.user.config.data.tables.items %}
                    <tr>
                      <td>
                        <input type="checkbox" name="pk" value="tables.{{ table }}" class="form-check-input" aria-label="{% blocktrans with name=table %}Select {{ name }}{% endblocktrans %}" />
                      </td>
                      <td>{{ table }}</td>
                      <td>{{ prefs.ordering|join:", "|placeholder }}</td>
                      <td>{{ prefs.columns|join:", "|placeholder }}</td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>
        {% else %}
          <div class="col-9 offset-3">
            <p class="text-muted">{% trans "None found" %}</p>
          </div>
        {% endif %}
      </div>
    </div>

    <div class="sticky-actions sticky-actions-footer d-print-none" data-sticky-position="full" data-sticky-when="always">
      <div class="btn-list">
        <a href="{% url 'account:preferences' %}" class="btn btn-outline-secondary">{% trans "Cancel" %}</a>
        <button type="submit" name="_update" class="btn btn-primary">{% trans "Save" %}</button>
      </div>
    </div>
  </form>
{% endblock %}
