{% extends "base.html" %}

{% block title %}{{ page_title }}{% endblock %}
{% block meta_description %}{{ meta_description }}{% endblock %}

{% block content %}
<section class="list-hero">
  <div class="container">
    <div class="d-flex flex-column flex-lg-row justify-content-between gap-4 align-items-lg-end">
      <div>
        <span class="eyebrow">Searchable review queue</span>
        <h1>Active job offers</h1>
        <p class="lead">Filter normalized offers by keyword, source family, or contract type.</p>
      </div>
      <a class="btn btn-accent rounded-pill px-4" href="{% url 'job_create' %}">Add offer</a>
    </div>
    <form class="filter-bar glass-card mt-4" method="get" role="search">
      <div class="row g-3 align-items-end">
        <div class="col-lg-5">
          <label class="form-label" for="q">Keyword</label>
          <input class="form-control" id="q" type="search" name="q" value="{{ query }}" placeholder="Title, company, location…">
        </div>
        <div class="col-lg-3">
          <label class="form-label" for="contract">Contract</label>
          <select class="form-select" id="contract" name="contract">
            <option value="">All contracts</option>
            {% for value,label in contract_choices %}<option value="{{ value }}" {% if contract == value %}selected{% endif %}>{{ label }}</option>{% endfor %}
          </select>
        </div>
        <div class="col-lg-3">
          <label class="form-label" for="family">Source family</label>
          <select class="form-select" id="family" name="family">
            <option value="">All families</option>
            {% for value,label in family_choices %}<option value="{{ value }}" {% if family == value %}selected{% endif %}>{{ label }}</option>{% endfor %}
          </select>
        </div>
        <div class="col-lg-3">
          <label class="form-label" for="source_status">Source status</label>
          <select class="form-select" id="source_status" name="source_status">
            <option value="">Any status</option>
            {% for value,label in source_status_choices %}<option value="{{ value }}" {% if source_status == value %}selected{% endif %}>{{ label }}</option>{% endfor %}
          </select>
        </div>
        <div class="col-lg-3">
          <label class="form-label" for="sort">Sort</label>
          <select class="form-select" id="sort" name="sort">
            <option value="newest" {% if sort == "newest" %}selected{% endif %}>Newest</option>
            <option value="oldest" {% if sort == "oldest" %}selected{% endif %}>Oldest</option>
            <option value="company_az" {% if sort == "company_az" %}selected{% endif %}>Company A-Z</option>
            <option value="company_za" {% if sort == "company_za" %}selected{% endif %}>Company Z-A</option>
          </select>
        </div>
        <div class="col-lg-1 d-grid">
          <button class="btn btn-dark" type="submit">Go</button>
        </div>
        <div class="col-lg-12">
          <a class="small text-decoration-none" href="{% url 'job_list' %}">Clear filters</a>
        </div>
      </div>
    </form>
  </div>
</section>
<section class="section-pad pt-4">
  <div class="container">
    <p class="results-label">{{ result_count }} result{{ result_count|pluralize }} found</p>
    {% if jobs %}
    <div class="row g-4">
      {% for job in jobs %}
      <div class="col-md-6 col-xl-4">
        {% include "core/partials/job_card.html" with job=job %}
      </div>
      {% endfor %}
    </div>
    {% if jobs.has_other_pages %}
    <nav class="mt-4" aria-label="Jobs pagination">
      <ul class="pagination">
        {% if jobs.has_previous %}
          <li class="page-item"><a class="page-link" href="?{% if current_filters_qs %}{{ current_filters_qs }}&{% endif %}page={{ jobs.previous_page_number }}">Previous</a></li>
        {% endif %}
        <li class="page-item disabled"><span class="page-link">Page {{ jobs.number }} of {{ jobs.paginator.num_pages }}</span></li>
        {% if jobs.has_next %}
          <li class="page-item"><a class="page-link" href="?{% if current_filters_qs %}{{ current_filters_qs }}&{% endif %}page={{ jobs.next_page_number }}">Next</a></li>
        {% endif %}
      </ul>
    </nav>
    {% endif %}
    {% else %}
    <div class="empty-state">
      <div class="empty-orb"></div>
      <h2>No matching offers</h2>
      <p>Adjust filters or add the first offer from a registered source.</p>
      <a class="btn btn-accent rounded-pill px-4" href="{% url 'job_create' %}">Add offer</a>
    </div>
    {% endif %}
  </div>
</section>
{% endblock %}