{% extends "base.html" %}
{% block content %}
  <main id="home" hx-get="{{ url_for('show_home') }}" hx-trigger="every 2s" hx-select="#home" hx-swap="morph" data-refresh-alert="home-refresh-error">
    {% include "partials/site-header.html" %}
    <div class="home-content">
      <p id="home-refresh-error" class="refresh-error" role="alert" hidden></p>
      {% include "partials/instance.html" %}
      <div class="dashboard">
        {% if view.sections %}
          <div class="work-tabs" role="tablist" aria-label="Agent work">
            {% for section in view.sections %}
              <button id="{{ section.kind }}-tab" class="work-tab" type="button" role="tab" aria-selected="{{ 'true' if loop.first else 'false' }}" aria-controls="{{ section.kind }}-panel">{{ section.heading|capitalize }}</button>
            {% endfor %}
          </div>
        {% endif %}
        {% for section in view.sections %}
          <section id="{{ section.kind }}-panel" class="panel work-tab-panel" role="tabpanel" aria-labelledby="{{ section.kind }}-tab">
            {% for card in section.active %}
              {% if card.child_overview is none %}{% include "partials/agent-work-card.html" %}{% else %}{% include "partials/campaign.html" %}{% endif %}
            {% endfor %}
            {% for request in section.requests %}
              {% include "partials/request-row.html" %}
            {% endfor %}
            {% if section.empty_message %}<p class="empty">{{ section.empty_message }}</p>{% endif %}
            {% if section.ended %}
              <details class="ended-work">
                <summary>+ {{ section.ended|length }} ended</summary>
                {%- for card in section.ended %}
                  {% include "partials/agent-work-card.html" %}
                {%- endfor %}
              </details>
            {% endif %}
          </section>
        {% endfor %}
      </div>
    </div>
  </main>
  <script src="{{ url_for('static', filename='home.js') }}"></script>
{% endblock %}