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

{% load humanize %}



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



{% block content %}

<section class="section" style="padding-top:100px;">

  <div class="container">

    <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:24px;">

      <div>

        <h1 style="color:var(--primary);margin-bottom:4px;">Job Applications</h1>

        <p style="color:var(--text-muted);">Candidates who applied to your listings</p>

      </div>

      <a href="{% url 'employers:dashboard' %}" class="btn btn-outline btn-sm">Back to Dashboard</a>

    </div>



    <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px;">

      <a href="{% url 'employers:applications' %}" class="btn btn-sm {% if not current_status %}btn-primary{% else %}btn-outline{% endif %}">All</a>

      {% for value, label in status_choices %}

      <a href="?status={{ value }}" class="btn btn-sm {% if current_status == value %}btn-primary{% else %}btn-outline{% endif %}">{{ label }}</a>

      {% endfor %}

    </div>



    <div style="background:var(--white);border:1px solid var(--border);border-radius:16px;overflow:hidden;">

      {% for application in applications %}

      <div style="padding:20px 24px;border-bottom:1px solid var(--bg);">

        <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;">

          <div>

            <div style="font-weight:700;color:var(--primary);margin-bottom:4px;">

              {{ application.applicant.get_full_name|default:application.applicant.email }}

              {% if application.applicant.seeker_profile.is_public %}

              <a href="{{ application.applicant.seeker_profile.get_absolute_url }}" style="font-size:0.78rem;color:var(--secondary);margin-left:8px;">View profile</a>

              {% endif %}

            </div>

            <div style="font-size:0.88rem;color:var(--text-muted);margin-bottom:8px;">

              Applied for <a href="{{ application.job.get_absolute_url }}" style="color:var(--secondary);font-weight:600;">{{ application.job.title }}</a>

            </div>

            <div style="font-size:0.82rem;color:var(--text-muted);">

              {{ application.created_at|naturaltime }}

            </div>

          </div>

          <div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center;">

            {% if application.cv_file %}

            <a href="{{ application.cv_file.url }}" class="btn btn-sm btn-outline" target="_blank" rel="noopener"><i class="fas fa-file-pdf"></i> CV</a>

            {% endif %}

            {% if application.linkedin_url %}

            <a href="{{ application.linkedin_url }}" class="btn btn-sm btn-outline" target="_blank" rel="noopener"><i class="fab fa-linkedin"></i> LinkedIn</a>

            {% endif %}

            <form method="post" action="{% url 'employers:update_application' pk=application.pk %}" style="display:flex;gap:8px;align-items:center;">

              {% csrf_token %}

              <select name="status" class="form-control" style="min-width:160px;padding:8px 12px;border:1px solid var(--border);border-radius:8px;">

                {% for value, label in status_choices %}

                <option value="{{ value }}" {% if application.status == value %}selected{% endif %}>{{ label }}</option>

                {% endfor %}

              </select>

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

            </form>

          </div>

        </div>

        {% if application.cover_letter %}

        <p style="margin-top:12px;font-size:0.88rem;color:var(--text-light);line-height:1.6;">{{ application.cover_letter|truncatewords:80 }}</p>

        {% endif %}

      </div>

      {% empty %}

      <div style="padding:48px;text-align:center;color:var(--text-muted);">

        No applications{% if current_status %} with this status{% endif %} yet.

        <a href="{% url 'employers:post_job' %}">Post a job</a> to start receiving candidates.

      </div>

      {% endfor %}

    </div>

  </div>

</section>

{% endblock %}