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

{% block title %}Browse Talent – PEZAJOB{% endblock %}

{% block extra_css %}
{% load static %}
<link rel="stylesheet" href="{% static 'css/seeker-card.css' %}?v=1" />
<style>
  .talent-layout { display: grid; grid-template-columns: 270px 1fr; gap: 32px; align-items: start; }
  .filter-sidebar { background: var(--white); border-radius: var(--radius); border: 1px solid var(--border); padding: 28px; position: sticky; top: 90px; }
  .filter-sidebar h3 { font-size: 1rem; font-weight: 700; color: var(--primary); margin-bottom: 24px; padding-bottom: 14px; border-bottom: 2px solid var(--bg); }
  .filter-group { margin-bottom: 24px; }
  .filter-group > label:first-child { font-size: 0.82rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 12px; }
  .filter-check { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 0.88rem; color: var(--text-light); }
  .filter-check input { accent-color: var(--secondary); width: 16px; height: 16px; }
  .filter-check-count { margin-left: auto; background: var(--bg); color: var(--text-muted); font-size: 0.7rem; padding: 2px 7px; border-radius: 10px; }
  .clear-filters { display: block; text-align: center; border: 1.5px solid var(--border); color: var(--text-muted); font-size: 0.83rem; padding: 8px 18px; border-radius: 8px; text-decoration: none; }
  .talent-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; align-items: stretch; }
  .talent-card {
    background: var(--white); border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
    position: relative; text-align: center; box-shadow: 0 2px 12px rgba(44,62,80,0.07); transition: transform 0.25s;
    display: flex; flex-direction: column; height: 100%;
  }
  .talent-card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(44,62,80,0.14); }
  .talent-card-cover { height: 110px; min-height: 110px; flex-shrink: 0; background-size: cover; background-position: center; position: relative; }
  .talent-card-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,13,20,0.18), rgba(5,13,20,0.55)); }
  .talent-card-body {
    padding: 0 20px 22px; display: flex; flex-direction: column; align-items: center;
    flex: 1 1 auto; min-height: 0; overflow: hidden; width: 100%; box-sizing: border-box;
  }
  .talent-avatar { width: 86px; height: 86px; border-radius: 50%; object-fit: cover; border: 4px solid var(--white); box-shadow: 0 4px 20px rgba(0,0,0,0.18); margin: -43px auto 14px; display: block; position: relative; z-index: 1; flex-shrink: 0; }
  .talent-badge { position: absolute; top: 10px; right: 10px; background: var(--secondary); color: var(--primary); font-size: 0.65rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; z-index: 2; }
  .talent-name {
    font-size: 1rem; font-weight: 700; color: var(--primary); margin-bottom: 2px; width: 100%;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    line-height: 1.3; min-height: 2.6em;
  }
  .talent-profession {
    font-size: 0.82rem; color: var(--secondary); font-weight: 600; margin-bottom: 8px; width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.2em;
  }
  .presence-pill { margin-bottom: 8px; min-height: 1.2em; width: 100%; }
  .talent-meta { display: flex; justify-content: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; width: 100%; min-height: 1.2em; max-height: 2.4em; overflow: hidden; }
  .talent-meta span { font-size: 0.77rem; color: var(--text-muted); white-space: nowrap; }
  .talent-skills {
    display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-bottom: 14px;
    width: 100%; min-height: 52px; max-height: 52px; overflow: hidden;
  }
  .skill-tag { background: var(--bg); color: var(--text-light); font-size: 0.72rem; padding: 3px 10px; border-radius: 20px; border: 1px solid var(--border); }
  .availability { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px; margin-bottom: 14px; min-height: 1.8em; flex-shrink: 0; }
  .availability.open { background: rgba(39,174,96,0.1); color: #27ae60; }
  .availability.passive { background: rgba(241,196,15,0.1); color: #f39c12; }
  .availability.not-looking { background: rgba(189,195,199,0.15); color: #95a5a6; }
  .talent-card-privacy-note {
    font-size: 0.78rem; color: var(--text-muted); margin: 12px 0 16px; line-height: 1.5; width: 100%;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3em;
  }
  .talent-card-spacer { visibility: hidden; pointer-events: none; }
  .talent-card-actions { display: flex; gap: 8px; width: 100%; margin-top: auto; flex-shrink: 0; }
  .btn-view-profile { flex: 1; padding: 9px; font-size: 0.8rem; font-weight: 600; border-radius: 8px; background: var(--primary); color: var(--white); text-decoration: none; display: flex; align-items: center; justify-content: center; }
  .btn-contact { flex: 1; padding: 9px; font-size: 0.8rem; font-weight: 600; border-radius: 8px; color: var(--primary); border: 1.5px solid var(--primary); text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 5px; background: transparent; cursor: pointer; font-family: inherit; }
  .sort-select { border: 1.5px solid var(--border); border-radius: 8px; padding: 9px 14px; font-size: 0.87rem; background: var(--white); }
  .sticky-search { background: var(--white); padding: 24px 0; border-bottom: 1px solid var(--border); position: sticky; top: 70px; z-index: 99; }
  @media(max-width:1000px){ .talent-layout{grid-template-columns:1fr} .filter-sidebar{position:static} }
  @media(max-width:680px){ .talent-grid{grid-template-columns:1fr} }
</style>
{% endblock %}

{% block content %}
<section class="page-header">
  <div class="container">
    <div class="page-header-content">
      <h1>Find Talent in Zambia</h1>
      <p>Browse skilled professionals available to work with your organisation</p>
      <div class="breadcrumb"><a href="{% url 'home:index' %}">Home</a><i class="fas fa-chevron-right"></i><span>Talent</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 by name, skill, or profession..." style="width:100%;padding:12px 14px 12px 40px;border:1.5px solid var(--border);border-radius:10px;font-size:0.9rem;">
      </div>
      <input type="text" name="location" value="{{ form.location.value|default:'' }}" placeholder="Location..." style="padding:12px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:0.9rem;min-width:180px;">
      <button type="submit" class="btn btn-primary" style="padding:12px 28px">Search Talent</button>
    </form>
  </div>
</section>

<section class="section" style="background:var(--bg)">
  <div class="container">
    <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-sliders-h"></i> <span id="filterSidebarToggleLabel">Show Filters</span>
    </button>

    <div class="talent-layout">
      <aside class="filter-sidebar" id="filterSidebar">
        <h3><i class="fas fa-sliders-h"></i> Filter Talent</h3>
        <form method="get">
          {% 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 }}">{% endif %}

          <div class="filter-group">
            <label>Job Category</label>
            {% for item in category_filters %}
            <label class="filter-check">
              <input type="checkbox" name="category" value="{{ item.value }}" {% if form.category.value and item.value in form.category.value %}checked{% endif %}>
              <span>{{ item.label }}</span>
              <span class="filter-check-count">{{ item.count }}</span>
            </label>
            {% endfor %}
          </div>

          <div class="filter-group">
            <label>Experience Level</label>
            {% for item in experience_filters %}
            {% if item.count %}
            <label class="filter-check">
              <input type="checkbox" name="experience_level" value="{{ item.value }}" {% if form.experience_level.value and item.value in form.experience_level.value %}checked{% endif %}>
              <span>{{ item.label }}</span>
              <span class="filter-check-count">{{ item.count }}</span>
            </label>
            {% endif %}
            {% endfor %}
          </div>

          <div class="filter-group">
            <label>Availability</label>
            {% for item in availability_filters %}
            {% if item.count %}
            <label class="filter-check">
              <input type="checkbox" name="availability" value="{{ item.value }}" {% if form.availability.value and item.value in form.availability.value %}checked{% endif %}>
              <span>{{ item.label }}</span>
              <span class="filter-check-count">{{ item.count }}</span>
            </label>
            {% endif %}
            {% endfor %}
          </div>

          <button type="submit" class="btn btn-primary" style="width:100%;margin-bottom:8px;">Apply Filters</button>
          <a href="{% url 'seekers:list' %}" class="clear-filters">Clear All Filters</a>
        </form>
      </aside>

      <div>
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px">
          <p style="font-size:0.92rem;color:var(--text-light)">Showing <strong style="color:var(--primary)">{% if page_obj.paginator.count %}{{ page_obj.start_index }}–{{ page_obj.end_index }} of {{ total_count }}{% else %}0{% endif %}</strong> professional{{ total_count|pluralize }}</p>
          <form method="get">
            {% 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 %}
            {% for val in form.category.value %}<input type="hidden" name="category" value="{{ val }}">{% endfor %}
            {% for val in form.experience_level.value %}<input type="hidden" name="experience_level" value="{{ val }}">{% endfor %}
            {% for val in form.availability.value %}<input type="hidden" name="availability" value="{{ val }}">{% endfor %}
            <select name="sort" class="sort-select" 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>
          </form>
        </div>

        <div class="talent-grid">
          {% for seeker in seekers %}
            {% include 'seekers/partials/seeker_card.html' with show_full_seeker_details=show_full_seeker_details contact_modal=True %}
          {% empty %}
          <div style="grid-column:1/-1;text-align:center;padding:60px 24px;background:var(--white);border:1px solid var(--border);border-radius:18px;">
            <h3 style="color:var(--primary);">No talent found</h3>
            <p style="color:var(--text-muted);">Try adjusting your search or filters.</p>
          </div>
          {% endfor %}
        </div>

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

{% block extra_js %}
<script>
  (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';
      });
    }
  })();
</script>
{% endblock %}