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

{% block title %} {{ themeName }} {% endblock %}

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

{% block body %}

    {{ include("base/ban-customer.html.twig", {name_page: "Votre contenu"}) }}

    
    <div class="container-fluid pt-5">
        <div class="container">
            <center>
                {% for key, category in categories %}
                    <a href="#section{{ key }}" class="btn btn-info">{{ category }}</a>
                {% endfor %}
            </center>
            <hr width="100%"/>
        </div>

    </div>
    
    <!-- Class Developpement Start -->
    {% if contentCbaBabyDev|length > 0 %}

        <div class="container-fluid pt-5">
            <div class="container">
                <div class="text-center pb-2" id="section1">
                    <p class="section-title px-5">
                        <span class="px-2">Cool Baby Academy</span>
                    </p>
                    <h1 class="mb-4">Développement</h1>
                </div>
                <div class="row card-group">

                    {% for development in contentCbaBabyDev %}

                        <div class="col-lg-4 mb-5" id="post-{{ development.id }}">
                            
                            <div class="card border-0 bg-light shadow-sm pb-2">

                                {% set contentHasImage = 0 %}
                                {% for content in development.contentMedias %}

                                    {% if content.media.principal %}

                                        {% if content.media.type.id == 10 %}
                                            {% set contentHasImage = 1 %}
                                            <div class="audioPlayer" style="background-size: cover;background-image: url('../..{{ content.media.image }}');width:auto;height:200px;position:relative;" >
                                                <audio controls = 'controls' style="position: absolute;margin-left: 5%;bottom: 3%;width: 90%;">
                                                <source src="{{ content.media.file }}" type="audio/mp3" />
                                                </audio>
                                            </div>

                                        {% elseif content.media.type.id == 11 %}
                                            {% set contentHasImage = 1 %}
                                            <video id="my-video" class="video-js" controls preload="auto" width="100%" height="auto" poster="{{ content.media.image }}" data-setup="{}">
                                                <source src="{{ content.media.file }}" type="video/mp4" />
                                                <!--<source src="/medias/videos/2_Final_Developppement_On_Commence_Ici.webm" type="video/webm" />-->
                                                <p class="vjs-no-js">
                                                    To view this video please enable JavaScript, and consider upgrading to a
                                                    web browser that
                                                    <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                                </p>
                                            </video>

                                        {% endif %}


                                    {% else %}
                                        {% if contentHasImage == 0 %}   
                                        <div width="100%" height="auto">
                                            <img src="{{ development.image }}" width="100%" height="auto" />
                                        </div>
                                        {% endif %}
                                    {% endif %}

                                {% endfor %}

                                <div class="card-body text-center" style="min-height:300px;">
                                    
                                    {% set userAttached = 0 %}
                                    {% for babyComplete in development.cbaBabyContents  %}

                                        {% if babyComplete.baby.id == currentBaby %}
                                            
                                            {% if babyComplete.complete %}
                                                {% set userAttached = 1 %}
                                                <a class="btn btn-success" href="{{ path('delete_completed_content', {'id': babyComplete.id }) }}"><i class="fa-solid fa-check"></i> Terminé</a>
                                            {% else %}
                                                <a class="btn btn-secondary" href="{{ path('add_completed_content', {'id': development.id }) }}"><i class="fa-solid fa-circle"></i> Marquer comme terminé</a>
                                            {% endif %}

                                        {% endif %}

                                    {% endfor %}

                                    {% if userAttached == 0 %}
                                        <a class="btn btn-secondary" href="{{ path('add_completed_content', {'id': development.id }) }}"><i class="fa-solid fa-circle"></i> Marquer comme terminé</a>
                                    {% else %}
                                        {% set userAttached = 0 %}
                                    {% endif %}


                                    <br />
                                    <hr width="100%"/>
                                    <h4 class="card-title">{{ development.name }}</h4>
                                    <p class="card-text" align="left">
                                        {{ development.description|raw }}
                                    </p>
                                    <br />
                                    <hr width="80%"/>
                                    

                                    {% if development.contentMedias|length > 0 %}
                                        {% for pdf in development.contentMedias  %}

                                            {% if not pdf.media.principal %}
                                                <a href="{{ pdf.media.file }}" class="btn btn-primary mt-2 py-2 px-4">{{ pdf.media.name }}</a>
                                            {% endif %}

                                        {% endfor %}
                                    {% endif %}

                                </div>
                            </div>
                            
                        </div>

                    {% endfor %}

                </div>
            </div>
        </div>


        <div class="container-fluid pt-5">
            <div class="container">
                <center>
                    <img src="/images/bebe02.png" alt="Bébé roux" width="20%"  />
                </center>
            </div>
        </div>


    {% endif %}
    <!-- Class Developpement End -->


    <!-- Class Lien Start -->
    {% if contentCbaBabyLien|length > 0 %}

        <div class="container-fluid pt-5">
            <div class="container">
                <div class="text-center pb-2" id="section1">
                    <p class="section-title px-5">
                        <span class="px-2">Cool Baby Academy</span>
                    </p>
                    <h1 class="mb-4">Lien</h1>
                </div>
                <div class="row card-group">

                    {% for development in contentCbaBabyLien %}

                        <div class="col-lg-4 mb-5" id="post-{{ development.id }}">
                            
                            <div class="card border-0 bg-light shadow-sm pb-2">

                                {% set contentHasImage = 0 %}
                                {% for content in development.contentMedias %}

                                    {% if content.media.principal %}

                                        {% if content.media.type.id == 10 %}
                                            {% set contentHasImage = 1 %}
                                            <div class="audioPlayer" style="background-size: cover;background-image: url('../..{{ content.media.image }}');width:auto;height:200px;position:relative;" >
                                                <audio controls = 'controls' style="position: absolute;margin-left: 5%;bottom: 3%;width: 90%;">
                                                <source src="{{ content.media.file }}" type="audio/mp3" />
                                                </audio>
                                            </div>

                                        {% elseif content.media.type.id == 11 %}
                                            {% set contentHasImage = 1 %}
                                            <video id="my-video" class="video-js" controls preload="auto" width="100%" height="auto" poster="{{ content.media.image }}" data-setup="{}">
                                                <source src="{{ content.media.file }}" type="video/mp4" />
                                                <!--<source src="/medias/videos/2_Final_Developppement_On_Commence_Ici.webm" type="video/webm" />-->
                                                <p class="vjs-no-js">
                                                    To view this video please enable JavaScript, and consider upgrading to a
                                                    web browser that
                                                    <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                                </p>
                                            </video>

                                        {% endif %}


                                    {% else %}
                                        {% if contentHasImage == 0 %}
                                        <div width="100%" height="auto">
                                            <img src="{{ development.image }}" width="100%" height="auto" />
                                        </div>
                                        {% endif %}
                                    {% endif %}

                                {% endfor %}

                                <div class="card-body text-center" style="min-height:300px;">
                                    
                                    {% set userAttached = 0 %}
                                    {% for babyComplete in development.cbaBabyContents  %}

                                        {% if babyComplete.baby.id == currentBaby %}
                                            
                                            {% if babyComplete.complete %}
                                                {% set userAttached = 1 %}
                                                <a class="btn btn-success" href="{{ path('delete_completed_content', {'id': babyComplete.id }) }}"><i class="fa-solid fa-check"></i> Terminé</a>
                                            {% else %}
                                                <a class="btn btn-secondary" href="{{ path('add_completed_content', {'id': development.id }) }}"><i class="fa-solid fa-circle"></i> Marquer comme terminé</a>
                                            {% endif %}

                                        {% endif %}

                                    {% endfor %}

                                    {% if userAttached == 0 %}
                                        <a class="btn btn-secondary" href="{{ path('add_completed_content', {'id': development.id }) }}"><i class="fa-solid fa-circle"></i> Marquer comme terminé</a>
                                    {% else %}
                                        {% set userAttached = 0 %}
                                    {% endif %}


                                    <br />
                                    <hr width="100%"/>
                                    <h4 class="card-title">{{ development.name }}</h4>
                                    <p class="card-text" align="left">
                                        {{ development.description|raw }}
                                    </p>
                                    <br />
                                    <hr width="80%"/>
                                    

                                    {% if development.contentMedias|length > 0 %}
                                        {% for pdf in development.contentMedias  %}

                                            {% if not pdf.media.principal %}
                                                <a href="{{ pdf.media.file }}" class="btn btn-primary mt-2 py-2 px-4">{{ pdf.media.name }}</a>
                                            {% endif %}

                                        {% endfor %}
                                    {% endif %}

                                </div>
                            </div>
                            
                        </div>

                    {% endfor %}

                </div>
            </div>
        </div>


        <div class="container-fluid pt-5">
            <div class="container">
                <center>
                    <img src="/images/bebe02.png" alt="Bébé roux" width="20%"  />
                </center>
            </div>
        </div>


    {% endif %}
    <!-- Class Lien End -->


    <!-- Class Apprentissage Start -->
    {% if contentCbaBabyApr|length > 0 %}

        <div class="container-fluid pt-5">
            <div class="container">
                <div class="text-center pb-2" id="section1">
                    <p class="section-title px-5">
                        <span class="px-2">Cool Baby Academy</span>
                    </p>
                    <h1 class="mb-4">Apprentissage</h1>
                </div>
                <div class="row card-group">

                    {% for development in contentCbaBabyApr %}

                        <div class="col-lg-4 mb-5" id="post-{{ development.id }}">
                            
                            <div class="card border-0 bg-light shadow-sm pb-2">

                                {% set contentHasImage = 0 %}
                                {% for content in development.contentMedias %}

                                    {% if content.media.principal %}

                                        {% if content.media.type.id == 10 %}
                                            {% set contentHasImage = 1 %}
                                            <div class="audioPlayer" style="background-size: cover;background-image: url('../..{{ content.media.image }}');width:auto;height:200px;position:relative;" >
                                                <audio controls = 'controls' style="position: absolute;margin-left: 5%;bottom: 3%;width: 90%;">
                                                <source src="{{ content.media.file }}" type="audio/mp3" />
                                                </audio>
                                            </div>

                                        {% elseif content.media.type.id == 11 %}
                                            {% set contentHasImage = 1 %}
                                            <video id="my-video" class="video-js" controls preload="auto" width="100%" height="auto" poster="{{ content.media.image }}" data-setup="{}">
                                                <source src="{{ content.media.file }}" type="video/mp4" />
                                                <!--<source src="/medias/videos/2_Final_Developppement_On_Commence_Ici.webm" type="video/webm" />-->
                                                <p class="vjs-no-js">
                                                    To view this video please enable JavaScript, and consider upgrading to a
                                                    web browser that
                                                    <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                                </p>
                                            </video>

                                        {% endif %}


                                    {% else %}
                                        {% if contentHasImage == 0 %}
                                        <div width="100%" height="auto">
                                            <img src="{{ development.image }}" width="100%" height="auto" />
                                        </div>
                                        {% endif %}
                                    {% endif %}

                                {% endfor %}

                                <div class="card-body text-center" style="min-height:300px;">
                                    
                                    {% set userAttached = 0 %}
                                    {% for babyComplete in development.cbaBabyContents  %}

                                        {% if babyComplete.baby.id == currentBaby %}
                                            
                                            {% if babyComplete.complete %}
                                                {% set userAttached = 1 %}
                                                <a class="btn btn-success" href="{{ path('delete_completed_content', {'id': babyComplete.id }) }}"><i class="fa-solid fa-check"></i> Terminé</a>
                                            {% else %}
                                                <a class="btn btn-secondary" href="{{ path('add_completed_content', {'id': development.id }) }}"><i class="fa-solid fa-circle"></i> Marquer comme terminé</a>
                                            {% endif %}

                                        {% endif %}

                                    {% endfor %}

                                    {% if userAttached == 0 %}
                                        <a class="btn btn-secondary" href="{{ path('add_completed_content', {'id': development.id }) }}"><i class="fa-solid fa-circle"></i> Marquer comme terminé</a>
                                    {% else %}
                                        {% set userAttached = 0 %}
                                    {% endif %}


                                    <br />
                                    <hr width="100%"/>
                                    <h4 class="card-title">{{ development.name }}</h4>
                                    <p class="card-text" align="left">
                                        {{ development.description|raw }}
                                    </p>
                                    <br />
                                    <hr width="80%"/>
                                    

                                    {% if development.contentMedias|length > 0 %}
                                        {% for pdf in development.contentMedias  %}

                                            {% if not pdf.media.principal %}
                                                <a href="{{ pdf.media.file }}" class="btn btn-primary mt-2 py-2 px-4">{{ pdf.media.name }}</a>
                                            {% endif %}

                                        {% endfor %}
                                    {% endif %}

                                </div>
                            </div>
                            
                        </div>

                    {% endfor %}

                </div>
            </div>
        </div>


        <div class="container-fluid pt-5">
            <div class="container">
                <center>
                    <img src="/images/bebe02.png" alt="Bébé roux" width="20%"  />
                </center>
            </div>
        </div>


    {% endif %}
    <!-- Class Apprentissage End -->


    <!-- Class Arrivée Start -->
    {% if contentCbaBabyArrive|length > 0 %}

        <div class="container-fluid pt-5">
            <div class="container">
                <div class="text-center pb-2" id="section1">
                    <p class="section-title px-5">
                        <span class="px-2">Cool Baby Academy</span>
                    </p>
                    <h1 class="mb-4">Arrivée</h1>
                </div>
                <div class="row card-group">

                    {% for development in contentCbaBabyArrive %}

                        <div class="col-lg-4 mb-5" id="post-{{ development.id }}">
                            
                            <div class="card border-0 bg-light shadow-sm pb-2">

                                {% set contentHasImage = 0 %}
                                {% for content in development.contentMedias %}

                                    {% if content.media.principal %}

                                        {% if content.media.type.id == 10 %}
                                            {% set contentHasImage = 1 %}
                                            <div class="audioPlayer" style="background-size: cover;background-image: url('../..{{ content.media.image }}');width:auto;height:200px;position:relative;" >
                                                <audio controls = 'controls' style="position: absolute;margin-left: 5%;bottom: 3%;width: 90%;">
                                                <source src="{{ content.media.file }}" type="audio/mp3" />
                                                </audio>
                                            </div>

                                        {% elseif content.media.type.id == 11 %}
                                            {% set contentHasImage = 1 %}
                                            <video id="my-video" class="video-js" controls preload="auto" width="100%" height="auto" poster="{{ content.media.image }}" data-setup="{}">
                                                <source src="{{ content.media.file }}" type="video/mp4" />
                                                <!--<source src="/medias/videos/2_Final_Developppement_On_Commence_Ici.webm" type="video/webm" />-->
                                                <p class="vjs-no-js">
                                                    To view this video please enable JavaScript, and consider upgrading to a
                                                    web browser that
                                                    <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                                </p>
                                            </video>
                                        
                                        {% endif %}


                                    {% else %}
                                        {% if contentHasImage == 0 %}   
                                        <div width="100%" height="auto">
                                            <img src="{{ development.image }}" width="100%" height="auto" />
                                        </div>
                                        {% endif %}
                                    {% endif %}

                                {% endfor %}

                                <div class="card-body text-center" style="min-height:300px;">
                                    
                                    {% set userAttached = 0 %}
                                    {% for babyComplete in development.cbaBabyContents  %}

                                        {% if babyComplete.baby.id == currentBaby %}
                                            
                                            {% if babyComplete.complete %}
                                                {% set userAttached = 1 %}
                                                <a class="btn btn-success" href="{{ path('delete_completed_content', {'id': babyComplete.id }) }}"><i class="fa-solid fa-check"></i> Terminé</a>
                                            {% else %}
                                                <a class="btn btn-secondary" href="{{ path('add_completed_content', {'id': development.id }) }}"><i class="fa-solid fa-circle"></i> Marquer comme terminé</a>
                                            {% endif %}

                                        {% endif %}

                                    {% endfor %}

                                    {% if userAttached == 0 %}
                                        <a class="btn btn-secondary" href="{{ path('add_completed_content', {'id': development.id }) }}"><i class="fa-solid fa-circle"></i> Marquer comme terminé</a>
                                    {% else %}
                                        {% set userAttached = 0 %}
                                    {% endif %}


                                    <br />
                                    <hr width="100%"/>
                                    <h4 class="card-title">{{ development.name }}</h4>
                                    <p class="card-text" align="left">
                                        {{ development.description|raw }}
                                    </p>
                                    <br />
                                    <hr width="80%"/>
                                    

                                    {% if development.contentMedias|length >= 1 %}
                                        {% for pdf in development.contentMedias  %}

                                            {% if not pdf.media.principal %}
                                                <a href="{{ pdf.media.file }}" class="btn btn-primary mt-2 py-2 px-4">{{ pdf.media.name }}</a>
                                            {% endif %}

                                        {% endfor %}
                                    {% endif %}

                                </div>
                            </div>
                            
                        </div>

                    {% endfor %}

                </div>
            </div>
        </div>


        <div class="container-fluid pt-5">
            <div class="container">
                <center>
                    <img src="/images/bebe02.png" alt="Bébé roux" width="20%"  />
                </center>
            </div>
        </div>


    {% endif %}
    <!-- Class Arrivée End -->

    
    <!-- Class Apaisement Start -->
    {% if contentCbaBabyApaisement|length > 0 %}

        <div class="container-fluid pt-5">
            <div class="container">
                <div class="text-center pb-2" id="section2">
                    <p class="section-title px-5">
                        <span class="px-2">Cool Baby Academy</span>
                    </p>
                    <h1 class="mb-4">Apaisement</h1>
                </div>
                <div class="row card-group">

                    {% for apaisement in contentCbaBabyApaisement %}

                        <div class="col-lg-6 mb-5" id="post-{{ apaisement.id }}">
                            
                            <div class="card border-0 bg-light shadow-sm pb-2">

                                {% set contentHasImage = 0 %}
                                {% for content in apaisement.contentMedias %}

                                    {% if content.media.principal %}

                                        {% if content.media.type.id == 10 %}
                                            {% set contentHasImage = 1 %}
                                            <div class="audioPlayer" style="background-size: cover;background-image: url('../..{{ content.media.image }}');width:auto;height:200px;position:relative;" >
                                                <audio controls = 'controls' style="position: absolute;margin-left: 5%;bottom: 3%;width: 90%;">
                                                <source src="{{ content.media.file }}" type="audio/mp3" />
                                                </audio>
                                            </div>

                                        {% elseif content.media.type.id == 11 %}
                                            {% set contentHasImage = 1 %}
                                            <video id="my-video" class="video-js" controls preload="auto" width="100%" height="auto" poster="{{ content.media.image }}" data-setup="{}">
                                                <source src="{{ content.media.file }}" type="video/mp4" />
                                                <p class="vjs-no-js">
                                                    To view this video please enable JavaScript, and consider upgrading to a
                                                    web browser that
                                                    <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                                </p>
                                            </video>

                                        {% endif %}


                                    {% else %}
                                        {% if contentHasImage == 0 %}
                                        <div width="100%" height="auto">
                                            <img src="{{ apaisement.image }}" width="100%" height="auto" />
                                        </div>
                                        {% endif %}
                                    {% endif %}

                                {% endfor %}

                                <div class="card-body text-center" style="min-height:300px;">
                                    
                                    {% set userAttachedA = 0 %}
                                    {% for babyComplete in apaisement.cbaBabyContents  %}

                                        {% if babyComplete.baby.id == currentBaby %}
                                            
                                            {% if babyComplete.complete %}
                                                {% set userAttachedA = 1 %}
                                                <a class="btn btn-success" href="{{ path('delete_completed_content', {'id': babyComplete.id }) }}"><i class="fa-solid fa-check"></i> Terminé</a>
                                            {% else %}
                                                <a class="btn btn-secondary" href="{{ path('add_completed_content', {'id': apaisement.id }) }}"><i class="fa-solid fa-circle"></i> Marquer comme terminé</a>
                                            {% endif %}

                                        {% endif %}

                                    {% endfor %}

                                    {% if userAttachedA == 0 %}
                                        <a class="btn btn-secondary" href="{{ path('add_completed_content', {'id': apaisement.id }) }}">
                                            <i class="fa-solid fa-circle"></i> Marquer comme terminé
                                        </a>
                                    {% else %}
                                        {% set userAttachedA = 0 %}
                                    {% endif %}


                                    <br />
                                    <hr width="100%"/>
                                    <h4 class="card-title">{{ apaisement.name }}</h4>
                                    <p class="card-text" align="left">
                                        {{ apaisement.description|raw }}
                                    </p>

                                    <br />
                                    <hr width="80%"/>
                                    

                                    {% if apaisement.contentMedias|length > 0 %}
                                        {% for pdf in apaisement.contentMedias  %}

                                            {% if not pdf.media.principal %}
                                                <a href="{{ pdf.media.file }}" class="btn btn-primary mt-2 py-2 px-4">{{ pdf.media.name }}</a>
                                            {% endif %}

                                        {% endfor %}
                                    {% endif %}

                                </div>
                            </div>


                        </div>

                    {% endfor %}

                </div>
                
                <!--
                <div class="row card-group">
                    <div class="col-lg-6 mb-5">
                        <div class="card border-0 bg-light shadow-sm pb-2">
                            <video id="my-video" class="video-js" controls preload="auto" width="100%" height="auto" poster="/images/intro_developpement.jpg" data-setup="{}">
                                <source src="/medias/videos/2_Final_Developppement_On_Commence_Ici.mp4" type="video/mp4" />
                                <source src="/medias/videos/2_Final_Developppement_On_Commence_Ici.webm" type="video/webm" />
                                <p class="vjs-no-js">
                                    To view this video please enable JavaScript, and consider upgrading to a
                                    web browser that
                                    <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                </p>
                            </video>
                            <div class="card-body text-center">
                                <button class="btn btn-secondary"><i class="fa-solid fa-circle"></i> Marquer comme terminé</button>
                                <br />
                                <hr width="100%"/>
                                <h4 class="card-title">Les 5 sens </h4>
                                <p class="card-text">
                                    Le but de cette partie est de t’aider à <strong style="color:#4fbece;">comprendre ton bébé et ses changements</strong> afin de l’accompagner sereinement à chaque étape de son développement.
                                </p>
                                <hr width="100%"/>
                                <a href="" class="btn btn-primary mt-2 py-2 px-4"><i class="fa-solid fa-file-arrow-down"></i> Télécharger contenu 01</a>
                                <a href="" class="btn btn-primary mt-2 py-2 px-4"><i class="fa-solid fa-file-arrow-down"></i> Télécharger contenu 02</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 mb-5">
                        <div class="card border-0 bg-light shadow-sm pb-2">
                            <video id="my-video" class="video-js" controls preload="auto" width="100%" height="auto" poster="/images/intro_apaisement.jpg" data-setup="{}">
                                <source src="/medias/videos/3_FINAL_Apaisement.mp4" type="video/mp4" />
                                <p class="vjs-no-js">
                                    To view this video please enable JavaScript, and consider upgrading to a
                                    web browser that
                                    <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                </p>
                            </video>
                            <div class="card-body text-center">
                                <button class="btn btn-secondary"><i class="fa-solid fa-circle"></i> Marquer comme terminé</button>
                                <br />
                                <hr width="100%"/>
                                <h4 class="card-title">Baby Yoga - Introduction</h4>
                                <p class="card-text">
                                    Dans ce module, il s’agit de te donner accès à <strong style="color:#4fbece;">diverses activités aussi bien pour toi que pour bébé</strong>. <br />
                                    N’oublie pas de lui laisser le temps de s’adapter à ces nouvelles pratiques car pour bébé (par parfois pour toi aussi) c’est quelque chose de nouveau.
                                </p>
                                <hr width="100%"/>
                                <a href="" class="btn btn-primary mt-2 py-2 px-4"><i class="fa-solid fa-file-arrow-down"></i> Télécharger contenu 01</a>
                            </div>
                        </div>
                    </div>
                    
                </div>
                -->
            </div>
        </div>

        <div class="container-fluid pt-5">
            <div class="container">
                <center>
                    <img src="/images/bebe01.png" alt="Bébé roux" width="20%"  />
                </center>
            </div>
        </div>

    {% endif %}
    <!-- Class Apaisement End -->


    <!-- Class Bien-être Start -->
    {% if contentCbaBabyBien|length > 0 %}

        <div class="container-fluid pt-5">
            <div class="container">
                <div class="text-center pb-2" id="section1">
                    <p class="section-title px-5">
                        <span class="px-2">Cool Baby Academy</span>
                    </p>
                    <h1 class="mb-4">Bien-être MAMAN</h1>
                </div>
                <div class="row card-group">

                    {% for development in contentCbaBabyBien %}

                        <div class="col-lg-4 mb-5" id="post-{{ development.id }}">
                            
                            <div class="card border-0 bg-light shadow-sm pb-2">

                                {% set contentHasImage = 0 %}
                                {% for content in development.contentMedias %}

                                    {% if content.media.principal %}

                                        {% if content.media.type.id == 10 %}
                                            {% set contentHasImage = 1 %}
                                            <div class="audioPlayer" style="background-size: cover;background-image: url('../..{{ content.media.image }}');width:auto;height:200px;position:relative;" >
                                                <audio controls = 'controls' style="position: absolute;margin-left: 5%;bottom: 3%;width: 90%;">
                                                <source src="{{ content.media.file }}" type="audio/mp3" />
                                                </audio>
                                            </div>

                                        {% elseif content.media.type.id == 11 %}
                                            {% set contentHasImage = 1 %}
                                            <video id="my-video" class="video-js" controls preload="auto" width="100%" height="auto" poster="{{ content.media.image }}" data-setup="{}">
                                                <source src="{{ content.media.file }}" type="video/mp4" />
                                                <!--<source src="/medias/videos/2_Final_Developppement_On_Commence_Ici.webm" type="video/webm" />-->
                                                <p class="vjs-no-js">
                                                    To view this video please enable JavaScript, and consider upgrading to a
                                                    web browser that
                                                    <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                                </p>
                                            </video>

                                        
                                        {% endif %}


                                    {% else %}
                                        {% if contentHasImage == 0 %}
                                        <div width="100%" height="auto">
                                            <img src="{{ development.image }}" width="100%" height="auto" />
                                        </div>
                                        {% endif %}
                                    {% endif %}

                                {% endfor %}

                                <div class="card-body text-center" style="min-height:300px;">
                                    
                                    {% set userAttached = 0 %}
                                    {% for babyComplete in development.cbaBabyContents  %}

                                        {% if babyComplete.baby.id == currentBaby %}
                                            
                                            {% if babyComplete.complete %}
                                                {% set userAttached = 1 %}
                                                <a class="btn btn-success" href="{{ path('delete_completed_content', {'id': babyComplete.id }) }}"><i class="fa-solid fa-check"></i> Terminé</a>
                                            {% else %}
                                                <a class="btn btn-secondary" href="{{ path('add_completed_content', {'id': development.id }) }}"><i class="fa-solid fa-circle"></i> Marquer comme terminé</a>
                                            {% endif %}

                                        {% endif %}

                                    {% endfor %}

                                    {% if userAttached == 0 %}
                                        <a class="btn btn-secondary" href="{{ path('add_completed_content', {'id': development.id }) }}"><i class="fa-solid fa-circle"></i> Marquer comme terminé</a>
                                    {% else %}
                                        {% set userAttached = 0 %}
                                    {% endif %}


                                    <br />
                                    <hr width="100%"/>
                                    <h4 class="card-title">{{ development.name }}</h4>
                                    <p class="card-text" align="left">
                                        {{ development.description|raw }}
                                    </p>
                                    <br />
                                    <hr width="80%"/>
                                    

                                    {% if development.contentMedias|length > 0 %}
                                        {% for pdf in development.contentMedias  %}

                                            {% if not pdf.media.principal %}
                                                <a href="{{ pdf.media.file }}" class="btn btn-primary mt-2 py-2 px-4">{{ pdf.media.name }}</a>
                                            {% endif %}

                                        {% endfor %}
                                    {% endif %}

                                </div>
                            </div>
                            
                        </div>

                    {% endfor %}

                </div>
            </div>
        </div>


        <div class="container-fluid pt-5">
            <div class="container">
                <center>
                    <img src="/images/bebe02.png" alt="Bébé roux" width="20%"  />
                </center>
            </div>
        </div>


    {% endif %}
    <!-- Class Bien-être End -->


    <!-- Activité Start -->
    {% if contentCbaBabyJeux|length > 0 %}

        <div class="container-fluid py-5">
            <div class="container">
                <div class="text-center pb-2" id="section3">
                    <p class="section-title px-5">
                        <span class="px-2">Cool Baby Academy</span>
                    </p>
                    <h1 class="mb-4">Jeux et Activités</h1>
                </div>

                <div class="row align-items-center border-0 shadow-sm pb-2" style="padding:3%;background-color: rgba(79, 190, 206, .2);">
                    <div class="col-lg-6 align-items-center d-none d-sm-block">
                        <img src="/images/bebe-blond-seul.png" alt="Activite Enfant" width="80%" height="auto" />
                        <br />
                    </div>
                    <div class="col-lg-6 mb-5 mb-lg-0">

                        {% for jeux in contentCbaBabyJeux %}
                            <br />
                            <h2 style="color:black">{{ jeux.name }}</h2>
                            <hr width="100%"/> 
                            <p>
                                {{ jeux.description|raw|nl2br }}
                            </p>
                            <hr width="100%"/> 

                            {% if jeux.contentMedias|length > 0 %}
                                {% for pdf in jeux.contentMedias  %}

                                    {% if not pdf.media.principal %}
                                        <a href="{{ pdf.media.file }}" class="btn btn-primary mt-2 py-2 px-4">{{ pdf.media.name }}</a>
                                    {% endif %}

                                {% endfor %}
                             {% endif %}

                        {% endfor %}
                        <br /><br />
                    </div>
                </div>
        </div>
        </div>

    {% endif %}
    <!-- Activité End -->


    <!-- Class Accueillir Start -->
    {% if contentCbaBabyAccueil|length > 0 %}

        <div class="container-fluid pt-5">
            <div class="container">
                <div class="text-center pb-2" id="section1">
                    <p class="section-title px-5">
                        <span class="px-2">Cool Baby Academy</span>
                    </p>
                    <h1 class="mb-4">Accueillir</h1>
                </div>
                <div class="row card-group">

                    {% for development in contentCbaBabyAccueil %}

                        <div class="col-lg-4 mb-5" id="post-{{ development.id }}">
                            
                            <div class="card border-0 bg-light shadow-sm pb-2">

                                {% set contentHasImage = 0 %}
                                {% for content in development.contentMedias %}

                                    {% if content.media.principal %}

                                        {% if content.media.type.id == 10 %}
                                            {% set contentHasImage = 1 %}
                                            <div class="audioPlayer" style="background-size: cover;background-image: url('../..{{ content.media.image }}');width:auto;height:200px;position:relative;" >
                                                <audio controls = 'controls' style="position: absolute;margin-left: 5%;bottom: 3%;width: 90%;">
                                                <source src="{{ content.media.file }}" type="audio/mp3" />
                                                </audio>
                                            </div>

                                        {% elseif content.media.type.id == 11 %}
                                            {% set contentHasImage = 1 %}
                                            <video id="my-video" class="video-js" controls preload="auto" width="100%" height="auto" poster="{{ content.media.image }}" data-setup="{}">
                                                <source src="{{ content.media.file }}" type="video/mp4" />
                                                <!--<source src="/medias/videos/2_Final_Developppement_On_Commence_Ici.webm" type="video/webm" />-->
                                                <p class="vjs-no-js">
                                                    To view this video please enable JavaScript, and consider upgrading to a
                                                    web browser that
                                                    <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                                </p>
                                            </video>

                                        
                                        {% endif %}


                                    {% else %}
                                        {% if contentHasImage == 0 %}
                                        <div width="100%" height="auto">
                                            <img src="{{ development.image }}" width="100%" height="auto" />
                                        </div>
                                        {% endif %}
                                    {% endif %}

                                {% endfor %}

                                <div class="card-body text-center" style="min-height:300px;">
                                    
                                    {% set userAttached = 0 %}
                                    {% for babyComplete in development.cbaBabyContents  %}

                                        {% if babyComplete.baby.id == currentBaby %}
                                            
                                            {% if babyComplete.complete %}
                                                {% set userAttached = 1 %}
                                                <a class="btn btn-success" href="{{ path('delete_completed_content', {'id': babyComplete.id }) }}"><i class="fa-solid fa-check"></i> Terminé</a>
                                            {% else %}
                                                <a class="btn btn-secondary" href="{{ path('add_completed_content', {'id': development.id }) }}"><i class="fa-solid fa-circle"></i> Marquer comme terminé</a>
                                            {% endif %}

                                        {% endif %}

                                    {% endfor %}

                                    {% if userAttached == 0 %}
                                        <a class="btn btn-secondary" href="{{ path('add_completed_content', {'id': development.id }) }}"><i class="fa-solid fa-circle"></i> Marquer comme terminé</a>
                                    {% else %}
                                        {% set userAttached = 0 %}
                                    {% endif %}


                                    <br />
                                    <hr width="100%"/>
                                    <h4 class="card-title">{{ development.name }}</h4>
                                    <p class="card-text" align="left">
                                        {{ development.description|raw }}
                                    </p>
                                    <br />
                                    <hr width="80%"/>
                                    

                                    {% if development.contentMedias|length > 0 %}
                                        {% for pdf in development.contentMedias  %}

                                            {% if not pdf.media.principal %}
                                                <a href="{{ pdf.media.file }}" class="btn btn-primary mt-2 py-2 px-4">{{ pdf.media.name }}</a>
                                            {% endif %}

                                        {% endfor %}
                                    {% endif %}

                                </div>
                            </div>
                            
                        </div>

                    {% endfor %}

                </div>
            </div>
        </div>


        <div class="container-fluid pt-5">
            <div class="container">
                <center>
                    <img src="/images/bebe02.png" alt="Bébé roux" width="20%"  />
                </center>
            </div>
        </div>


    {% endif %}
    <!-- Class Accueillir End -->


    <!-- Gestion des émotions -->
    {% if contentCbaBabyEmo|length > 0 %}

        <div class="container-fluid pt-5">
            <div class="container">
                <div class="text-center pb-2" id="section2">
                    <p class="section-title px-5">
                        <span class="px-2">Cool Baby Academy</span>
                    </p>
                    <h1 class="mb-4">Gestion des émotions</h1>
                </div>
                <div class="row card-group">

                    {% for apaisement in contentCbaBabyEmo %}

                        <div class="col-lg-4 mb-5" id="post-{{ apaisement.id }}">
                            
                            <div class="card border-0 bg-light shadow-sm pb-2">

                                {% set contentHasImage = 0 %}
                                {% for content in apaisement.contentMedias %}

                                    {% if content.media.principal %}

                                        {% if content.media.type.id == 10 %}
                                            {% set contentHasImage = 1 %}
                                            <div class="audioPlayer" style="background-size: cover;background-image: url('../..{{ content.media.image }}');width:auto;height:200px;position:relative;" >
                                                <audio controls = 'controls' style="position: absolute;margin-left: 5%;bottom: 3%;width: 90%;">
                                                <source src="{{ content.media.file }}" type="audio/mp3" />
                                                </audio>
                                            </div>

                                        {% elseif content.media.type.id == 11 %}
                                            {% set contentHasImage = 1 %}
                                            <video id="my-video" class="video-js" controls preload="auto" width="100%" height="auto" poster="{{ content.media.image }}" data-setup="{}">
                                                <source src="{{ content.media.file }}" type="video/mp4" />
                                                <p class="vjs-no-js">
                                                    To view this video please enable JavaScript, and consider upgrading to a
                                                    web browser that
                                                    <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                                </p>
                                            </video>

                                        {% endif %}


                                    {% else %}
                                        {% if contentHasImage == 0 %}
                                        <div width="100%" height="auto">
                                            <img src="{{ apaisement.image }}" width="100%" height="auto" />
                                        </div>
                                        {% endif %}
                                    {% endif %}

                                {% endfor %}

                                <div class="card-body text-center" style="min-height:300px;">
                                    
                                    {% set userAttachedA = 0 %}
                                    {% for babyComplete in apaisement.cbaBabyContents  %}

                                        {% if babyComplete.baby.id == currentBaby %}
                                            
                                            {% if babyComplete.complete %}
                                                {% set userAttachedA = 1 %}
                                                <a class="btn btn-success" href="{{ path('delete_completed_content', {'id': babyComplete.id }) }}"><i class="fa-solid fa-check"></i> Terminé</a>
                                            {% else %}
                                                <a class="btn btn-secondary" href="{{ path('add_completed_content', {'id': apaisement.id }) }}"><i class="fa-solid fa-circle"></i> Marquer comme terminé</a>
                                            {% endif %}

                                        {% endif %}

                                    {% endfor %}

                                    {% if userAttachedA == 0 %}
                                        <a class="btn btn-secondary" href="{{ path('add_completed_content', {'id': apaisement.id }) }}">
                                            <i class="fa-solid fa-circle"></i> Marquer comme terminé
                                        </a>
                                    {% else %}
                                        {% set userAttachedA = 0 %}
                                    {% endif %}


                                    <br />
                                    <hr width="100%"/>
                                    <h4 class="card-title">{{ apaisement.name }}</h4>
                                    <p class="card-text" align="left">
                                        {{ apaisement.description|raw }}
                                    </p>

                                    <br />
                                    <hr width="80%"/>
                                    

                                    {% if apaisement.contentMedias|length > 0 %}
                                        {% for pdf in apaisement.contentMedias  %}

                                            {% if not pdf.media.principal %}
                                                <a href="{{ pdf.media.file }}" class="btn btn-primary mt-2 py-2 px-4">{{ pdf.media.name }}</a>
                                            {% endif %}

                                        {% endfor %}
                                    {% endif %}

                                </div>
                            </div>


                        </div>

                    {% endfor %}

                </div>

            </div>
        </div>

        <div class="container-fluid pt-5">
            <div class="container">
                <center>
                    <img src="/images/bebe01.png" alt="Bébé roux" width="20%"  />
                </center>
            </div>
        </div>

    {% endif %}
    <!-- Gestion End -->


    



    <!-- Quiz Start -->
    <!--
    <div class="container-fluid py-5">
        <div class="container mt-5">
            <div class="text-center pb-2" id="section4">
                <p class="section-title px-5">
                    <span class="px-2">Cool Baby Academy</span>
                </p>
                <h1 class="mb-4">Fin du mois</h1>
            </div>
            <div class="d-flex justify-content-center row">
                <div class="col-md-10 col-lg-10">
                    <div class="border">
                        <div class="question bg-white p-3 border-bottom">
                            <div class="d-flex flex-row justify-content-between align-items-center mcq">
                                <h4>MCQ Quiz</h4><span>(5 of 20)</span></div>
                        </div>
                        <div class="question bg-white p-3 border-bottom">
                            <div class="d-flex flex-row align-items-center question-title">
                                <h3 class="text-danger">Q.</h3>
                                <h5 class="mt-1 ml-2">Which of the following country has largest population?</h5>
                            </div>
                            <div class="ans ml-2">
                                <label class="radio"> <input type="radio" name="brazil" value="brazil"> <span>Brazil</span></label>    
                            </div>
                            <div class="ans ml-2">
                                <label class="radio"> <input type="radio" name="Germany" value="Germany"> <span>Germany</span></label>    
                            </div>
                            <div class="ans ml-2">
                                <label class="radio"> <input type="radio" name="Indonesia" value="Indonesia"> <span>Indonesia</span></label>    
                            </div>
                            <div class="ans ml-2">
                                <label class="radio"> <input type="radio" name="Russia" value="Russia"> <span>Russia</span></label>    
                            </div>
                        </div>
                        <div class="d-flex flex-row justify-content-between align-items-center p-3 bg-white">
                            <button class="btn btn-primary d-flex align-items-center btn-danger" type="button">
                                <i class="fa fa-angle-left mt-1 mr-1"></i>&nbsp;previous
                            </button>
                            <button class="btn btn-primary border-success align-items-center btn-success" type="button">
                                Next<i class="fa fa-angle-right ml-2"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    -->
    <!-- Quiz End -->


{% endblock %}