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

{% block title %}Companies – PEZAJOB{% endblock %}

{% block extra_css %}
{% load static %}
<link rel="stylesheet" href="{% static 'css/company-card.css' %}?v=1" />
<link rel="stylesheet" href="{% static 'css/company-directory.css' %}?v=7" />
<style>
  .sticky-search { background: var(--white); padding: 24px 0; border-bottom: 1px solid var(--border); position: static; box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
  .empty-state { grid-column: 1 / -1; text-align: center; padding: 60px 24px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); }
</style>
{% endblock %}

{% block content %}
<section class="page-header">
  <div class="container">
    <div class="page-header-content">
      <h1>Top Companies in Zambia</h1>
      <p>Employers hiring on PEZAJOB</p>
      <div class="breadcrumb">
        <a href="{% url 'home:index' %}">Home</a>
        <i class="fas fa-chevron-right"></i>
        <span>Companies</span>
      </div>
    </div>
  </div>
</section>

<section class="sticky-search">
  <div class="container">
    <form method="get" style="display:flex;gap:12px;flex-wrap:wrap">
      <div style="flex:1;min-width:220px;position:relative">
        <i class="fas fa-search" style="position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-muted)"></i>
        <input type="text" name="q" value="{{ form.q.value|default:'' }}" placeholder="Search company name or industry..." style="width:100%;padding:12px 14px 12px 40px;border:1.5px solid var(--border);border-radius:10px;font-size:0.9rem;">
      </div>
      <div style="position:relative;min-width:180px;flex:1">
        <i class="fas fa-map-marker-alt" style="position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-muted)"></i>
        <input type="text" name="location" value="{{ form.location.value|default:'' }}" placeholder="Location..." style="width:100%;padding:12px 14px 12px 40px;border:1.5px solid var(--border);border-radius:10px;font-size:0.9rem;">
      </div>
      <button type="submit" class="btn btn-primary" style="padding:12px 28px">Search Companies</button>
    </form>
  </div>
</section>

<section class="section" style="background:var(--bg)">
  <div class="container">
    <form method="get" id="company-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 %}
      <div class="cd-layout">
        <aside class="cd-filters">
          <div class="cd-filters-head">
            <h3>Filters</h3>
            <a href="{% url 'companies:list' %}" class="cd-clear">Clear all</a>
          </div>

          <div class="cd-group">
            <div class="cd-group-title"><i class="fas fa-industry"></i> Industry</div>
            <select name="industry" class="cd-select">
              <option value="">All Industries</option>
              {% for item in industry_filters %}
              <option value="{{ item.value }}" {% if form.industry.value and item.value in form.industry.value %}selected{% endif %}>{{ item.label }}</option>
              {% endfor %}
            </select>
          </div>

          <div class="cd-group">
            <div class="cd-group-title"><i class="fas fa-location-dot"></i> Location</div>
            <select name="country" class="cd-select">
              <option value="">All Countries</option>
              {% for v in country_options %}<option value="{{ v }}" {% if form.country.value|lower == v|lower %}selected{% endif %}>{{ v }}</option>{% endfor %}
            </select>
            <select name="province" class="cd-select">
              <option value="">All Provinces/Regions</option>
              {% for v in province_options %}<option value="{{ v }}" {% if form.province.value|lower == v|lower %}selected{% endif %}>{{ v }}</option>{% endfor %}
            </select>
            <select name="city" class="cd-select">
              <option value="">All Cities/Towns</option>
              {% for v in city_options %}<option value="{{ v }}" {% if form.city.value|lower == v|lower %}selected{% endif %}>{{ v }}</option>{% endfor %}
            </select>
          </div>

          <div class="cd-group">
            <div class="cd-group-title"><i class="far fa-building"></i> Company Type</div>
            <select name="company_type" class="cd-select">
              {% for value, label in form.fields.company_type.choices %}
              <option value="{{ value }}" {% if form.company_type.value == value %}selected{% endif %}>{{ label }}</option>
              {% endfor %}
            </select>
          </div>

          <div class="cd-group">
            <div class="cd-group-title"><i class="fas fa-briefcase"></i> Hiring</div>
            <label class="cd-check"><input type="checkbox" name="hiring" value="yes" {% if 'yes' in form.hiring.value %}checked{% endif %}> Currently Hiring</label>
            <label class="cd-check"><input type="checkbox" name="hiring" value="no" {% if 'no' in form.hiring.value %}checked{% endif %}> Not Currently Hiring</label>
          </div>

          <button type="submit" class="cd-apply">Apply Filters</button>
        </aside>

        <div>
          <div class="cd-toolbar">
            <p class="cd-count">Showing {% if page_obj.paginator.count %}{{ page_obj.start_index }} - {{ page_obj.end_index }} of {{ total_count }}{% else %}0{% endif %} compan{{ total_count|pluralize:"y,ies" }}</p>
            <div class="cd-tools">
              <div class="cd-toggle" role="group" aria-label="View">
                <button type="button" data-view="grid" class="is-active"><i class="fas fa-table-cells-large"></i> Grid View</button>
                <button type="button" data-view="list"><i class="fas fa-list"></i> List View</button>
              </div>
              <label class="cd-sort">Sort by:
                <select name="sort" onchange="this.form.submit()">
                  {% for value, label in form.fields.sort.choices %}
                  <option value="{{ value }}" {% if form.sort.value == value or not form.sort.value and value == 'featured' %}selected{% endif %}>{{ label }}</option>
                  {% endfor %}
                </select>
              </label>
            </div>
          </div>

          <div class="cd-grid" id="cd-grid">
            {% for company in companies %}
              {% include 'companies/partials/company_card.html' %}
            {% empty %}
            <div class="empty-state">
              <i class="fas fa-building" style="font-size:2.5rem;color:var(--secondary);margin-bottom:16px;"></i>
              <h3 style="color:var(--primary);">No companies found</h3>
              <p style="color:var(--text-muted);">Try adjusting your search or filters.</p>
              <a href="{% url 'companies:list' %}" class="btn btn-primary" style="margin-top:20px;">View All Companies</a>
            </div>
            {% endfor %}
          </div>

          {% include 'home/partials/list_pagination.html' %}
        </div>
      </div>
    </form>
  </div>
</section>
<script>
(function () {
  var grid = document.getElementById('cd-grid');
  var btns = document.querySelectorAll('.cd-toggle button');
  function setView(v) {
    grid.classList.toggle('is-list', v === 'list');
    btns.forEach(function (b) { b.classList.toggle('is-active', b.dataset.view === v); });
    try { localStorage.setItem('cd-view', v); } catch (e) {}
  }
  btns.forEach(function (b) { b.addEventListener('click', function () { setView(b.dataset.view); }); });
  try { var saved = localStorage.getItem('cd-view'); if (saved) setView(saved); } catch (e) {}
})();
</script>
{% endblock %}