{% extends "admin/base_site.html" %}
{% load i18n %}

{% block extrastyle %}
{{ block.super }}
<style>
  #content-main table {
    width: 100%;
    clear: both;
  }
  #content-main .actions {
    float: right;
    margin-bottom: 1rem;
  }
  #content-main .actions form {
    display: inline;
    margin-left: 1rem;
  }
  #content-main .seed-data-actions {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    margin-left: 1rem;
  }
  #content-main .seed-data-actions .help {
    margin: 0;
    font-size: 0.85em;
    color: var(--body-quiet-color, #666);
  }
</style>
{% endblock %}

{% block content %}
<div id="content-main">
  {% if import_export or fixture_status or seed_data_actions %}
    <div class="actions">
      {% if import_export %}
        <a href="{% url 'admin:user_data_export' %}">{% trans "Export" %}</a>
        <form action="{% url 'admin:user_data_import' %}" method="post" enctype="multipart/form-data">
          {% csrf_token %}
          <input type="file" name="data_zip" accept=".zip" />
          <a href="#" onclick="this.closest('form').submit(); return false;">{% trans 'Import' %}</a>
        </form>
      {% endif %}
      {% if seed_data_actions %}
        <div class="seed-data-actions">
          <a class="button" href="{{ seed_data_download_url }}">{% trans "Download local seed data" %}</a>
          <p class="help">
            {% blocktrans with upload_dir=seed_data_upload_dir %}
              Upload the zip to {{ upload_dir }} or use the upload button below.
            {% endblocktrans %}
          </p>
          <form action="{{ seed_data_upload_url }}" method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <input type="file" name="seed_zip" accept=".zip" />
            <button type="submit" class="button">{% trans "Upload seed data zip" %}</button>
          </form>
        </div>
      {% endif %}
      {% if fixture_status %}
        <span>
          {% blocktrans with pending_count=fixture_status.pending|length total_count=fixture_status.total|length %}
            Unapplied fixtures: {{ pending_count }} ({{ total_count }} total)
          {% endblocktrans %}
        </span>
        <form action="{% url 'admin:user_data_apply_fixtures' %}" method="post">
          {% csrf_token %}
          <button type="submit" class="button"{% if not fixture_status.pending %} disabled{% endif %}>
            {% trans "Apply fixtures" %}
          </button>
        </form>
        <form action="{% url 'admin:user_data_reset_fixtures' %}" method="post">
          {% csrf_token %}
          <button type="submit" class="button">{% trans "Reset fixtures" %}</button>
        </form>
      {% endif %}
    </div>
  {% endif %}
  {% if sections %}
    <input type="text" id="data-filter" placeholder="{% trans 'Filter' %}" />
    <table id="data-table">
      <thead>
        <tr>
          <th>{% trans "App" %}</th>
          <th>{% trans "Model" %}</th>
          <th>{% trans "Custom" %}</th>
          <th>{% trans "Entity" %}</th>
          <th>{% trans "Fixture" %}</th>
        </tr>
      </thead>
      <tbody>
        {% for section in sections %}
          {% for item in section.items %}
          <tr>
            <td>{{ section.opts.app_config.verbose_name|capfirst }}</td>
            <td>{{ section.opts.verbose_name|capfirst }}</td>
            <td aria-label="{% trans 'Custom' %}">
              {% if item.custom %}
                ✓
              {% else %}
                ✗
              {% endif %}
            </td>
            <td><a href="{{ item.url }}">{{ item.label }}</a></td>
            <td>{{ item.fixture_name }}</td>
          </tr>
          {% endfor %}
        {% endfor %}
      </tbody>
    </table>
  {% else %}
    <p>{% trans 'None available' %}</p>
  {% endif %}
</div>
<script>
  function setupFilter(inputId, tableId) {
    const input = document.getElementById(inputId);
    const table = document.getElementById(tableId);
    if (!input || !table) return;
    input.addEventListener('input', function () {
      const term = this.value.toLowerCase();
      for (const row of table.tBodies[0].rows) {
        row.style.display = row.textContent.toLowerCase().includes(term) ? '' : 'none';
      }
    });
  }
  document.addEventListener('DOMContentLoaded', function () {
    setupFilter('data-filter', 'data-table');
  });
</script>
{% endblock %}