{% 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" aria-labelledby="report-heading">
      <h2 id="report-heading">Laatste seedresultaat</h2>
      <div class="seeder-summary">
        <span>{{ counts.failed }} mislukt</span>
        <span>{{ counts.skipped }} overgeslagen</span>
        <span>{{ counts.created }} aangemaakt of verwerkt</span>
        {% if duration is not None %}<span>Duur: {{ duration }} seconden</span>{% endif %}
      </div>
      {% 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="Model, status 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">Overgeslagen</option>
          <option value="created">Aangemaakt</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">Model</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' %}Overgeslagen{% else %}Aangemaakt{% endif %}</td>
              <td>{{ item.model }}</td><td>{{ item.message }}</td>
            </tr>
          {% endfor %}</tbody>
        </table>
      </div>
      <p data-report-empty hidden>Geen resultaten voor deze zoekopdracht.</p>
    </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-actions"><button class="button" type="submit">Geselecteerde typen seeden</button></div>
    </form>
  </section>
  <section class="seeder-section" aria-labelledby="full-heading">
    <h2 id="full-heading">Volledige seeder</h2>
    <p>Vervangt alle Sites en pagina's onder de Wagtail-root door voorbeelddata.</p>
    <form method="post" data-seed-form>
      {% csrf_token %}<input type="hidden" name="action" value="full">
      <label><input type="checkbox" name="confirm" value="yes" required> Ik begrijp dat bestaande pagina's en Sites worden verwijderd.</label>
      <div class="seeder-actions"><button class="button" type="submit">Volledig seeden</button></div>
    </form>
  </section>
</div>
{% endblock %}