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

{% block title %}All Job Categories – PEZAJOB{% endblock %}
{% block meta_description %}Browse every job category on PEZAJOB and see how many jobs are open in each.{% endblock %}

{% block content %}
<div class="page-header">
  <div class="container page-header-content">
    <h1>All Job Categories</h1>
    <p>{{ categories|length }} categories &middot; {{ total_open_jobs }} open job{{ total_open_jobs|pluralize }} across Zambia</p>
    <div class="breadcrumb"><a href="{% url 'home:index' %}">Home</a><span>/</span><a href="{% url 'jobs:list' %}">Jobs</a><span>/</span><span>Categories</span></div>
  </div>
</div>

<section class="section">
  <div class="container">
    <div class="catpage-tools">
      <div class="catpage-search"><i class="fas fa-search"></i>
        <input type="search" id="catSearch" placeholder="Search categories&hellip;" aria-label="Search categories" autocomplete="off">
      </div>
      <label class="catpage-toggle"><input type="checkbox" id="catOpenOnly"> Only categories with open jobs</label>
    </div>

    <div class="catpage-grid" id="catPageGrid">
      {% for category in categories %}
      <a class="catpage-card{% if not category.job_count %} is-empty{% endif %}" href="{% url 'jobs:list' %}?category={{ category.slug }}"
         data-name="{{ category.name|lower }}" data-open="{{ category.job_count }}">
        <span class="catpage-icon"><i class="fas {{ category.icon|default:'fa-briefcase' }}"></i></span>
        <span class="catpage-text">
          <span class="catpage-name">{{ category.name }}</span>
          <span class="catpage-count">{% if category.job_count %}{{ category.job_count }} open job{{ category.job_count|pluralize }}{% else %}No open jobs yet{% endif %}</span>
        </span>
        <i class="fas fa-chevron-right catpage-arrow"></i>
      </a>
      {% endfor %}
    </div>
    <p class="catpage-empty" id="catNone" hidden>No categories match your search.</p>
  </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
(function () {
  var input = document.getElementById('catSearch'), only = document.getElementById('catOpenOnly'),
      cards = document.querySelectorAll('.catpage-card'), none = document.getElementById('catNone');
  function apply() {
    var q = input.value.trim().toLowerCase(), visible = 0;
    cards.forEach(function (c) {
      var show = c.dataset.name.indexOf(q) !== -1 && (!only.checked || parseInt(c.dataset.open, 10) > 0);
      c.hidden = !show;
      if (show) visible++;
    });
    none.hidden = visible !== 0;
  }
  input.addEventListener('input', apply);
  only.addEventListener('change', apply);
})();
</script>
{% endblock %}