{% if title %}
  <h2 class="cell--title">{{ title }}</h2>
{% endif %}

{% if json.data %}
  <style>
    table.demands-table {
      width: 100%;
    }
    table.demands-table a {
      text-decoration: underline;
    }
    div#{{ cell.slug }} div.widget {
      padding: 0.3em 0.7em;
    }
  </style>
  {% if gestionnaire == "true" and cell.slug %}
    <script type="text/javascript">
      $(document).ready(function() {
        const signalementsTableCell = document.getElementById("{{ cell.slug }}");
        if (!signalementsTableCell) return;

        const signalementsTable = signalementsTableCell.querySelector("table");

        const rows = signalementsTableCell.querySelectorAll("table tr[data-demand-organization]");
        const organisms = {};
        rows.forEach(i => {
          const demandOrganization = i.dataset.demandOrganization || 0;
          const organizationName = i.querySelector("span.organization-name")?.textContent;
          organisms[demandOrganization] = organizationName;
        });

        const selectWidget = document.createElement("div");
        selectWidget.classList.add("widget", "django-select");

        const selectWidgetTitle = document.createElement("div");
        selectWidgetTitle.className = "title";
        const selectWidgetTitleLabel = document.createElement("label");
        selectWidgetTitleLabel.id = "id_organization_filter_title_{{ cell.id }}";
        selectWidgetTitleLabel.setAttribute("for", "id_organization_filter_{{ cell.id }}");
        selectWidgetTitleLabel.textContent = "Filtrer par organisation : ";
        selectWidgetTitle.prepend(selectWidgetTitleLabel);

        const selectWidgetContent = document.createElement("div");
        selectWidgetContent.className = "content";
        selectWidgetContent.setAttribute("aria-labelledby", "id_organization_filter_title_{{ cell.id }}");
        const selectEl = document.createElement("select");
        selectEl.setAttribute("id", "id_organization_filter_{{ cell.id }}");
        const allOptionEl = document.createElement("option");
        allOptionEl.value = "all";
        allOptionEl.textContent = "Tous les signalements";
        selectEl.append(allOptionEl);

        const emptyOptionEl = document.createElement("option");
        emptyOptionEl.value = "0";
        emptyOptionEl.textContent = "Signalements sans organisation";
        selectEl.append(emptyOptionEl);

        selectWidgetContent.prepend(selectEl);
        selectWidget.prepend(selectWidgetContent);
        selectWidget.prepend(selectWidgetTitle);

        signalementsTableCell.childNodes[0].insertBefore(selectWidget, signalementsTable);

        const allOrgs = Object.entries(organisms).map(([orgId, orgName]) => {
          if (orgId == 0) return;
          const optionEl = document.createElement("option");
          optionEl.value = orgId;
          optionEl.textContent = orgName;
          return optionEl;
        }).sort((a, b) => a.textContent > b.textContent);
        selectEl.append(...allOrgs);

        const handleSelectChange = (event) => {
          const value = event.target.value;
          let selectedOrgs;
          if (value == "all") {
            selectedOrgs = [...rows];
          } else if (value == 0) {
            selectedOrgs = [...rows].filter(i => i.dataset.demandOrganization == "")
          } else  {
            selectedOrgs = [...rows].filter(i => i.dataset.demandOrganization == value)
          }

          selectedOrgs.forEach((org, index) => {
            org.style = index < 10 ? "" : "display: none;"
          })

          const tBodyEl = signalementsTableCell.querySelector("tbody");
          tBodyEl.innerHTML = "";
          tBodyEl.append(...selectedOrgs);

          $(document).trigger('combo:cell-loaded', $(signalementsTableCell));
        };
        selectEl.addEventListener("change", handleSelectChange);
      });
    </script>
  {% endif %}
  <table class="pk-data-table pk-table-zebra demands-table">
    <thead>
      <th>N°</th>
      <th>Créé le</th>
      <th>Titre</th>
      <th>Domaine</th>
      <th>Lieu</th>
      <th>Mise à jour le</th>
      <th>Statut</th>
    </thead>
    <tbody>
      {% for demand in json.data %}
        <tr data-demand-organization="{{ demand.fields.dc_organisme_fusion|default:'' }}">
          <td class="demand-number"><a href="{% if is_portal_agent %}{{ demand.backoffice_url }}{% else %}{{ demand.url }}{% endif %}">{{ demand.form_number }}</a></td>
          <td class="demand-date">{{ demand.form_receipt_date|date:"d-m-Y" }}</td>
          <td class="demand-title">
            {{ demand.fields.titre|default:"" }}
            {% if gestionnaire == "true" %}
              {% autoescape off %}
                {% if demand.fields.dc_organisme_fusion_libelle  %}
                  <br /><span class="organization-name">{{ demand.fields.dc_organisme_fusion_libelle|truncatechars:60|upper }}</span> / {% endif %}<span class="demand-user">demande soumise par {{ demand.user.name }}</span>
              {% endautoescape %}
            {% endif %}
          </td>
          <td class="demand-domain">
            {% if demand.fields.type_n2 %}{{ demand.fields.type_n2 }} - {% endif %}
            {% if demand.fields.type_n3 %}{{ demand.fields.type_n3 }} - {% endif %}
            {{ demand.fields.corps_etat }} - {{ demand.fields.motif }}
          </td>
          <td class="demand-place">{% firstof demand.workflow.fields.bien demand.workflow.fields.adresse "" %}</td>
          <td class="demand-update-date">{{ demand.form_last_update_datetime|date:"d-m-Y" }}</td>
          <td class="demand-status">{% if is_portal_agent %}{{ demand.form_status }}{% else %}{{ demand.status }}{% endif %}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
  {% include "combo/pagination.html" with paginate_by=pagination %}
{% else %}
  <div>
    <p>Aucune demande.</p>
  </div>
{% endif %}