{% load static %}
<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 }}imio-candidature-spontanee-liaison-fiche/">
            Formulaire de dépôt de CV
        </a>
      </div>
    {% else %}
      {% if not cv_expiration.count %}
        <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>
        </div>
      {% else %}
          <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_expiration.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>
      {% endif %}
    {% 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 %}
        <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 %}</span></p>
            {% if candidature.workflow.fields.date_epreuve or candidature.workflow.fields.date_epreuve.heure_epreuve or candidature.workflow.fields.lieu_epreuve or candidature.workflow.fields.infos_complementaires_epreuve or candidature.workflow.fields.date_echeance or candidature.workflow.fields.date_reservation_epreuve %}
            <div class="epreuve-info">
                <h4>Informations importantes concernant l'épreuve</h4>
                <div class="info-content">
                    {% if candidature.workflow.fields.date_epreuve or candidature.workflow.fields.date_reservation_epreuve %}
                    {% with date_finale=candidature.workflow.fields.date_reservation_epreuve|default:candidature.workflow.fields.date_epreuve %}
                    <p class="info-ligne">
                        <i class="fas fa-calendar-alt"></i>
                        <strong>Date :</strong>
                        <span>{{ date_finale|date:"l d F Y" }}{% if candidature.workflow.fields.date_reservation_epreuve or candidature.workflow.fields.heure_epreuve %} à {% firstof candidature.workflow.fields.heure_reservation_epreuve candidature.workflow.fields.heure_epreuve %}{% endif %}</span>
                    </p>
                    {% endwith %}
                    {% endif %}
                    {% if candidature.workflow.fields.lieu_epreuve %}
                    <p class="info-ligne">
                        <i class="fas fa-map-marker-alt"></i>
                        <strong>Lieu :</strong>
                        <span>{{ candidature.workflow.fields.lieu_epreuve }}</span>
                    </p>
                    {% endif %}
                    {% if candidature.workflow.fields.date_echeance and status == "Invitation à l'épreuve" %}
                    <p class="info-ligne echeance">
                        <i class="fas fa-exclamation-triangle"></i>
                        <strong>Date limite d'inscription :</strong>
                        <span>{{ candidature.workflow.fields.date_echeance|date:"l d F Y" }}</span>
                    </p>
                    {% endif %}
                    {% if candidature.workflow.fields.infos_complementaires_epreuve %}
                    <div class="info-complementaires">
                        <p class="info-ligne">
                            <i class="fas fa-info-circle"></i>
                            <strong>Informations complémentaires :</strong>
                        </p>
                        <div class="complement-texte">
                            {{ candidature.workflow.fields.infos_complementaires_epreuve|safe }}
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endif %}
            <div class="candidature-actions">
                {% with url_form=eservices_url|add:"imio-projet-rh-changement-de-statut/" %}
                {% if status == "Invitation à l'épreuve" %}
                {% with url_form_agenda=candidature.workflow.fields.lien_formulaire_reservation %}
                <a href="{% if not url_form_agenda %}{{ url_form }}?dossier={{ candidature.id }}&action=accept_test_by_guichet{% else %}{{ url_form_agenda }}?dossier={{ candidature.id }}{% endif %}" title="{% if not url_form_agenda %}Accepter l'invitation à l'épreuve{% else %}Réserver un créneau pour l'épreuve{% endif %}" class="pk-button cv-button">{% if not url_form_agenda %}Accepter{% else %}Réserver un créneau{% endif %}</a>
                {% endwith %}
                <a href="{{ url_form }}?dossier={{ candidature.id }}&action=deny_test_by_guichet" title="Refuser l'invitation à l'épreuve" class="pk-button cv-button cancel-button">Refuser</a>
                {% elif status == "En attente de l'épreuve" %}
                <a href="{{ url_form }}?dossier={{ candidature.id }}&action=cancel_test_by_guichet" title="Annuler votre participation à l'épreuve" class="pk-button cv-button">Annuler</a>
                {% elif status == "Proposition CVThèque" %}
                <a href="{{ url_form }}?dossier={{ candidature.id }}&action=accept_cvtheque_by_guichet" title="Accepter l'intégration dans la CVThèque" class="pk-button cv-button">Accepter</a>
                <a href="{{ url_form }}?dossier={{ candidature.id }}&action=reject_cvtheque_by_guichet" title="Refuser l'intégration dans la CVThèque" class="pk-button cv-button cancel-button">Refuser</a>
                {% else %}
                <div class="no-action">
                    <p>Pas d'action disponible</p>
                </div>
                {% endif %}
                {% endwith %}
            </div>
        </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;
    }

    .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;
    }
</style>