{% extends 'base.html.twig' %}

{% block title %}Vos bébés{% endblock %}

{% block customNavigation %}
    {% include "base/nav-customer.html.twig" %}
{% endblock %}

{% block body %}
    
    {{ include("base/ban-customer.html.twig", {name_page: "Vos bébés"}) }}

    {% if babies|length > 0 %}

        {% if canAddBaby %}
        <div class="d-flex flex-row-reverse">
            <a href="/ajouter-enfant" class="btn btn-primary">Ajouter un enfant</a>
        </div>
        <hr />
        {% endif %}

        <div class="row col-12">

            {% for baby in babies %}

                <div class="col-lg-4 mb-5" >
                    <div class="card border-0 bg-light shadow-sm pb-2">
                        <div class="card-body text-center">
                            <h4 class="card-title">{{ baby.name }}</h4>
                        </div>
                        <div class="card-footer bg-transparent py-4 px-5">
                            <div class="row border-bottom">
                                <div class="col-6 py-1 text-right border-right">
                                    <strong>Date de naissance</strong>
                                </div>
                                <div class="col-6 py-1">
                                    {% if baby.dateBirth is null %}
                                        <i>Pas encore indiqué</i><br />
                                        <!--<a href="/ajouter/date/{{ baby.id }}">Votre enfant est né ?</a>-->
                                        <br /><br />
                                    {% else %}
                                        {{ baby.dateBirth|date("d/m/Y", "Europe/Paris") }}
                                    {% endif %}
                                </div>
                            </div>
                            {% if baby.dateBirth is null %}
                                <br />
                                <div class="alert alert-info">
                                    <strong>Information : </strong> Ton enfant est né ?
                                    Indique nous son prénom et sa date de naissance en cliquant juste <a href="/ajouter/date/{{ baby.id }}"><strong>ici</strong></a>.<br />
                                    <strong>Attention cette action n'est possible qu'une seule fois !</strong>
                                </div>
                            {% endif %}
                            <!--
                            <div class="row border-bottom">
                                <div class="col-6 py-1 text-right border-right">
                                    <strong>Age</strong>
                                </div>
                                <div class="col-6 py-1">{{ baby.month }} mois</div>
                            </div>
                            -->
                        </div>

                        {% if numberBabies > 1 %}
                            {% if baby.current %}
                                <center>
                                    <br />
                                    <span style="color:green;"><strong>Son contenu est activé</strong></span>
                                </center>
                            {% else %}
                                <a href="{{ path('activate_baby', {'id': baby.id }) }}" class="btn btn-primary px-4 mx-auto mb-4">Activer</a>
                            {% endif %}
                        {% endif %}
                    </div>
                </div>

            {% endfor %}

        </div>

        <div class="alert alert-warning text-center" role="alert">
            Pour accéder au contenu de votre enfant, il suffit de l'activer sur cette page (si vous avez plusieurs bébés enregistrés) et de cliquer juste <strong><a href="/classes">ici</a></strong>.
        </div>
        
    {% else %}

        <div class="text-center pb-2">
            <p>
                Tu n'as pas encore saisi les informations concernant ton bébé (ou ta grossesse).<br />
                <!--Merci de saisir sa date de naissance en suivant ce lien : <strong><a href="/ajouter-enfant">Quel âge a votre bébé ?</a></strong>-->
                Merci de compléter tes informations en cliquant sur ce bouton <br /><br />
                <a href="/ajouter-enfant" class="btn btn-primary">Je complète mes informations</a>
            </p>
        </div>

    {% endif %}

    


{% endblock %}