{% comment %}Partial listing of a user's collections for HTMX swaps{% endcomment %}

<div class="card mb-3">
  <div class="card-body">
    <h5 class="card-title">Your collections</h5>

    <h6 class="mt-3">Available to start</h6>
    <ul class="list-group list-group-sm mb-3">
      {% for collection in available_collections %}
        <li class="list-group-item d-flex justify-content-between align-items-center {% if collection.is_hidden %}opacity-50 bg-secondary bg-opacity-10{% endif %}">
          <div>
            <a href="{% url 'atlas:collection_take_start' collection.pk %}">{{ collection.name }}</a>
            {% if collection.description %}<small class="text-muted"> — {{ collection.description }}</small>{% endif %}
            {% if collection.is_hidden %}<span class="badge bg-warning text-dark ms-2">Hidden</span>{% endif %}
          </div>
          <form method="post" action="{% url 'generic:toggle_hide_item' %}" hx-post="{% url 'generic:toggle_hide_item' %}" class="d-inline">
            {% csrf_token %}
            <input type="hidden" name="content_type_id" value="{{ collection.content_type_id }}">
            <input type="hidden" name="object_id" value="{{ collection.pk }}">
            <button type="submit" class="btn btn-sm btn-link text-muted p-0" title="{% if collection.is_hidden %}Unhide collection{% else %}Hide collection{% endif %}">
              <i class="bi {% if collection.is_hidden %}bi-eye-slash-fill text-warning{% else %}bi-eye{% endif %}" style="font-size: 1.15rem;"></i>
            </button>
          </form>
        </li>
      {% empty %}
        <li class="list-group-item text-muted">No collections available to start.</li>
      {% endfor %}
    </ul>

    <h6 class="mt-3">In progress</h6>
    <ul class="list-group list-group-sm mb-3">
      {% for collection in in_progress_collections %}
        <li class="list-group-item d-flex justify-content-between align-items-center {% if collection.is_hidden %}opacity-50 bg-secondary bg-opacity-10{% endif %}">
          <div>
            <a href="{% url 'atlas:collection_take_start' collection.pk %}">{{ collection.name }}</a>
            <span class="badge bg-warning text-dark ms-2">In progress</span>
            {% if collection.description %}<small class="text-muted"> — {{ collection.description }}</small>{% endif %}
            {% if collection.is_hidden %}<span class="badge bg-warning text-dark ms-2">Hidden</span>{% endif %}
          </div>
          <form method="post" action="{% url 'generic:toggle_hide_item' %}" hx-post="{% url 'generic:toggle_hide_item' %}" class="d-inline">
            {% csrf_token %}
            <input type="hidden" name="content_type_id" value="{{ collection.content_type_id }}">
            <input type="hidden" name="object_id" value="{{ collection.pk }}">
            <button type="submit" class="btn btn-sm btn-link text-muted p-0" title="{% if collection.is_hidden %}Unhide collection{% else %}Hide collection{% endif %}">
              <i class="bi {% if collection.is_hidden %}bi-eye-slash-fill text-warning{% else %}bi-eye{% endif %}" style="font-size: 1.15rem;"></i>
            </button>
          </form>
        </li>
      {% empty %}
        <li class="list-group-item text-muted">No in-progress collections.</li>
      {% endfor %}
    </ul>

    <h6 class="mt-3">Finished</h6>
    <ul class="list-group list-group-sm">
      {% for collection in finished_collections %}
        <li class="list-group-item d-flex justify-content-between align-items-center {% if collection.is_hidden %}opacity-50 bg-secondary bg-opacity-10{% endif %}">
          <div>
            <a href="{% url 'atlas:collection_take_start' collection.pk %}">{{ collection.name }}</a>
            <span class="badge bg-success ms-2">Completed</span>
            {% if collection.description %}<small class="text-muted"> — {{ collection.description }}</small>{% endif %}
            {% if collection.is_hidden %}<span class="badge bg-warning text-dark ms-2">Hidden</span>{% endif %}
          </div>
          <form method="post" action="{% url 'generic:toggle_hide_item' %}" hx-post="{% url 'generic:toggle_hide_item' %}" class="d-inline">
            {% csrf_token %}
            <input type="hidden" name="content_type_id" value="{{ collection.content_type_id }}">
            <input type="hidden" name="object_id" value="{{ collection.pk }}">
            <button type="submit" class="btn btn-sm btn-link text-muted p-0" title="{% if collection.is_hidden %}Unhide collection{% else %}Hide collection{% endif %}">
              <i class="bi {% if collection.is_hidden %}bi-eye-slash-fill text-warning{% else %}bi-eye{% endif %}" style="font-size: 1.15rem;"></i>
            </button>
          </form>
        </li>
      {% empty %}
        <li class="list-group-item text-muted">No finished collections.</li>
      {% endfor %}
    </ul>

  </div>
</div>