{% extends "base.html" %}
{% load static %}

{% block title %}Carrières — Jool International{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/careers.css' %}">
{% endblock %}

{% block content %}
<div class="careers-hero reveal">
  <h1>Rejoignez l'aventure <span>Jool</span></h1>
  <p>Nous construisons l'avenir de l'agriculture africaine. Découvrez nos opportunités et faites partie de l'équipe.</p>
</div>

<div class="careers-filters">
  <span class="filter-label">Département :</span>
  <a href="{% url 'careers:job_list' %}" class="filter-chip {% if not active_dept %}active{% endif %}">Tous</a>
  {% for value, label in departments %}
  <a href="?dept={{ value }}" class="filter-chip {% if active_dept == value %}active{% endif %}">{{ label }}</a>
  {% endfor %}
</div>

<div class="jobs-grid">
  {% for job in jobs %}
  <div class="job-card reveal">
    <div class="job-card-header">
      <span class="job-dept-badge">{{ job.get_department_display }}</span>
      <span class="job-contract">{{ job.get_contract_type_display }}</span>
    </div>
    <div class="job-card-title">{{ job.title }}</div>
    <div class="job-card-meta">
      <span><span class="material-icons-round">location_on</span> {{ job.location }}</span>
      {% if job.is_remote %}<span><span class="material-icons-round">wifi</span> Télétravail</span>{% endif %}
      {% if job.salary_range %}<span><span class="material-icons-round">payments</span> {{ job.salary_range }}</span>{% endif %}
    </div>
    <div class="job-card-footer">
      <a href="{{ job.get_absolute_url }}" class="btn-apply">Voir l'offre</a>
      {% if job.application_deadline %}
      <span class="job-deadline">Jusqu'au {{ job.application_deadline|date:"d/m/Y" }}</span>
      {% endif %}
    </div>
  </div>
  {% empty %}
  <div class="jobs-empty">
    <p>Aucune offre disponible pour le moment.<br>Revenez bientôt !</p>
  </div>
  {% endfor %}
</div>
{% endblock %}