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

{% block body %}
<nav aria-label="breadcrumb">
  <ol  class="breadcrumb bg-primary text-white">
    <li class="breadcrumb-item">{{ lesson.title }}</li>
  </ol>
</nav>
<article class="lessons mt-5 container ">
  <div class="row justify-content-between">
    <div class="col-4">
      <p class="text-muted text-uppercase">Les contenus</p>
      <div class="timeline">
        <ul id="sortable" class="mb-5">
          {% for rank in ranks %}
          <li class="align-items-center">
            <div>
              <a href="{{  path('content_learn', {lesson_id:rank.lesson.id, content_id:rank.content.id, 'slug':rank.content.slug}) }}">{{ rank.content.title }}</a>

              <form method="POST" class="ranker" name="ranker" action="">
                <input type="hidden" name="rank" class="rank rank-{{ loop.index0 }}" value="{{ rank.rank }}">
                <input type="hidden" name="lesson_id" class="lesson_id_{{ loop.index0 }}" value="{{ rank.lesson.id }}"/>
                <input type="hidden" class="index-{{ loop.index0 }}" value="{{ rank.content.id }}"/>
              </form>
            </div>
          </li>

        {% endfor %}
      </ul>
    </div>
    {% if is_granted('ROLE_ADMIN') %}
    <div>
      <p class="order btn btn-primary"><a>Modifier l'ordre des lessons</a></p>
      <p><small class="buttonOrder">Déplacez les contenus vers le haut ou le bas pour les réordonner</small></p>
      <button class="buttonOrder btn btn-primary validate">Valider les changements</button>
      <p class="mt-3 success"></p>
    </div>
    {% endif %}

  </div>
  <div class="col-8">
    <h2 class="mb-4 text-primary">{{ lesson.title }}</h2>

<div class="bg-white border rounded p-3">
    <h5>Vos formateurs :</h5>
    <div class="row justify-content-around p-0">
    {% for formateur in lesson.users %}
    {% if 'ROLE_FORMATEUR' in formateur.roles  %}
    <div class="row p-2 justify-content-start col-12 align-items-center">
      <div class="col-1">
        <img class="w-100" src="{{ asset('images/avatar/'~ formateur.avatar) }}"/>
      </div>
      <div class="col-8">
        {{ formateur.firstname }} {{ formateur.lastname }}
      </div>
    </div>
    {% endif %}
    {% endfor %}
  </div>
</div>

<div class="bg-white border rounded p-3 mt-4">

    <p>
      <strong>
        Description du cours
      </strong>
    </p>
    <p>
      {{ lesson.description | raw}}
    </p>
  </div>
    {% for rank in ranks %}
    {% if loop.first %}
      <p class="mt-4 text-center"><a class="btn btn-primary" href="{{  path('content_learn', {lesson_id:rank.lesson.id, content_id:rank.content.id, 'slug':rank.content.slug}) }}">Allez hop, on y va !</a></p>
      {% endif %}
    {% endfor %}
</div>
</div>
</article>

{% endblock %}