{% extends "atlas/base.html" %}
{% load static %}
{% load crispy_forms_tags %}

{% block content %}
  <div class="container">
    <h1>Normals</h1>

    <div class="row mb-3">
      <div class="col-md-4">
        <form method="get" class="form-inline">
          {% for field in filter.form.visible_fields %}
            <div class="mb-2">
              {{ field.label_tag }}
              {{ field }}
            </div>
          {% endfor %}
          <div class="mb-2">
            <button class="btn btn-primary" type="submit">Filter</button>
            <a class="btn btn-link" href="?">Clear</a>
          </div>
        </form>
      </div>
    </div>

    {% if page_obj.object_list %}
      <div class="list-group">
        {% for normal in page_obj.object_list %}
          <a class="list-group-item list-group-item-action" href="{% url 'atlas:case_detail' normal.case.pk %}">
            <div class="d-flex w-100 justify-content-between">
              <h5 class="mb-1">{{ normal.case.title }}</h5>
              <small class="text-muted">{{ normal.added_date|date:"Y-m-d" }}</small>
            </div>
            <p class="mb-1">
              Age: {{ normal.display_age }}
              {% if normal.examination %} • Exam: {{ normal.examination }}{% endif %}
              {% if normal.modality %} • Modality: {{ normal.modality }}{% endif %}
            </p>
            {% if normal.notes %}
              <p class="mb-0 text-muted">{{ normal.notes }}</p>
            {% endif %}
          </a>
        {% endfor %}
      </div>
    {% else %}
      <div class="list-group-item">No normal cases found.</div>
    {% endif %}

    <nav aria-label="Page navigation">
      <ul class="pagination mt-3">
        {% if page_obj.has_previous %}
          <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a></li>
        {% endif %}
        <li class="page-item disabled"><span class="page-link">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span></li>
        {% if page_obj.has_next %}
          <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a></li>
        {% endif %}
      </ul>
    </nav>
  </div>
{% endblock %}