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

{% load humanize static %}



{% block title %}{{ page_title }}{% endblock %}



{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/ats-board.css' %}?v=1">
<link rel="stylesheet" href="{% static 'css/ats-messaging.css' %}">
<style>

.ats-stats-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:12px;margin-bottom:22px;}

.ats-stat-card{background:var(--white);border:1.5px solid var(--border);border-radius:14px;padding:16px 12px;text-align:center;text-decoration:none;color:inherit;transition:var(--transition);box-shadow:var(--shadow-sm);}

.ats-stat-card:hover{border-color:var(--primary);transform:translateY(-2px);}

.ats-stat-card.is-active{background:var(--primary);border-color:var(--primary);box-shadow:0 6px 18px rgba(44,62,80,.18);}

.ats-stat-card.is-active .ats-stat-num{color:var(--secondary);}

.ats-stat-card.is-active .ats-stat-lbl{color:rgba(255,255,255,.82);}

.ats-stat-num{font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--primary);line-height:1;display:block;}

.ats-stat-lbl{font-size:.68rem;color:var(--text-muted);margin-top:8px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;line-height:1.3;}

.ats-stat-shortlisted .ats-stat-num{color:#27ae60;}

.ats-stat-interview .ats-stat-num{color:#8e44ad;}

.ats-stat-rejected .ats-stat-num{color:#c0392b;}

.ats-row-num{font-weight:700;color:var(--text-muted);text-align:center;}

.ats-match{display:flex;flex-direction:column;align-items:flex-start;gap:5px;}

.ats-match-num{font-size:1.35rem;font-weight:700;line-height:1;font-family:var(--font-display);color:var(--primary);}

.ats-match-num.high{color:#22c55e;}

.ats-match-num.mid{color:#f59e0b;}

.ats-match-num.low{color:#ef4444;}

.ats-match-bar{width:52px;height:5px;border-radius:3px;background:var(--bg);overflow:hidden;}

.ats-match-fill{height:100%;background:var(--primary);}

.ats-sort-note{font-size:.78rem;color:var(--text-muted);padding:12px 18px 0;font-weight:600;}

</style>

{% endblock %}



{% block dash_content %}

{% include 'platform_admin/partials/page_header.html' %}



{% include 'ats/partials/job_board.html' %}

{% if not show_board %}
{% include 'ats/partials/stats_strip.html' %}



<form method="get" class="filter-bar">

  {% if status_filter %}<input type="hidden" name="status" value="{{ status_filter }}">{% endif %}
  {% if current_job %}<input type="hidden" name="job" value="{{ current_job }}">{% endif %}

  <div class="search-inp">

    <i class="fas fa-search"></i>

    <input type="search" name="q" value="{{ request.GET.q }}" placeholder="Search candidate or job…">

  </div>

  <button type="submit" class="btn btn-primary btn-sm">Filter</button>

</form>



<div class="panel table-panel">

  <p class="ats-sort-note"><i class="fas fa-sort-amount-down"></i> Sorted by match score - highest first</p>

  <table class="data-table">

    <thead>

      <tr><th style="width:42px;">#</th><th>Candidate</th><th>Job</th><th>Match</th><th>Status</th><th>Applied</th><th style="width:88px;">Actions</th></tr>

    </thead>

    <tbody>

      {% for app in page_obj %}

      <tr>

        <td><span class="ats-row-num">{{ page_obj.start_index|add:forloop.counter0 }}</span></td>

        <td>

          <div class="candidate-name">{{ app.applicant.get_full_name|default:app.applicant.email }}</div>

          <div class="candidate-role cand-meta-row">
            <span>{{ app.applicant.email }}</span>
            <a href="{% url 'platform_admin:application_detail' pk=app.pk %}#candidate-messages"
               class="cand-msg-link{% if app.conversation and app.conversation.unread_count %} has-unread{% endif %}"
               title="{% if app.conversation and app.conversation.unread_count %}Message ({{ app.conversation.unread_count }} unread){% else %}Message candidate{% endif %}">
              <i class="fas fa-comments"></i>
              {% if app.conversation and app.conversation.unread_count %}<span class="cand-msg-badge">{{ app.conversation.unread_count }}</span>{% endif %}
            </a>
          </div>

        </td>

        <td>

          <div class="candidate-name">{{ app.job.title|truncatechars:35 }}</div>

          <div class="candidate-role">{{ app.job.company_name }}</div>

        </td>

        <td>

          <div class="ats-match">

            <span class="ats-match-num {{ app.match_level }}">{{ app.match_score }}%</span>

            <div class="ats-match-bar"><div class="ats-match-fill" style="width:{{ app.match_score }}%"></div></div>

          </div>

        </td>

        <td><span class="badge-{% if app.status == 'hired' %}approved{% elif app.status == 'rejected' %}suspended{% elif app.status == 'pending' %}pending{% else %}published{% endif %}">{{ app.get_status_display }}</span></td>

        <td>{{ app.created_at|date:"M j, Y" }}</td>

        <td>
          <div class="row-actions" style="justify-content:flex-end;">
            <a href="{% url 'platform_admin:application_detail' pk=app.pk %}#candidate-messages" class="ra-view" title="Message"><i class="fas fa-comments"></i></a>
            <a href="{% url 'platform_admin:application_detail' pk=app.pk %}" class="ra-view" title="Open"><i class="fas fa-arrow-right"></i></a>
          </div>
        </td>

      </tr>

      {% empty %}

      <tr><td colspan="7" style="text-align:center;padding:32px;color:var(--text-muted);">No applications found.</td></tr>

      {% endfor %}

    </tbody>

  </table>

  {% include 'platform_admin/partials/pagination.html' %}

</div>

{% endif %}

{% endblock %}