{% extends "base.html" %}
{% block title %}Quarantine{% endblock %}

{% block content %}
<div class="d-flex align-items-center justify-content-between mb-3">
  <h4 class="fw-bold mb-0"><i class="bi bi-inbox me-2 text-primary"></i>Quarantine</h4>
  <a href="{{ url_for('quarantine.list_view') }}" class="btn btn-outline-secondary btn-sm">
    <i class="bi bi-collection me-1"></i>All Messages
  </a>
</div>

<div class="row justify-content-center">
  <div class="col-12 col-md-8 col-lg-5">
    <div class="card border-0 shadow-sm">
      <div class="card-header bg-dark text-white fw-semibold">
        <i class="bi bi-calendar3 me-2"></i>Messages by Date
      </div>
      <div class="list-group list-group-flush">
        {% if quarantine_days is defined and quarantine_days %}
          {% for day in quarantine_days %}
          <a href="{{ url_for('quarantine.day_view', date_str=day.date_str) }}"
             class="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-2">
            <span class="fw-semibold">{{ day.label }}</span>
            {% if day.count > 0 %}
              <span class="badge bg-primary rounded-pill">{{ day.count }}</span>
            {% else %}
              <span class="text-muted small">no messages</span>
            {% endif %}
          </a>
          {% endfor %}
        {% else %}
          <div class="list-group-item text-muted text-center py-4">
            <i class="bi bi-inbox fs-3 d-block mb-2"></i>No quarantine data available.
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}