{% extends "layout.html" %} {% block content %}

<div class="dashboard-container">
  <!-- =======================================================================
     File: templates/dashboard/dashboard.html
     Purpose:
        Functioneel dashboard:
          • Start nieuwe scrape via URL input component
          • Toont lijst van actieve boeken (actieve state model)
          • Toont globale live logs
        Vereist:
          - books: lijst van actieve boeken
          - logs: lijst van globale logs (optioneel)
     ======================================================================= -->
  <!-- ===========================================================
       URL INPUT — Start nieuwe scrape
       =========================================================== -->
  <section class="dashboard-section">
    <h2>Start nieuwe scrape</h2>
    {% include "components/url_input.html" %}
  </section>

  <hr />

  {% include "components/registered_books.html" %}

  <hr />
  <!-- ===========================================================
       BOOK LIST
       =========================================================== -->
  <section class="dashboard-section">
    <h2>Actieve boeken</h2>

    {% if books and books|length > 0 %}
    <div id="book-list" class="book-list">
      {% for book in books %} {% include "components/book_list_item.html" %} {%
      endfor %}
    </div>
    {% else %}
    <div id="book-list" class="book-list-empty">Geen actieve boeken.</div>
    {% endif %}
  </section>

  <hr />

  <!-- ===========================================================
       GLOBAL LIVE LOG VIEW
       =========================================================== -->
  <section class="dashboard-section">
    <h2>Live log (globaal)</h2>

    {# log_view verwacht altijd 'logs' — garandeer list #} {% set logs = logs or
    [] %} {% include "components/log_view.html" %}
  </section>
</div>

<!-- JS -->
<script src="/static/js/dashboard.js"></script>

{% endblock %}