{% load static %}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<h2 class="titre-portail"><strong>INSCRIPTIONS</strong> aux plaines et stages</h2>

{% if json.aes_id %}
  {% if not homepage_data %}
    <div class="erreur-message">
      Un problème est survenu. Veuillez réessayer plus tard.
      <pre>
        json.aes_id = {{ json.aes_id }}
        homepage_data = {{ homepage_data|default:"(vide)" }}
      </pre>
    </div>
  {% else %}
    <div class="cartes-enfants">
      {% for child in homepage_data.children %}
        <div class="carte-enfant">
          <div class="contenu-haut">
            <div class="avatar">
              <i class="fas fa-user"></i>
            </div>
            <h3>{{ child.name }}</h3>
            {% if not child.invoiceable_parent_id %}
              <p class="info">Vous n'êtes pas parent facturable.</p>
            {% endif %}
          </div>

          <div class="barre-actions">
            {% if child.invoiceable_parent_id %}
              {% for form in formulaires %}
                {% if child.has_valid_healthsheet and form.slug == "pp-plaines-de-vacances" %}
                  <a class="action unique inscription gauche"
                     href="{{ form.url }}?enfant={{ child.id }}">
                    <i class="fas fa-pen"></i>
                    <span>Inscription</span>
                  </a>
                {% elif form.slug == "pp-fiche-sante" %}
                  <a class="action unique {% if child.has_valid_healthsheet %}valid{% else %}invalid{% endif %} droite"
                     href="{{ form.url }}?enfant={{ child.id }}">
                    <i class="fas {% if child.has_valid_healthsheet %}fa-check{% else %}fa-times{% endif %}"></i>
                    <span>{% if child.has_valid_healthsheet %}Fiche santé{% else %}Compléter la fiche santé{% endif %}</span>
                  </a>
                {% endif %}
              {% empty %}
                <div class="empty">Pas d'action disponible pour cet enfant</div>
              {% endfor %}
            {% elif not check_invoiceable_disponibility.disabled %}
              <a class="action become-invoiceable" href="{{ eservices_url }}pp-me-designer-facturable/?enfant={{ child.id }}">
                <i class="fas fa-pen"></i>
                <span>Devenir facturable</span>
              </a>
            {% else %}
              <a href="#" class="action empty not-invoiceable">
                <i class="fas fa-times"></i>
                <span>Indisponible</span>
              </a>            
            {% endif %}
          </div>
        </div>
      {% endfor %}
    </div>

    <div class="boutons-bas">
      {% if homepage_data.has_plain_registrations %}
        <a class="compte-lien" href="{{ eservices_url }}pp-finaliser-les-inscriptions-aux-plaines/">Finaliser les inscriptions</a>
      {% endif %}
    </div>
  {% endif %}
{% else %}
  <div class="non-inscrit">
    <p>Vous n'êtes pas encore enregistré. Merci de compléter votre inscription.</p>
    <a class="compte-lien" href="{{ eservices_url }}pp-m-enregistrer-en-tant-que-parent">M’inscrire</a>
  </div>
{% endif %}

<!-- BOUTON DE RETOUR AU PORTAIL PARENT -->
<div class="retour-portail-bloc">
  <a href="/bienvenue-sur-le-portail-parent" class="btn-retour">Retour au portail parent</a>
</div>

<style>
.titre-portail {
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 2em;
  margin-bottom: 40px;
}

.cartes-enfants {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.carte-enfant {
  background-color: white;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  width: 240px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.contenu-haut {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar {
  background: #EB028C;
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.carte-enfant h3 {
  font-size: 1em;
  font-weight: bold;
  margin: 0 0 5px;
  text-transform: uppercase;
  text-align: center;
}

.age-enfant {
  font-size: 0.85em;
  color: #555;
  margin-bottom: 10px;
}

.info {
  font-size: 0.85em;
  color: #666;
  margin-top: 10px;
}

.barre-actions {
  display: flex;
  width: 100%;
  margin-top: auto;
  overflow: hidden;
  justify-content: space-between;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

.barre-actions .action {
  flex: 1;
  padding: 12px 20px;
  text-align: center;
  font-size: 0.9em;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-decoration: none;
}

.barre-actions .action i {
  background: white;
  color: black;
  border-radius: 50%;
  font-size: 1.1em;
  padding: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.barre-actions .action.valid {
  background-color: #00BC7D;
  color: white;
}

.barre-actions .action.invalid {
  background-color: #FFB86A;
  color: white;
}

.barre-actions .action.inscription {
  background-color: #e5e5e5;
  color: black;
}

.barre-actions .action.locked {
  background-color: #e0e0e0;
  color: #666;
  cursor: not-allowed;
  pointer-events: none;
}

.barre-actions .droite {
  margin-left: auto;
}

.barre-actions .not-invoiceable {
  background-color: #D32F2F;
  color: black;
  cursor: not-allowed;
}

.barre-actions .become-invoiceable {
  background-color: #FFB86A;
  color: black;
}

.barre-actions .action:not(.not-invoiceable):hover {
  text-decoration: none;
  transform: translateY(10px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
  transition-duration: 500ms;
}

.compte-lien {
  background-color: #EB028C;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.2s;
  display: inline-block;
  margin: 10px;
}

.compte-lien:hover {
  background-color: white;
  color: #EB028C;
  text-decoration: none;
  border: 1px solid #EB028C;
}

.boutons-bas {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

.non-inscrit {
  text-align: center;
  margin-top: 40px;
}

.erreur-message {
  background: #ffe5e5;
  padding: 15px;
  border-radius: 8px;
  color: #800;
  margin: 20px auto;
  max-width: 500px;
}

/* === BOUTON DE RETOUR BLEU === */
.retour-portail-bloc {
  display: flex;
  justify-content: flex-end;
  max-width: 1000px;
  margin: 60px auto 80px auto;
  padding-right: 20px;
}

.btn-retour {
  background-color: #007BFF;
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-retour:hover {
  background-color: #0056b3;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  color: #fff;
  text-decoration: none;
}
</style>