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

{% block extrastyle %}
  {{ block.super }}
  <style>
    #content-main .config-section-links {
      list-style: none;
      margin: 0 0 var(--spacing-vertical, 1em);
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing-horizontal, 1em);
    }
  </style>
{% endblock %}

{% block content %}
<div id="content-main">
  <h2>{% trans "Django Config" %}</h2>

  {% if config_sections %}
    <ul class="config-section-links" aria-label="{% trans 'Configuration sections' %}">
      {% for section in config_sections %}
        <li><a href="#config-section-{{ forloop.counter }}">{{ section.name }}</a></li>
      {% endfor %}
    </ul>
  {% endif %}

  <input type="text" id="config-filter" placeholder="{% trans 'Filter' %}" />

  {% for section in config_sections %}
    <section
      id="config-section-{{ forloop.counter }}"
      class="config-section"
      data-section-name="{{ section.name|lower }}"
    >
      <h3>{{ section.name }}</h3>
      <table class="config-table">
        <thead>
          <tr><th>{% trans "Name" %}</th><th>{% trans "Value" %}</th></tr>
        </thead>
        <tbody>
        {% for key, value in section.settings %}
          <tr><td>{{ key }}</td><td>{{ value }}</td></tr>
        {% empty %}
          <tr><td colspan="2">{% trans "No settings." %}</td></tr>
        {% endfor %}
        </tbody>
      </table>
    </section>
  {% empty %}
    <p>{% trans "No settings." %}</p>
  {% endfor %}
</div>
<script>
  function setupConfigFilter(inputId) {
    const input = document.getElementById(inputId);
    const sections = Array.from(document.querySelectorAll('.config-section'));
    if (!input || sections.length === 0) return;

    input.addEventListener('input', function () {
      const term = this.value.toLowerCase();
      for (const section of sections) {
        let sectionHasMatch = false;
        const rows = Array.from(section.querySelectorAll('tbody tr'));
        for (const row of rows) {
          const rowMatches = row.textContent.toLowerCase().includes(term);
          row.style.display = rowMatches ? '' : 'none';
          sectionHasMatch = sectionHasMatch || rowMatches;
        }
        section.style.display = sectionHasMatch ? '' : 'none';
      }
    });
  }

  document.addEventListener('DOMContentLoaded', function () {
    setupConfigFilter('config-filter');
  });
</script>
{% endblock %}