{% extends "wagtailadmin/base.html" %}
{% load static %}
{% block extra_css %}
  {{ block.super }}
  <link rel="stylesheet" href="{% static 'wagtail_seeder/dashboard.css' %}">
{% endblock %}
{% block extra_js %}
  {{ block.super }}
  <script src="{% static 'wagtail_seeder/dashboard.js' %}" defer></script>
{% endblock %}
{% block content %}
{% include "wagtailadmin/shared/header.html" with title="Seeder" icon="pick" %}
<div class="nice-padding" data-seeder-dashboard>
  <p><strong>Omgeving: {{ environment|upper }}</strong>. Toegang vereist de expliciet toegekende Seeder-permissie, ook voor superusers.</p>
  <p>Toegestane hosts: {% if allowed_hostnames %}{{ allowed_hostnames|join:", " }}{% else %}alle hosts{% endif %}.</p>
  <noscript><p>Schakel JavaScript in voor de laadbalk, zoeken en selecteren. De seedformulieren blijven beschikbaar.</p></noscript>
  <div class="seeder-busy" data-seed-busy hidden tabindex="-1">
    <p role="status">Bezig met seeden. Dit kan even duren; wacht op het resultaat.</p>
    <div class="seeder-progress" role="progressbar" aria-label="Seed wordt uitgevoerd"></div>
    <p data-seed-elapsed>0 seconden verstreken</p>
  </div>
  <p role="alert" data-seed-request-error hidden></p>
  {% if report %}
    <section class="seeder-section seeder-report" aria-labelledby="report-heading" data-seed-report>
      <div class="seeder-report-header">
        <h2 id="report-heading">Laatste seedresultaat</h2>
        <form method="post" data-clear-report-form>
          {% csrf_token %}<input type="hidden" name="action" value="clear_report">
          <button class="button button-secondary" type="submit">Rapport wissen</button>
        </form>
      </div>
      <details data-report-details>
      <summary>Resultaten bekijken: {{ page_counts.created }} pagina's verwerkt, {{ page_counts.skipped }} met meldingen, {{ page_counts.failed }} mislukt{% if other_count %}; {{ other_count }} overige meldingen{% endif %}{% if duration is not None %} · {{ duration }} seconden{% endif %}</summary>
      {% for item in report %}{% if item.is_summary %}<p>{{ item.message }}</p>{% endif %}{% endfor %}
      <div class="seeder-toolbar">
        <label for="report-search">Zoek in resultaten<input id="report-search" type="search" data-report-search placeholder="Pagina, model of melding"></label>
        <label for="report-status">Status<select id="report-status" data-report-status>
          <option value="all">Alle statussen</option>
          <option value="failed">Mislukt</option>
          <option value="skipped">Met meldingen</option>
          <option value="created">Verwerkt</option>
        </select></label>
        <span data-report-count role="status"></span>
      </div>
      <div class="seeder-table-wrapper">
        <table class="listing seeder-table" data-report-table>
          <caption class="w-sr-only">Resultaten van de laatste seed</caption>
          <thead><tr>
            <th scope="col" data-sort-column="0" aria-sort="ascending"><button class="seeder-sort" type="button">Status</button></th>
            <th scope="col" data-sort-column="1" aria-sort="none"><button class="seeder-sort" type="button">Pagina</button></th>
            <th scope="col" data-sort-column="2" aria-sort="none"><button class="seeder-sort" type="button">Resultaat</button></th>
          </tr></thead>
          <tbody>{% for item in outcomes %}
            <tr data-status="{{ item.status }}" data-order="{{ forloop.counter0 }}" class="{% if item.status == 'failed' %}error{% elif item.status == 'skipped' %}warning{% endif %}">
              <td>{% if item.status == 'failed' %}Mislukt{% elif item.status == 'skipped' %}Met meldingen{% else %}Verwerkt{% endif %}</td>
              <td>{{ item.title }}{% if item.page_id %}<span class="seeder-page-model">{{ item.model }} · #{{ item.page_id }}</span>{% endif %}</td>
              <td><details><summary>{{ item.items|length }} melding(en)</summary><ul>
                {% for detail in item.items %}<li>{% if detail.status == 'failed' %}Mislukt{% elif detail.status == 'skipped' %}Overgeslagen{% else %}Verwerkt{% endif %} · {{ detail.model }}: {{ detail.message }}</li>{% endfor %}
              </ul></details></td>
            </tr>
          {% endfor %}</tbody>
        </table>
      </div>
      <p data-report-empty hidden>Geen resultaten voor deze zoekopdracht.</p>
      </details>
    </section>
  {% endif %}
  <section class="seeder-section" aria-labelledby="selected-heading">
    <h2 id="selected-heading">Geselecteerde paginatypen</h2>
    <p>Voegt voorbeeldpagina's toe voor de gekozen typen. Gebruik de zoekfunctie om een type te vinden.</p>
    <form method="post" data-seed-form data-selected-form>
      {% csrf_token %}<input type="hidden" name="action" value="selected">
      <div class="seeder-toolbar seeder-page-toolbar">
        <label for="page-search">Zoek paginatype<input id="page-search" type="search" data-page-search placeholder="Naam of model"></label>
        <button class="button button-secondary" type="button" data-select-visible>Selecteer zichtbare beschikbare typen</button>
        <button class="button button-secondary" type="button" data-clear-selection>Wis selectie</button>
      </div>
      <div class="seeder-actions"><span data-selection-count role="status">0 paginatypen geselecteerd</span><span data-page-count role="status"></span></div>
      <div class="seeder-table-wrapper">
        <table class="listing seeder-table seeder-page-table">
          <caption class="w-sr-only">Beschikbare paginatypen</caption>
          <thead><tr><th scope="col">Paginatype</th><th scope="col">Bestaand / maximum</th><th scope="col">Beschikbaarheid</th></tr></thead>
          <tbody>{% for model in page_models %}
            <tr data-page-row>
              <td><label class="seeder-page-option"><input type="checkbox" name="page_type" value="{{ model.label }}"{% if not model.can_seed %} disabled{% endif %}><span class="seeder-page-copy"><span class="seeder-page-name">{{ model.name }}</span><span class="seeder-page-model">{{ model.label }}</span></span></label></td>
              <td>{{ model.existing_count }} / {% if model.max_count is not None %}{{ model.max_count }}{% else %}onbeperkt{% endif %}</td>
              <td>{{ model.reason }}</td>
            </tr>
          {% endfor %}</tbody>
        </table>
      </div>
      <p data-page-empty hidden>Geen paginatypen voor deze zoekopdracht.</p>
      <div class="seeder-block-option">
        <label><input type="checkbox" name="all_block_types" value="yes"> Alle bloktypen vullen</label>
        <p>Probeert elk beschikbaar bloktype, ook in geneste blokken, binnen de toegestane aantallen.</p>
      </div>
      <div class="seeder-actions"><button class="button" type="submit">Geselecteerde typen seeden</button></div>
    </form>
  </section>
</div>
{% endblock %}