{% load static %}
<div class="dashboard-notice">
  <i class="fa-solid fa-circle-info"></i>
  <p><strong>Bon à savoir :</strong> un délai de <strong>5 minutes maximum</strong> peut s'écouler entre la transmission de vos informations et leur affichage sur ce tableau de bord. Si une action récente n'apparaît pas encore, actualisez la page dans quelques instants.</p>
</div>
<div class="cvtheque">
  {% if not cv.count %}
    <div class="no-cv">
      <p>Vous n'avez pas encore transmis votre curriculum vitae.</p>
      <p>Complétez ce formulaire :</p>
      <a class="pk-button cv-button" href="{{ eservices_url }}emploi-candidature-spontanee/">
        Formulaire de dépôt de CV
      </a>
    </div>
  {% else %}
    {% with status_cv=cv.data.0.workflow.status.name %}
      {% if status_cv == "Sur le point d'expirer" %}
        <div class="cv-existing cv-expiration">
          <p>Votre CV est sur le point d'expirer, pour le prolonger vous pouvez :</p>
          <div class="cv-modification">
            <p>Modifiez votre CV en cliquant sur ce bouton :</p>
            <a class="pk-button cv-button" href="{{ eservices_url }}imio-modification-cv/" target="_blank">
              Modifier mon CV
            </a>
          </div>
          <div class="cv-validation">
            <p>Prolongez votre CV en cliquant sur ce bouton :</p>
            <a class="pk-button cv-button" href="{{ eservices_url }}imio-projet-rh-actions-cv/?cv={{ cv.data.0.id }}&action=prolongation_cv">
              Prolonger mon CV
            </a>
          </div>
          <p>Ces deux actions prolongeront la validité de votre CV d'un an.</p>
        </div>
      {% elif status_cv == "Temporairement indisponible" %}
        <div class="cv-existing cv-disabled">
          <p>Vous vous êtes mis en temporairement indisponible cliquez sur le bouton pour sortir de ce statut</p>
          <a class="pk-button cv-button" href="{{ eservices_url }}imio-projet-rh-actions-cv/?cv={{ cv.data.0.id }}&action=reactivate_cv">
            Remettre en service mon CV
          </a>
        </div>
      {% else %}
        <div class="cv-existing">
          <p>Vous avez déjà transmis votre CV.</p>
          <p>Vous pouvez le modifier en cliquant sur ce bouton :</p>
          <a class="pk-button cv-button" href="{{ eservices_url }}imio-modification-cv/">
            Modifier mon CV
          </a>
          <p>Ou vous mettre en indisponibilité temporaire via ce bouton</p>
          <a class="pk-button cv-button" href="{{ eservices_url }}imio-projet-rh-actions-cv/?cv={{ cv.data.0.id }}&action=indisponibility_cv">
            Me mettre en indisponibilité temporaire
          </a>
        </div>
      {% endif %}
    {% endwith %}
    <div class="cv-existing cv-anonymization">
      <h4><i class="fa-solid fa-user-lock"></i> Zone de danger : Anonymisation</h4>

      <p>Vous pouvez retirer votre CV de notre base de données à tout moment.</p>

      <div class="anonymization-warning">
        <i class="fa-solid fa-triangle-exclamation"></i>
        <div>
          <strong>Conséquences importantes :</strong>
          <p>Cette action entraînera l'<strong>annulation immédiate</strong> et l'<strong>anonymisation</strong> de toutes vos procédures de recrutement en cours. Les recruteurs n'auront plus accès à votre dossier.</p>
        </div>
      </div>

      <a class="pk-button cv-button button-danger" href="{{ eservices_url }}imio-anonymisation-du-cv">
        <i class="fa-solid fa-user-slash"></i> Anonymiser mon CV et mes candidatures
      </a>
    </div>
  {% endif %}
</div>

<div class="cv-candidature">
  <h2>Gestion de vos candidatures</h2>
  {% if json %}
    {% if not json.data %}
      <div class="no-candidature">
        <p>Aucune candidature n'a été trouvée.</p>
      </div>
    {% else %}
      <div class="candidature-list">
        {% for candidature in json.data %}
          {% with status=candidature.workflow.status.name epreuves=candidature.workflow.fields.epreuves_en_cours_raw %}
            <div class="candidature-item">
              <h3 class="emploi">{{ candidature.fields.emploi }}</h3>
              <p>Date de candidature : <span class="date-candidature">{{ candidature.fields.date_candidature|date:"d/m/Y" }}</span></p>
              <p>Statut : <span class="status">{{ status }}{% if candidature.workflow.fields.epreuve_en_cours %} {{ candidature.workflow.fields.epreuve_en_cours }}{% endif %}{% if epreuves %} {% for epreuve in epreuves %}{{ epreuve.nom_epreuve }}{% if not forloop.last %}/{% endif %}{% endfor %}{% endif %}</span></p>
              {% if not candidature.workflow.fields.epreuves_en_cours_raw %}
                {% include 'combo/json/cv-candidature-details.html' with epreuve_fields=candidature.workflow.fields status_epreuve=status %}
              {% else %}
                <p>Attention, vous êtes invité a plusieurs épreuves sur la même journée, le refus de participation à une épreuve entrainera un refus pour toutes les épreuves</p>
                {% for epreuve in candidature.workflow.fields.epreuves_en_cours_raw %}
                  {% include 'combo/json/cv-candidature-details.html' with epreuve_fields=epreuve status_epreuve=epreuve.statut_epreuve %}
                {% endfor %}
              {% endif %}
            </div>
          {% endwith %}
        {% endfor %}
      </div>
    {% endif %}
  {% else %}
    <div class="pk-error">
      <p>Un problème au niveau du serveur est survenu. Merci d'actualiser cette page <span>dans quelques minutes</span>.
      </p>
    </div>
  {% endif %}
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style>
  span {
    font-weight: bold;
  }

  .dashboard-notice {
    max-width: 800px;
    margin: 40px auto 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    background-color: #eef6ff;
    border: 1px solid #cfe4ff;
    border-left: 5px solid #007bff;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.6;
    color: #2c3e50;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }

  .dashboard-notice i {
    color: #007bff;
    font-size: 18px;
    margin-top: 2px;
  }

  .dashboard-notice p {
    margin: 0;
  }

  .cvtheque {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .cvtheque .no-cv,
  .cvtheque .cv-existing {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }

  .cvtheque .cv-existing.cv-expiration {
    border-left: 6px solid #f39c12;
    background-color: #fff9f0;
  }

  .cvtheque .cv-button {
    display: inline-block;
    margin-top: 12px;
    text-decoration: none;
    border: none;
    font-size: 14px;
  }

  .cvtheque .cv-modification,
  .cvtheque .cv-validation {
    margin-top: 16px;
  }

  .cvtheque .cv-validation {
    margin-bottom: 12px;
  }

  .cv-candidature, .cvtheque {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
  }

  .cv-candidature h2 {
    text-align: center;
    margin-bottom: 30px;
    color: #2c3e50;
    font-size: 28px;
  }

  .no-candidature,
  .pk-error {
    text-align: center;
    padding: 20px;
    background-color: #ffe5e5;
    border: 1px solid #ffcccc;
    border-radius: 12px;
    color: #b30000;
    font-weight: bold;
  }

  .candidature-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .candidature-item {
    background-color: #ffffff;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 12px;
    transition: box-shadow 0.3s ease;
  }

  .candidature-item:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  }

  .candidature-item h3 {
    margin-top: 0;
    font-size: 20px;
    color: #34495e;
  }

  .candidature-item p {
    margin: 8px 0;
    font-size: 15px;
  }

  .candidature-actions {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: left;
    gap: 12px;
  }

  .candidature-actions .cv-button,
  .cvtheque .cv-button {
    padding: 12px;
    border-radius: 8px;
    font-weight: bold;
  }

  .candidature-actions .cancel-button {
    mix-blend-mode: luminosity;
  }

  .no-action {
    background-color: #f1f1f1;
    padding: 12px;
    border-radius: 8px;
    font-style: italic;
    color: #888;
  }

  .epreuve-info {
    background-color: #f8f9fa; /* Fond légèrement plus neutre */
    border-left: 5px solid #007bff; /* Bleu plus vif */
    padding: 20px;
    margin-top: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  }

  .epreuve-info h4 {
    margin-top: 0;
    margin-bottom: 18px;
    color: #343a40; /* Couleur de titre plus foncée */
    font-size: 18px;
    border-bottom: 1px solid #e9ecef; /* Ligne de séparation */
    padding-bottom: 10px;
  }

  /* Structure chaque ligne d'information avec Flexbox */
  .info-ligne {
    display: flex;
    align-items: flex-start; /* Aligne le haut des éléments */
    gap: 15px; /* Espace entre l'icône, le libellé et la valeur */
    margin-bottom: 12px;
    font-size: 15px;
  }

  /* Style des icônes */
  .info-ligne i {
    color: #007bff; /* Couleur de l'icône */
    font-size: 16px;
    width: 20px; /* Largeur fixe pour l'alignement */
    text-align: center;
    margin-top: 2px; /* Petit ajustement vertical */
  }

  /* Style des libellés (Date, Lieu, etc.) */
  .info-ligne strong {
    flex: 0 0 180px; /* Largeur fixe pour créer une colonne (ne grandit pas, ne rétrécit pas) */
    color: #495057;
  }

  /* Style pour la date d'échéance (pour la faire ressortir) */
  .info-ligne.echeance i {
    color: #e67e22; /* Orange pour attirer l'attention */
  }
  .info-ligne.echeance strong,
  .info-ligne.echeance span {
    font-weight: bold;
    color: #c0392b; /* Rouge doux pour l'importance */
  }

  /* Style spécifique pour les infos complémentaires */
  .info-complementaires {
    margin-top: 20px;
  }
  .complement-texte {
    padding: 10px 15px;
    background-color: #e9ecef;
    border-radius: 6px;
    margin-top: 8px;
    color: #495057;
  }

  .cvtheque .cv-anonymization {
    border: 1px solid #f5c6cb; /* Bordure rouge pâle */
    background-color: #fff5f5; /* Fond rouge très léger */
    margin-top: 24px; /* Séparation avec le bloc du dessus */
  }

  .cvtheque .cv-anonymization h4 {
    margin-top: 0;
    color: #721c24; /* Rouge foncé pour le titre */
    font-size: 18px;
    margin-bottom: 12px;
  }

  /* La boîte d'avertissement interne */
  .anonymization-warning {
    display: flex;
    gap: 15px;
    background-color: #ffffff;
    border-left: 4px solid #dc3545; /* Barre rouge verticale */
    padding: 15px;
    margin: 15px 0;
    border-radius: 4px;
    font-size: 14px;
    color: #555;
  }

  .anonymization-warning i {
    color: #dc3545;
    font-size: 20px;
    margin-top: 2px;
  }

  .anonymization-warning p {
    margin: 4px 0 0 0;
  }

  /* Bouton Danger spécifique */
  .cvtheque .button-danger {
    background-color: #dc3545; /* Rouge standard */
    color: white;
    transition: background-color 0.2s;
  }

  .cvtheque .button-danger:hover {
    background-color: #c82333; /* Rouge plus foncé au survol */
    box-shadow: 0 2px 5px rgba(220, 53, 69, 0.3);
  }

  /* Petit ajustement d'icône dans le bouton */
  .cvtheque .button-danger i {
    margin-right: 6px;
  }
</style>