{% extends "base.html" %}
{% block content %}
  <main id="home" hx-get="{{ url_for('show_home') }}" hx-trigger="every 2s" hx-select="#home" hx-swap="morph">
    {% 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">
        {% for section in view.sections %}
          <section class="panel" aria-labelledby="{{ section.heading }}-heading">
            <h1 id="{{ section.heading }}-heading">{{ section.heading|capitalize }}</h1>
            {% for card in section.active %}
              {% include "partials/agent-work-card.html" %}
            {% 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 %}