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

{% block content %}
<div id="content-main">
  {% if environment_tasks %}
    <div class="module environment-tasks">
      <h2>{% trans "Environment Tasks" %}</h2>
      <table class="table table-striped environment-tasks-table">
        <thead>
          <tr>
            <th scope="col">{% trans "Task" %}</th>
            <th scope="col">{% trans "Description" %}</th>
          </tr>
        </thead>
        <tbody>
          {% for task in environment_tasks %}
            <tr>
              <th scope="row"><a href="{{ task.url }}">{{ task.name }}</a></th>
              <td>{{ task.description }}</td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="2">{% trans "No environment tasks are available." %}</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  {% endif %}
  <div class="module environment-variables">
    <h2>{% trans "Environment Variables" %}</h2>
    <div class="environment-filter">
      <label>
        <span class="sr-only">{% trans "Filter names" %}</span>
        <input type="text" id="env-vars-filter" placeholder="{% trans 'Filter names' %}" />
      </label>
      <label>
        <span class="sr-only">{% trans "Filter values" %}</span>
        <input type="text" id="env-vars-value-filter" placeholder="{% trans 'Filter values' %}" />
      </label>
    </div>
    <table id="env-vars-table" class="table table-striped">
      <thead>
        <tr>
          <th scope="col">{% trans "Name" %}</th>
          <th scope="col">{% trans "Value" %}</th>
        </tr>
      </thead>
      <tbody>
      {% for key, value in env_vars %}
        <tr><td>{{ key }}</td><td>{{ value }}</td></tr>
      {% empty %}
        <tr><td colspan="2">{% trans "No environment variables." %}</td></tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
</div>
<script>
  function applyFilters(table, filters) {
    if (!table) return;
    const rows = table.tBodies[0]?.rows || [];
    for (const row of rows) {
      let visible = true;
      for (const { input, columnIndex } of filters) {
        const term = input.value.toLowerCase();
        if (!term) continue;
        const cellText = row.cells[columnIndex]?.textContent.toLowerCase() || '';
        if (!cellText.includes(term)) {
          visible = false;
          break;
        }
      }
      row.style.display = visible ? '' : 'none';
    }
  }

  function setupFilter(inputId, tableId, columnIndex, filters) {
    const input = document.getElementById(inputId);
    const table = document.getElementById(tableId);
    if (!input || !table) return;
    filters.push({ input, columnIndex });
    input.addEventListener('input', function () {
      applyFilters(table, filters);
    });
  }
  document.addEventListener('DOMContentLoaded', function () {
    const filters = [];
    setupFilter('env-vars-filter', 'env-vars-table', 0, filters);
    setupFilter('env-vars-value-filter', 'env-vars-table', 1, filters);
    const table = document.getElementById('env-vars-table');
    applyFilters(table, filters);
  });
</script>
{% endblock %}