{% extends 'atlas/base.html' %}

{% block content %}
  <div class="container">
    <h2>Search Cases</h2>

    <form method="get" class="row g-2 mb-3" id="case-search-form">
      <div class="col-md-6">
        <input type="search" name="q" value="{{ q }}" class="form-control" placeholder="Search cases...">
      </div>
      <div class="col-md-2">
        <select name="field" class="form-select">
          <option value="all" {% if field == 'all' %}selected{% endif %}>All fields</option>
          <option value="title" {% if field == 'title' %}selected{% endif %}>Title</option>
          <option value="description" {% if field == 'description' %}selected{% endif %}>Description</option>
          <option value="history" {% if field == 'history' %}selected{% endif %}>History</option>
          <option value="author" {% if field == 'author' %}selected{% endif %}>Author</option>
        </select>
      </div>

      <div class="col-md-2">
        <select name="subspecialty" class="form-select">
          <option value="">Any subspecialty</option>
          {% for s in subspecialty_queryset %}
            <option value="{{ s.pk }}" {% if selected_subspecialty and selected_subspecialty|stringformat:"s" == s.pk|stringformat:"s" %}selected{% endif %}>{{ s.name }}</option>
          {% endfor %}
        </select>
      </div>

      <div class="col-md-2 d-flex gap-2">
        <label class="form-check-label me-2"><input type="checkbox" name="my" value="1" class="form-check-input" {% if my %}checked{% endif %}> My cases</label>
        <label class="form-check-label me-2"><input type="checkbox" name="open" value="1" class="form-check-input" {% if open %}checked{% endif %}> Open access</label>
        <label class="form-check-label"><input type="checkbox" name="has_images" value="1" class="form-check-input" {% if has_images %}checked{% endif %}> Has images</label>
      </div>

      <div class="col-12">
        <button type="submit" class="btn btn-primary">Search</button>
        <a href="{% url 'atlas:case_search_page' %}" class="btn btn-outline-secondary ms-2">Clear</a>
      </div>
    </form>

    <div id="case-search-results">
      {% include 'atlas/partials/case_search_results.html' with cases=cases recent_cases=recent_cases collection=None q=q %}

    {# pagination controls #}
      {% if cases.has_other_pages %}
        <nav aria-label="Case results pagination">
          <ul class="pagination mt-3">
            {% if cases.has_previous %}
              <li class="page-item"><a class="page-link" href="?{% if q %}q={{ q|urlencode }}&amp;{% endif %}{% if field %}field={{ field }}&amp;{% endif %}{% if my %}my=1&amp;{% endif %}{% if open %}open=1&amp;{% endif %}{% if has_images %}has_images=1&amp;{% endif %}{% if selected_subspecialty %}subspecialty={{ selected_subspecialty }}&amp;{% endif %}page={{ cases.previous_page_number }}">Previous</a></li>
            {% else %}
              <li class="page-item disabled"><span class="page-link">Previous</span></li>
            {% endif %}

            <li class="page-item disabled"><span class="page-link">Page {{ cases.number }} of {{ cases.paginator.num_pages }}</span></li>

            {% if cases.has_next %}
              <li class="page-item"><a class="page-link" href="?{% if q %}q={{ q|urlencode }}&amp;{% endif %}{% if field %}field={{ field }}&amp;{% endif %}{% if my %}my=1&amp;{% endif %}{% if open %}open=1&amp;{% endif %}{% if has_images %}has_images=1&amp;{% endif %}{% if selected_subspecialty %}subspecialty={{ selected_subspecialty }}&amp;{% endif %}page={{ cases.next_page_number }}">Next</a></li>
            {% else %}
              <li class="page-item disabled"><span class="page-link">Next</span></li>
            {% endif %}
          </ul>
        </nav>
      {% endif %}
    </div>
  </div>
{% endblock %}