{% extends 'home/base.html' %}
{% load humanize %}

{% block title %}Find Jobs – PEZAJOB{% endblock %}

{% block extra_css %}
<style>
  .jobs-layout { display: grid; grid-template-columns: 270px 1fr; gap: 28px; align-items: start; }
  .filter-sidebar {
    background: var(--white); border: 1px solid var(--border); border-radius: 18px;
    padding: 24px; position: sticky; top: 88px;
    box-shadow: 0 4px 24px rgba(44,62,80,0.06);
  }
  .filter-sidebar h3 {
    font-family: var(--font-display); font-size: 1rem; font-weight: 700;
    color: var(--primary); margin-bottom: 20px;
    display: flex; align-items: center;
  }
  .filter-section { margin-bottom: 22px; border-bottom: 1px solid var(--bg); padding-bottom: 22px; }
  .filter-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
  .filter-section h4 {
    font-size: 0.78rem; font-weight: 700; color: var(--primary);
    margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.6px;
  }
  .filter-check { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; cursor: pointer; }
  .filter-check input[type=checkbox] { accent-color: var(--primary); width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }
  .filter-check label { font-size: 0.84rem; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: space-between; width: 100%; }
  .filter-check-count { background: var(--bg); color: var(--text-muted); font-size: 0.7rem; padding: 2px 7px; border-radius: 10px; }
  .jobs-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
  .jobs-count { font-size: 0.88rem; color: var(--text-light); }
  .jobs-count strong { color: var(--primary); font-weight: 700; }
  .sort-select, .filter-select {
    padding: 9px 14px; border: 1.5px solid var(--border); border-radius: 10px;
    font-size: 0.84rem; cursor: pointer; background: var(--white);
    color: var(--primary); font-weight: 600; width: 100%;
  }
  .filter-hint {
    font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; margin-bottom: 10px;
  }
  .active-filters {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; align-items: center;
  }
  .active-filter-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
    padding: 6px 12px; font-size: 0.8rem; color: var(--primary); font-weight: 600;
  }
  .recommended-strip {
    background: linear-gradient(135deg, #f0f7ff, #f8fbff);
    border: 1px solid #dbeafe; border-radius: 16px; padding: 20px 22px; margin-bottom: 20px;
  }
  .recommended-strip h3 {
    font-size: 0.95rem; color: var(--primary); margin: 0 0 6px;
    display: flex; align-items: center; gap: 8px;
  }
  .recommended-strip p { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 14px; }
  .recommended-links { display: flex; flex-wrap: wrap; gap: 8px; }
  .recommended-links a {
    text-decoration: none; font-size: 0.82rem; font-weight: 700; color: var(--secondary);
    padding: 8px 12px; background: var(--white); border: 1px solid var(--border); border-radius: 10px;
  }
  .search-bar-top {
    background: var(--white); border: 1px solid var(--border); border-radius: 16px;
    padding: 14px 18px; margin-bottom: 20px; display: flex; gap: 12px;
    box-shadow: 0 2px 12px rgba(44,62,80,0.05);
  }
  .search-bar-top input {
    flex: 1; border: 1.5px solid var(--border); border-radius: 10px;
    padding: 10px 16px; font-size: 0.9rem;
  }
  .search-bar-top input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(44,62,80,0.06); }
  .jobs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .job-card--list {
    background: var(--white); border-radius: 18px; border: 1px solid var(--border);
    padding: 0; overflow: hidden; display: flex; flex-direction: column;
    box-shadow: 0 2px 12px rgba(44,62,80,0.06); transition: transform 0.25s, box-shadow 0.25s;
  }
  .job-card--list:hover { transform: translateY(-5px); box-shadow: 0 16px 48px rgba(44,62,80,0.13); }
  .job-card-body { padding: 22px 22px 0; flex: 1; }
  .job-card--list .job-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 22px; margin-top: 16px; border-top: 1px solid var(--border-light);
    background: var(--bg); border-radius: 0 0 18px 18px;
  }
  .empty-state {
    grid-column: 1 / -1; text-align: center; padding: 60px 24px;
    background: var(--white); border: 1px solid var(--border); border-radius: 18px;
  }
  @media (max-width: 900px) {
    .jobs-layout { grid-template-columns: 1fr; }
    .filter-sidebar { position: static; }
  }
  @media (max-width: 640px) {
    .jobs-grid { grid-template-columns: 1fr; }
    .search-bar-top { flex-direction: column; }
  }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
  <div class="container page-header-content">
    <h1>Browse All Jobs</h1>
    <p>Search by job title, skill, keyword or company - then narrow results with optional filters</p>
    <div class="breadcrumb"><a href="{% url 'home:index' %}">Home</a><span>/</span><span>Jobs</span></div>
  </div>
</div>

<section class="section" style="padding:48px 0">
  <div class="container">
    <form method="get" class="search-bar-top">
      <div style="position:relative;flex:2">
        <i class="fas fa-search" style="position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--secondary);z-index:1"></i>
        <input type="text" name="q" value="{{ form.q.value|default:'' }}" placeholder="Job title, skill, keyword or company..." style="padding-left:40px;width:100%;border:1.5px solid var(--border);border-radius:10px;padding-top:10px;padding-bottom:10px;padding-right:16px;font-size:0.9rem;">
      </div>
      <div style="position:relative;flex:1">
        <i class="fas fa-map-marker-alt" style="position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--secondary);z-index:1"></i>
        <input type="text" name="location" value="{{ form.location.value|default:'' }}" placeholder="Location..." style="padding-left:40px;width:100%;border:1.5px solid var(--border);border-radius:10px;padding-top:10px;padding-bottom:10px;padding-right:16px;font-size:0.9rem;">
      </div>
      <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i> Search</button>
    </form>

    <button type="button" class="btn btn-outline filter-sidebar-toggle" id="filterSidebarToggle" style="align-items:center;gap:8px;width:100%;justify-content:center;margin-bottom:16px;">
      <i class="fas fa-filter"></i> <span id="filterSidebarToggleLabel">Show Filters</span>
    </button>

    <div class="jobs-layout">
      <aside class="filter-sidebar" id="filterSidebar">
        <h3><i class="fas fa-filter" style="color:var(--secondary);margin-right:8px;"></i>Filter Jobs</h3>
        <form method="get" id="filter-form">
          {% if form.q.value %}<input type="hidden" name="q" value="{{ form.q.value }}">{% endif %}
          {% if form.location.value %}<input type="hidden" name="location" value="{{ form.location.value }}">{% endif %}
          {% if form.sort.value %}<input type="hidden" name="sort" value="{{ form.sort.value }}" id="sort-hidden">{% endif %}

          <div class="filter-section">
            <h4>Job Category</h4>
            <p class="filter-hint">Find related roles even when employers use different titles - e.g. HR Officer, People &amp; Culture Officer, or Talent Acquisition Specialist under Human Resources &amp; People.</p>
            {{ form.category }}
          </div>

          <div class="filter-section">
            <h4>Industry</h4>
            <p class="filter-hint">Combine with Job Category - e.g. Engineering in Mining, or HR across any industry.</p>
            {{ form.industry }}
          </div>

          <div class="filter-section">
            <h4>Job Type</h4>
            {% for item in job_type_filters %}
            <label class="filter-check">
              <input type="checkbox" name="job_type" value="{{ item.value }}" onchange="pjKeepScroll(this.form)" {% if form.job_type.value and item.value in form.job_type.value %}checked{% endif %}>
              <label>{{ item.label }} <span class="filter-check-count">{{ item.count }}</span></label>
            </label>
            {% endfor %}
          </div>

          <div class="filter-section">
            <h4>Experience Level</h4>
            {% for item in experience_filters %}
            <label class="filter-check">
              <input type="checkbox" name="experience" value="{{ item.value }}" onchange="pjKeepScroll(this.form)" {% if form.experience.value and item.value in form.experience.value %}checked{% endif %}>
              <label>{{ item.label }} <span class="filter-check-count">{{ item.count }}</span></label>
            </label>
            {% endfor %}
          </div>

          <button type="submit" class="btn btn-primary" style="width:100%;margin-bottom:8px;"><i class="fas fa-filter"></i> Apply Filters</button>
          <a href="{% url 'jobs:list' %}" class="btn btn-outline" style="width:100%;display:block;text-align:center;"><i class="fas fa-times"></i> Clear Filters</a>
        </form>
      </aside>

      <div>
        {% if recommended_jobs and seeker_category %}
        <div class="recommended-strip">
          <h3><i class="fas fa-star" style="color:var(--secondary);"></i> Recommended for you - {{ seeker_category.numbered_name }}</h3>
          <p>Based on your profile category. These roles may use different titles but sit in the same field.</p>
          <div class="recommended-links">
            {% for job in recommended_jobs %}
            <a href="{{ job.get_absolute_url }}">{{ job.title }} · {{ job.company_name }}</a>
            {% endfor %}
            <a href="?category={{ seeker_category.slug }}">View all {{ seeker_category.numbered_name }} jobs <i class="fas fa-arrow-right"></i></a>
          </div>
        </div>
        {% endif %}

        {% if active_filter_labels %}
        <div class="active-filters">
          <span style="font-size:0.8rem;color:var(--text-muted);font-weight:600;">Active filters:</span>
          {% for kind, label in active_filter_labels %}
          <span class="active-filter-chip"><i class="fas fa-filter"></i> {{ label }}</span>
          {% endfor %}
        </div>
        {% endif %}

        <div class="jobs-header">
          <div class="jobs-count">
            {% if page_obj.paginator.count %}
            Showing <strong>{{ page_obj.start_index }}–{{ page_obj.end_index }}</strong> of <strong>{{ total_count|intcomma }}</strong> job{{ total_count|pluralize }}
            {% else %}
            Showing <strong>0</strong> jobs
            {% endif %}
          </div>
          <form method="get" style="display:flex;gap:8px;align-items:center;">
            {% if form.q.value %}<input type="hidden" name="q" value="{{ form.q.value }}">{% endif %}
            {% if form.location.value %}<input type="hidden" name="location" value="{{ form.location.value }}">{% endif %}
            {% if form.category.value %}<input type="hidden" name="category" value="{{ form.category.value }}">{% endif %}
            {% if form.industry.value %}<input type="hidden" name="industry" value="{{ form.industry.value }}">{% endif %}
            {% for val in form.job_type.value %}<input type="hidden" name="job_type" value="{{ val }}">{% endfor %}
            {% for val in form.experience.value %}<input type="hidden" name="experience" value="{{ val }}">{% endfor %}
            <select name="sort" class="sort-select" onchange="pjKeepScroll(this.form)">
              {% for value, label in form.fields.sort.choices %}
              <option value="{{ value }}" {% if form.sort.value == value or not form.sort.value and value == 'newest' %}selected{% endif %}>{{ label }}</option>
              {% endfor %}
            </select>
          </form>
        </div>

        <div class="jobs-grid">
          {% for job in jobs %}
            {% include 'jobs/partials/job_card.html' with job=job compact=False %}
          {% empty %}
          <div class="empty-state">
            <i class="fas fa-search" style="font-size:2.5rem;color:var(--secondary);margin-bottom:16px;"></i>
            <h3 style="color:var(--primary);margin-bottom:8px;">No jobs found</h3>
            <p style="color:var(--text-muted);">Try adjusting your filters or search terms.</p>
            <a href="{% url 'jobs:list' %}" class="btn btn-primary" style="margin-top:20px;">View All Jobs</a>
          </div>
          {% endfor %}
        </div>

        {% include 'home/partials/list_pagination.html' %}
      </div>
    </div>
  </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
  function pjKeepScroll(form) {
    sessionStorage.setItem('pj_jobs_scroll', window.scrollY);
    form.submit();
  }
  (function () {
    const toggle = document.getElementById('filterSidebarToggle');
    const sidebar = document.getElementById('filterSidebar');
    const label = document.getElementById('filterSidebarToggleLabel');
    if (toggle && sidebar) {
      toggle.addEventListener('click', function () {
        const open = sidebar.classList.toggle('open');
        if (label) label.textContent = open ? 'Hide Filters' : 'Show Filters';
      });
    }
  })();
  (function () {
    const y = sessionStorage.getItem('pj_jobs_scroll');
    if (y !== null) {
      sessionStorage.removeItem('pj_jobs_scroll');
      window.scrollTo(0, parseInt(y, 10));
    }
  })();
</script>
{% endblock %}