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

{% block body %}
    <section class="d-flex gap-3 center ln-section--newsstand">
        <div class="container mt-5 mb-1">
            <h1>Your Reading Lists</h1>
            <p class="eyebrow">create and share curated reading lists</p>
        </div>
        <div class="cta-row mb-5">
            <a class="btn btn-primary" href="{{ path('read_wizard_setup') }}">Create new</a>
        </div>
    </section>

  {% 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('reading-list', { slug: item.slug }) }}">View</a>
                <span data-controller="copy-to-clipboard">
                  <span class="hidden" data-copy-to-clipboard-target="textToCopy">{{ absolute_url(path('reading-list', { 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 %}

{% endblock %}