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

{% block title %}Vos cours{% endblock %}

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

{% block body %}

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

    <!-- Class Month Start -->
    <div class="container-fluid pt-5">
      <div class="container">
        <div class="text-center pb-2">
          <p class="section-title px-5">
            <span class="px-2">Cool Baby Academy</span>
          </p>
          <h1 class="mb-4">Vos différents mois</h1>
        </div>

        {% if contentCbaBaby|length > 0 %}

          <div class="row">
            
            {% for content in contentCbaBaby %}

              <div class="col-lg-4 mb-5">
                <div class="card border-0 bg-light shadow-sm pb-2">
                  <img class="card-img-top mb-2" src="{{ content.theme.image }}" alt="" />
                  <div class="card-body text-center">
                    <h4 class="card-title"> {{ content.theme.nameMonth }} </h4>
                    <p class="card-text">
                      {{ content.theme.description }}
                    </p>
                  </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>Age :</strong>
                      </div>
                      <div class="col-6 py-1">{{ content.theme.ageBabyConcerned|capitalize }}</div>
                    </div>
                    <div class="row border-bottom">
                      <div class="col-6 py-1 text-right border-right">
                        <strong>Thème</strong>
                      </div>
                      <div class="col-6 py-1">{{ content.theme.subject }}</div>
                    </div>
                    -->
                    
                    <div class="row border-bottom">
                      <div class="col-6 py-1 text-right border-right">
                        <strong>Progression</strong>
                      </div>
                      <div class="col-6 py-1">
                        <div class="progress" style="margin-top: 4px;">
                            <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: {{ content.percentage }}%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <a href="/contents/theme/{{ content.theme.id }}" class="btn btn-primary px-4 mx-auto mb-4">Voir</a>
                </div>
              </div>

            {% endfor %}

          </div>

        {% else %}
            <div class="text-center pb-2">
                <p>
                    Le contenu pour ton bébé (ou ta grossesse) n'est pas encore disponible.<br />
                    Merci de compléter tes informations en cliquant sur ce bouton <br /><br /> <!--<strong><a href="/parent/{{ user.id }}/survey1">Quel âge a votre bébé ?</a></strong>-->
                    <a href="/ajouter-enfant" class="btn btn-primary">Je complète mes informations</a>
                </p>
            </div>
        {% endif %}

      </div>
    </div>
    <!-- Class Month End -->

    <div class="d-flex justify-content-center">
      {% do contentCbaBaby.setPageRange(2)  %}
      {{ knp_pagination_render(contentCbaBaby, 'base/pagination.html.twig') }}
    </div>

    <div class="alert alert-warning text-center" role="alert">
      Si vous avez un abonnement pour 2 enfants, ou pour votre grossesse ET votre premier enfant, vous pouvez ajouter votre grossesse ou votre 2nd enfant en cliquant <strong><a href="/babies">ici</a></strong>.
    </div>

{% endblock %}