{% extends 'core/base.html' %}
{% load i18n markdown_extras %}
{% block content %}
<article class="collection-document">
  <header class="mb-5">
    <div class="d-flex justify-content-between align-items-start gap-3">
      <div>
        <a class="btn btn-sm btn-outline-secondary mb-3" href="{% if user.is_authenticated %}{% url 'collection_list' %}{% else %}/{% endif %}">← {% if user.is_authenticated %}{% trans "Collections" %}{% else %}Start{% endif %}</a>
        <h1 class="display-5 mb-3">{{ collection.title }}</h1>
        <div class="d-flex flex-wrap gap-2 align-items-center">
          {% if collection.mode != 'manual' %}<span class="badge text-bg-info">{{ collection.get_mode_display }}</span>{% endif %}
          {% if collection.team %}<span class="badge text-bg-warning">{{ collection.team.name }}</span>{% else %}<span class="badge text-bg-light">{{ collection.get_visibility_display }}</span>{% endif %}
          {% for tag in collection.filter_tags.all %}<span class="badge rounded-pill text-bg-light">#{{ tag.name }}</span>{% endfor %}
        </div>
      </div>
      <div class="d-flex gap-2">
        <a class="btn btn-outline-secondary" href="{% url 'collection_export' collection.id %}" hx-boost="false">{% trans "Export" %}</a>
        {% if can_edit %}<a class="btn btn-dark" href="{% if collection.mode == 'tags' %}{% url 'collection_edit' collection.id %}{% else %}{% url 'collection_manage' collection.id %}{% endif %}">{% trans "Edit collection" %}</a>{% endif %}
      </div>
    </div>
    {% if collection.description %}<div class="content lead mt-4">{{ collection.description|markdown }}</div>{% endif %}
  </header>

  {% if sections or tag_items %}
    <nav class="collection-toc mb-5" aria-label="{% trans 'Contents' %}">
      <div class="small fw-semibold text-uppercase text-muted mb-2">{% trans "Contents" %}</div>
      <ol class="mb-0">{% if collection.mode == 'tags' %}{% for item in tag_items %}<li><a href="#item-{{ item.id }}">{{ item.content|markdown_title|truncatechars:90 }}</a></li>{% endfor %}{% else %}{% include 'core/_collection_toc_items.html' with sections=sections %}{% endif %}</ol>
    </nav>
  {% endif %}

  <div class="collection-flow content">
    {% if collection.mode == 'tags' %}
      {% for item in tag_items %}<section id="item-{{ item.id }}" class="collection-flow-section{% if item.kind == 'todo' %} d-flex gap-3 align-items-start{% endif %}">{% if item.kind == 'todo' %}<form method="post" action="{% url 'toggle_done' item.id %}" hx-boost="false" class="pt-1">{% csrf_token %}<input type="hidden" name="next" value="{{ request.get_full_path }}#item-{{ item.id }}"><input class="form-check-input" type="checkbox" {% if item.is_done %}checked{% endif %} {% if item.can_toggle_done %}onchange="this.form.submit()"{% else %}disabled{% endif %} aria-label="{% trans 'Done' %}"></form><div class="flex-grow-1 {% if item.is_done %}text-decoration-line-through text-muted{% endif %}">{% endif %}{{ item|collection_item_markdown }}{% if item.comment %}<div class="text-muted border-start ps-3 mt-3">{{ item.comment|markdown }}</div>{% endif %}{% if item.kind == 'todo' %}</div>{% endif %}</section>{% empty %}<div class="text-center text-muted py-5">{% trans "No entries match the selected tags and types yet." %}</div>{% endfor %}
    {% else %}
      {% for section in sections %}{% include 'core/_collection_section_read.html' with section=section %}{% empty %}<div class="text-center text-muted py-5">{% trans "This collection has no sections yet." %}</div>{% endfor %}
    {% endif %}
  </div>
</article>
{% endblock %}