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

{% block content %}
  <div class="container">
    <h1>Normals</h1>
    {% help "Help" %}
      <p>This page lists all normal cases available in the atlas.</p>
      <p>You can use the filter form to narrow down the list based on criteria such as age, modality, or examination type.</p>
      <p>Click on a case title to view the case.</p>

      <p>See a case that isn't normal? Please add feedback to the case so it can be reviewed.</p>

    {% endhelp%}

    <div class="row mb-3">
      <div class="col-12">
        <form method="get" class="form-inline">
          {% crispy filter.form %}
          <div class="mb-2 d-flex flex-wrap gap-2 align-items-center">
            <label class="mb-0" for="id_sort">Sort by</label>
            <select class="form-select w-auto" id="id_sort" name="sort">
              {% for value, label in sort_choices %}
                <option value="{{ value }}" {% if selected_sort == value %}selected{% endif %}>{{ label }}</option>
              {% endfor %}
            </select>
            <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="mb-2">
        <span class="text-muted me-2">Quick sort:</span>
        {% for value, label in sort_choices %}
          {% if selected_sort == value %}
            <span class="badge text-bg-primary">{{ label }}</span>
          {% else %}
            <a class="badge text-bg-light text-decoration-none" href="?{% if querystring_without_page_sort %}{{ querystring_without_page_sort }}&amp;{% endif %}sort={{ value }}">{{ label }}</a>
          {% endif %}
        {% endfor %}
      </div>
      <div class="list-group">
        {% for normal in page_obj.object_list %}
          <div class="list-group-item d-flex justify-content-between align-items-start">
            <a class="flex-grow-1 text-decoration-none text-reset" 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>
            <div class="ms-2">
              {% if request.user.is_superuser or request.user in normal.author.all %}
                <button class="btn btn-sm btn-outline-secondary"
                        hx-get="{% url 'atlas:case_normal_edit' normal.pk %}"
                        hx-target="body"
                        hx-swap="beforeend">
                  Edit
                </button>
              {% endif %}
            </div>
          </div>
        {% 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="?{% if querystring_without_page %}{{ querystring_without_page }}&amp;{% endif %}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="?{% if querystring_without_page %}{{ querystring_without_page }}&amp;{% endif %}page={{ page_obj.next_page_number }}">Next</a></li>
        {% endif %}
      </ul>
    </nav>
  </div>
{% endblock %}

{% block css %}{% endblock %}