{% extends "wagtailadmin/base.html" %}
{% load static i18n %}
{% block titletag %}{% translate "Content Builder" %}{% endblock %}
{% block extra_css %}
  {{ block.super }}
  <link rel="stylesheet" href="{% static 'wagtail_seeder/dashboard.css' %}">
{% endblock %}
{% block extra_js %}
  {{ block.super }}
  <script src="{% url 'wagtail_seeder_javascript_catalog' %}"></script>
  <script src="{% static 'wagtail_seeder/dashboard.js' %}" defer></script>
{% endblock %}
{% block content %}
{% translate "Content Builder" as seeder_title %}
{% include "wagtailadmin/shared/header.html" with title=seeder_title icon="pick" %}
<div class="nice-padding" data-seeder-dashboard>
  <p><strong>{% blocktranslate with environment=environment|upper %}Environment: {{ environment }}{% endblocktranslate %}</strong>. {% translate "Access requires an explicit Content Builder permission grant, including for superusers." %}</p>
  <p>{% translate "Allowed hosts:" %} {% if allowed_hostnames %}{{ allowed_hostnames|join:", " }}{% else %}{% translate "all hosts" %}{% endif %}.</p>
  <noscript><p>{% translate "Enable JavaScript for the loading bar, search and selection. The forms for generating pages remain available." %}</p></noscript>
  <div class="seeder-busy" data-seed-busy hidden tabindex="-1">
    <p role="status">{% translate "Generating sample content. This may take a while; please wait for the result." %}</p>
    <div class="seeder-progress" role="progressbar" aria-label="{% translate "Generation in progress" %}"></div>
    <p data-seed-elapsed>{% translate "0 seconds elapsed" %}</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">{% translate "Latest generation result" %}</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">{% translate "Clear report" %}</button>
        </form>
      </div>
      <details data-report-details>
      <summary>{% blocktranslate with created=page_counts.created skipped=page_counts.skipped failed=page_counts.failed %}View results: {{ created }} processed pages, {{ skipped }} with notes, {{ failed }} failed{% endblocktranslate %}{% if other_count %}; {% blocktranslate count count=other_count %}{{ count }} other message{% plural %}{{ count }} other messages{% endblocktranslate %}{% endif %}{% if duration is not None %} · {{ duration }} s{% endif %}</summary>
      {% for item in report %}{% if item.is_summary %}<p>{% if item.user_message %}{{ item.user_message }}{% else %}{% translate "See below which items were processed, skipped or failed." %}{% endif %}</p>{% endif %}{% endfor %}
      <div class="seeder-toolbar">
        <label for="report-search">{% translate "Search results" %}<input id="report-search" type="search" data-report-search placeholder="{% translate "Page, model or message" %}"></label>
        <label for="report-status">{% translate "Status" %}<select id="report-status" data-report-status>
          <option value="all">{% translate "All statuses" %}</option>
          <option value="failed">{% translate "Failed" %}</option>
          <option value="skipped">{% translate "With notes" %}</option>
          <option value="created">{% translate "Processed" %}</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">{% translate "Results of the latest generation" %}</caption>
          <thead><tr>
            <th scope="col" data-sort-column="0" aria-sort="ascending"><button class="seeder-sort" type="button">{% translate "Status" %}</button></th>
            <th scope="col" data-sort-column="1" aria-sort="none"><button class="seeder-sort" type="button">{% translate "Page" %}</button></th>
            <th scope="col" data-sort-column="2" aria-sort="none"><button class="seeder-sort" type="button">{% translate "Result" %}</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' %}{% translate "Failed" %}{% elif item.status == 'skipped' %}{% translate "With notes" %}{% else %}{% translate "Processed" %}{% endif %}</td>
              <td>{{ item.title }}{% if item.page_id %}<span class="seeder-page-model">{{ item.model }} · #{{ item.page_id }}</span>{% endif %}
                {% if item.page_url %}<a href="{{ item.page_url }}" target="_blank" rel="noopener">{% translate "Open page" %}<span class="w-sr-only">: {{ item.title }} ({% translate "new tab" %})</span></a>{% endif %}
                {% if item.edit_url %}<a href="{{ item.edit_url }}">{% translate "Edit" %}<span class="w-sr-only">: {{ item.title }}</span></a>{% endif %}
              </td>
              <td><details><summary>{% blocktranslate count count=item.items|length %}{{ count }} message{% plural %}{{ count }} messages{% endblocktranslate %}</summary><ul>
                {% for detail in item.items %}<li>
                  {% if detail.user_message %}{{ detail.user_message }}{% elif detail.status == 'failed' %}{% translate "This item could not be processed. See the technical details for the cause." %}{% elif detail.status == 'skipped' %}{% translate "This item was skipped. See the technical details for the reason." %}{% else %}{% translate "Sample content created or updated." %}{% endif %}
                  <details><summary>{% translate "Technical details" %}</summary><p>{{ detail.model }}: {{ detail.message }}</p></details>
                </li>{% endfor %}
              </ul></details></td>
            </tr>
          {% endfor %}</tbody>
        </table>
      </div>
      <p data-report-empty hidden>{% translate "No results for this search." %}</p>
      </details>
    </section>
  {% endif %}
  <section class="seeder-section" aria-labelledby="selected-heading">
    <h2 id="selected-heading">{% translate "Selected page types" %}</h2>
    <p>{% translate "Creates a new sample page for each selected type within the selected subsite. Previously created pages are preserved." %}</p>
    <form method="get" class="seeder-toolbar" data-site-form>
      <label for="{{ site_form.site_id.id_for_label }}">{% translate "Subsite" %}{{ site_form.site_id }}</label>
      {{ site_form.site_id.errors }}
      <button class="button button-secondary" type="submit">{% translate "Show page types" %}</button>
    </form>
    {% if not has_sites %}<p>{% translate "No sites are available yet. Create a site in Wagtail before generating pages here." %}</p>{% elif not selected_site %}<p>{% translate "Choose a subsite first to view the available page types." %}</p>{% endif %}
    <form method="post" data-seed-form data-selected-form>
      {% csrf_token %}<input type="hidden" name="action" value="selected">
      <input type="hidden" name="site_id" value="{{ selected_site.pk|default:'' }}">
      <div class="seeder-toolbar seeder-page-toolbar">
        <label for="page-search">{% translate "Search page types" %}<input id="page-search" type="search" data-page-search placeholder="{% translate "Name or model" %}"></label>
        <button class="button button-secondary" type="button" data-select-visible>{% translate "Select visible available types" %}</button>
        <button class="button button-secondary" type="button" data-clear-selection>{% translate "Clear selection" %}</button>
      </div>
      <div class="seeder-actions"><span data-selection-count role="status">{% translate "0 page types selected" %}</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">{% translate "Available page types" %}</caption>
          <thead><tr><th scope="col">{% translate "Page type" %}</th><th scope="col">{% translate "Existing / maximum" %}</th><th scope="col">{% translate "Availability" %}</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 %}{% translate "unlimited" %}{% endif %}</td>
              <td>{{ model.reason }}</td>
            </tr>
          {% endfor %}</tbody>
        </table>
      </div>
      <p data-page-empty hidden>{% translate "No page types for this search." %}</p>
      <div class="seeder-block-option">
        <label><input type="checkbox" name="all_block_types" value="yes"> {% translate "Populate all block types" %}</label>
        <p>{% translate "Tries every available block type, including nested blocks, within the allowed counts." %}</p>
      </div>
      <div class="seeder-actions"><button class="button" type="submit"{% if not selected_site %} disabled{% endif %}>{% translate "Generate pages" %}</button></div>
    </form>
  </section>
</div>
{% endblock %}