{% extends 'base.html.twig' %}

{% block body %}
  <h1>Your Reading Lists</h1>
  <p>Create and share curated reading lists.</p>

  {% if lists is defined and lists|length %}
    <ul class="list-unstyled d-grid gap-2 mb-4">
      {% for item in lists %}
        <li class="card p-3">
          <div class="d-flex justify-content-between align-items-start gap-3">
            <div class="flex-fill">
              <h3 class="h5 m-0">{{ item.title }}</h3>
              {% if item.summary %}<p class="small mt-1 mb-0">{{ item.summary }}</p>{% endif %}
              <small class="text-muted">slug: {{ item.slug ?: '—' }} • created: {{ item.createdAt|date('Y-m-d H:i') }}</small>
            </div>
            <div class="d-flex flex-row gap-2">
              <a class="btn btn-sm btn-primary" href="{{ path('reading_list_compose') }}">Open Composer</a>
              {% if item.slug %}
                <a class="btn btn-sm btn-outline-primary" href="{{ path('magazine-category', { slug: item.slug }) }}">View</a>
                <span data-controller="copy-to-clipboard">
                  <span class="hidden" data-copy-to-clipboard-target="textToCopy">{{ absolute_url(path('magazine-category', { slug: item.slug })) }}</span>
                  <button class="btn btn-sm btn-secondary"
                          data-copy-to-clipboard-target="copyButton"
                          data-action="click->copy-to-clipboard#copyToClipboard">Copy link</button>
                </span>
              {% endif %}
            </div>
          </div>
        </li>
      {% endfor %}
    </ul>
  {% else %}
    <p><small>No reading lists found.</small></p>
  {% endif %}

  <div class="d-flex flex-row gap-2">
    <a class="btn btn-primary" href="{{ path('read_wizard_setup') }}">Create a Reading List</a>
  </div>
{% endblock %}