{% load i18n %}

{% if perms.opcalendar.see_signups %}
  <div class="d-flex flex-wrap align-items-center justify-content-between mb-2 gap-2">
    <div class="signup-summary">
      <span class="badge bg-success">{% trans "Attending" %}: {{ signup_summary.attending }}</span>
      <span class="badge bg-warning text-dark">{% trans "Maybe" %}: {{ signup_summary.maybe }}</span>
      <span class="badge bg-danger">{% trans "Declined" %}: {{ signup_summary.declined }}</span>
      <span class="badge bg-secondary">{% trans "Total" %}: {{ signup_summary.total }}</span>
    </div>
    <div class="d-flex gap-2">
      <input type="text" id="signupFilterName" class="form-control form-control-sm" placeholder="{% trans 'Filter by name' %}">
      <select id="signupFilterStatus" class="form-select form-select-sm">
        <option value="">{% trans "All statuses" %}</option>
        <option value="A">{% trans "Attending" %}</option>
        <option value="M">{% trans "Maybe" %}</option>
        <option value="D">{% trans "Declined" %}</option>
      </select>
    </div>
  </div>

  <table class="table table-bordered" id="signupsTable">
    <thead>
      <tr>
        <th style="width: 10px">{% trans "#" %}</th>
        <th>{% trans "Main Character" %}</th>
        <th>{% trans "Status" %}</th>
        <th>{% trans "Comment" %}</th>
      </tr>
    </thead>
    <tbody>
      {% for member in eventmember %}
      <tr role="row" data-status="{{ member.status }}" data-character="{{ member.character|lower }}">
          <td>{{ forloop.counter }}</td>
          <td>{{ member.character }}</td>
          <td>
            {% if member.status == "A" %}
              {% trans "Attending" %}
            {% elif member.status == "M" %}
              {% trans "Maybe" %}
            {% elif member.status == "D" %}
              {% trans "Declined" %}
            {% else %}
              {% trans "Unknown" %}
            {% endif %}
          </td>
          <td>{{ member.comment|default:"-" }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

  <script>
    (function () {
      const nameFilter = document.getElementById('signupFilterName');
      const statusFilter = document.getElementById('signupFilterStatus');
      const rows = document.querySelectorAll('#signupsTable tbody tr');

      const applyFilters = () => {
        const nameValue = nameFilter.value.trim().toLowerCase();
        const statusValue = statusFilter.value;

        rows.forEach((row) => {
          const matchesName = !nameValue || row.dataset.character.includes(nameValue);
          const matchesStatus = !statusValue || row.dataset.status === statusValue;
          row.style.display = matchesName && matchesStatus ? '' : 'none';
        });
      };

      nameFilter.addEventListener('input', applyFilters);
      statusFilter.addEventListener('change', applyFilters);
    })();
  </script>
{% endif %}