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

{% block title %}CV Library – PEZAJOB{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/cv-library.css' %}?v=2">
{% endblock %}

{% block content %}
<section class="cv-library-public">
  <div class="container cv-library-page">
    <div class="cv-library-header">
      <div>
        <h1>CV Library</h1>
        <p>Search and bulk-download candidate CVs by category. Requires an active <strong>CV Search</strong> subscription (Talent Database).</p>
      </div>
      <a href="{% url 'employers:dashboard' %}" class="btn btn-outline btn-sm"><i class="fas fa-arrow-left"></i> Dashboard</a>
    </div>

    <div class="cv-lib-stats">
      <div class="cv-lib-stat"><strong>{{ total_cvs }}</strong><span>Indexed CVs</span></div>
      <div class="cv-lib-stat"><strong>{{ categories.count }}</strong><span>Categories</span></div>
      {% if usage %}
      <div class="cv-lib-stat"><strong>{{ usage.cv_downloads }}{% if usage.benefits.cv_downloads_per_month %} / {{ usage.benefits.cv_downloads_per_month }}{% endif %}</strong><span>Downloads this month</span></div>
      {% endif %}
    </div>

    {% if not can_access %}
    <div style="background:var(--white);border:1px solid var(--border);border-radius:16px;padding:40px;text-align:center;">
      <p style="color:var(--text-muted);margin:0 0 16px;">{{ access_message }}</p>
      <a href="{% url 'subscriptions:pricing' %}#talent" class="btn btn-primary">Subscribe to CV Search (Talent Database)</a>
    </div>
    {% else %}

    <form method="get" class="cv-library-filters">
      <div class="search-inp" style="position:relative;flex:1 1 220px;min-width:0;">
        <i class="fas fa-search" style="position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);"></i>
        <input type="search" name="q" value="{{ q }}" placeholder="Search name, email, skills, filename…" style="width:100%;padding:10px 12px 10px 36px;border:1.5px solid var(--border);border-radius:10px;font-size:0.88rem;">
      </div>
      <select name="category" class="cv-filter-select" onchange="this.form.submit()" style="padding:10px 12px;border:1.5px solid var(--border);border-radius:10px;font-size:0.88rem;">
        <option value="">All categories</option>
        {% for cat in categories %}
        <option value="{{ cat.slug }}"{% if category_slug == cat.slug %} selected{% endif %}>{{ cat.name }}</option>
        {% endfor %}
      </select>
      <select name="versions" class="cv-filter-select" onchange="this.form.submit()" style="padding:10px 12px;border:1.5px solid var(--border);border-radius:10px;font-size:0.88rem;">
        <option value="current"{% if current_only %} selected{% endif %}>Latest only</option>
        <option value="all"{% if not current_only %} selected{% endif %}>All versions</option>
      </select>
      <button type="submit" class="btn btn-primary btn-sm">Search</button>
    </form>

    <form method="post" action="{% url download_url %}" id="cvBulkForm">
      {% csrf_token %}
      <input type="hidden" name="q" value="{{ q }}">
      <input type="hidden" name="category" value="{{ category_slug }}">
      <input type="hidden" name="current_only" value="{% if current_only %}1{% else %}0{% endif %}">

      <div class="cv-bulk-bar">
        <label style="display:flex;align-items:center;gap:8px;font-size:0.85rem;font-weight:600;cursor:pointer;">
          <input type="checkbox" id="selectAllCvs"> Select page
        </label>
        <button type="submit" class="btn btn-primary btn-sm"><i class="fas fa-download"></i> Download selected</button>
        <button type="submit" class="btn btn-outline btn-sm" name="limit" value="50">Download 50</button>
        <button type="submit" class="btn btn-outline btn-sm" name="limit" value="100">Download 100</button>
        <button type="submit" class="btn btn-outline btn-sm" name="limit" value="200">Download 200</button>
        {% if usage %}
        <span class="hint">Remaining downloads depend on your plan limit.</span>
        {% endif %}
      </div>

      {% include 'seekers/partials/cv_library_table.html' with show_profile_link=False pagination_partial='home/partials/list_pagination.html' %}
    </form>
    {% endif %}
  </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
(function () {
  const selectAll = document.getElementById('selectAllCvs');
  const checks = document.querySelectorAll('.cv-row-check');
  if (!selectAll) return;
  selectAll.addEventListener('change', () => {
    checks.forEach(cb => { cb.checked = selectAll.checked; });
  });
})();
</script>
{% endblock %}