{% load static %}
<h2 class="titre-portail portail-parent">Mes <strong>ENFANTS</strong></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 portail-parent">
      {% 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>
            <p class="age-enfant">{{ child.age }} ans</p>
            {% if homepage_data.parent_id != child.invoiceable_parent_id %}
	    <p class="info">Vous n'êtes pas parent facturable.</br>
	    {% if homepage_data.is_become_invoiceable_available %}<a href={{ eservices_url }}portail-parent/pp-me-designer-facturable/?enfant={{ child.id }}>Devenir facturable{% endif %}</a></p>
            {% endif %}
          </div>

          <div class="barre-actions">
            {% for form in child.forms %}
              {% if form.slug == "pp-fiche-sante" %}
                <a class="action gauche {{ form.status }}"
                   href="{% if form.status != 'locked' %}{{ eservices_url }}portail-parent/{{ form.slug }}/?enfant={{ child.id }}{% else %}#{% endif %}"
                   title="{{ form.title }}">
                  {% if form.status == "valid" %}
                    <i class="fas fa-check"></i>
                  {% else %}
                    <i class="fas fa-times"></i>
                  {% endif %}
                  <span>{{ form.title }}</span>
                </a>
              {% endif %}
            {% endfor %}
            {% if homepage_data.is_update_child_available %}
            <div class="action-wrapper droite">
		          <a href="{{eservices_url}}portail-parent/pp-modifier-les-donnees-d-un-enfant/?enfant={{child.id}}" class="action droite">
                <i class="fas fa-gears"></i>
                <span>Modifications</span>
              </a>
            </div>
            {% endif %}
          </div>
        </div>
      {% endfor %}
    </div>

    <div class="boutons-bas portail-parent">
      <a class="compte-lien" href="{{ eservices_url }}pp-enregistrer-un-enfant">Enregistrer un enfant</a>
      {% if homepage_data.is_update_parent_available %}<a class="compte-lien" href="{{ eservices_url }}pp-modifier-mes-donnees-parent">Modifier mes données parent</a>{% endif %}
      {% 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 %}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

<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;
}
.compte-lien {
  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;
  text-decoration: none;
}

.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 {
  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;
}

.barre-actions .action,
.barre-actions .action-wrapper {
  flex: 1;
}

.barre-actions .action {
  padding: 12px 0;
  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;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.barre-actions .action:hover {
  background-color: #dcdcdc;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.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 .gauche {
  background-color: #e5e5e5;
  color: black;
  border-bottom-left-radius: 16px;
}

.barre-actions .droite {
  background-color: #e5e5e5;
  color: black;
  border-bottom-right-radius: 16px;
}

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

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

.barre-actions .action.locked {
  background-color: #ccc;
  color: white;
  cursor: not-allowed;
}

.barre-actions .gauche i,
.barre-actions .droite i {
  font-size: 1.2em;
}

.compte-lien {
  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;
  text-decoration: none;
}

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