{% extends 'seekers/base_portal.html' %}
{% load humanize %}

{% block title %}My Applications{% endblock %}
{% block topbar_title %}My Applications{% endblock %}

{% block dash_content %}
<div class="page-heading">
  <h1>My Applications</h1>
  <p>Track every job you have applied for and follow up with employers.</p>
</div>

<div class="seeker-pipeline">
  {% for tab in status_tabs %}
  <a href="?status={{ tab.value }}" class="seeker-pipe-card"{% if tab.color %} style="border-top-color:{{ tab.color }};"{% endif %}>
    <div class="seeker-pipe-num">{{ tab.count }}</div>
    <div class="seeker-pipe-lbl">{{ tab.label }}</div>
  </a>
  {% endfor %}
</div>

<form method="get" class="seeker-filter-bar">
  <input type="text" name="q" value="{{ search_query }}" placeholder="Search jobs or companies…" class="form-control">
  <select name="status">
    <option value="">All statuses</option>
    {% for value, label in status_choices %}
    <option value="{{ value }}" {% if current_status == value %}selected{% endif %}>{{ label }}</option>
    {% endfor %}
  </select>
  <button type="submit" class="btn btn-primary btn-sm"><i class="fas fa-filter"></i> Filter</button>
</form>

{% if not full_application_history %}
<div class="alert alert-info" style="margin-bottom:20px;">
  <i class="fas fa-info-circle"></i>
  Showing your 5 most recent applications. <a href="{% url 'subscriptions:pricing' %}" style="font-weight:700;color:inherit;">Upgrade to Professional Plus</a> for full application history.
</div>
{% endif %}

{% for app in applications %}
<div class="seeker-app-card">
  <div class="seeker-app-logo">{{ app.job.company_initials }}</div>
  <div class="seeker-app-main">
    <div class="seeker-app-title"><a href="{{ app.job.get_absolute_url }}">{{ app.job.title }}</a></div>
    <div style="font-size:0.82rem;color:var(--text-muted);">{{ app.job.company_name }} · {{ app.job.location }}</div>
    <div style="font-size:0.75rem;color:var(--text-muted);margin-top:6px;">Applied {{ app.created_at|naturaltime }}</div>
  </div>
  <div style="text-align:right;flex-shrink:0;">
    <span class="seeker-status-pill-lg sp-{{ app.status }}">{{ app.get_status_display }}</span>
    {% if app.status == 'interview' and app.interviews.exists %}
    <div style="font-size:0.72rem;color:var(--text-muted);margin-top:8px;">
      <i class="fas fa-calendar"></i> {{ app.interviews.first.scheduled_at|date:"d M, H:i" }}
    </div>
    {% endif %}
    <div style="margin-top:10px;">
      <a href="{% url 'messaging:start' application_id=app.pk %}" class="btn btn-sm btn-outline"><i class="fas fa-comments"></i> Message</a>
    </div>
  </div>
</div>
{% empty %}
<div class="seeker-empty-state">
  No applications yet. <a href="{% url 'jobs:list' %}">Browse jobs</a> to get started.
</div>
{% endfor %}

{% include 'home/partials/list_pagination.html' %}
{% endblock %}