{% extends 'layout/base.twig' %}
{% block title %}Mis cursos · {% endblock %}

{# La pantalla a la que se vuelve.

   El orden es el de lo que necesita alguien que retoma: seguir donde quedó, ver sus
   cursos —cada uno con qué toca ahora— y ver hacia qué certificación van. Antes era un
   título y una barra por curso, que no dice qué hacer. #}

{% block content %}
<div class="pagina campus">

  {# El saludo con el nombre y una línea de estado. Quien vuelve necesita saber en qué
     punto está antes de ver la lista; el título «Mis cursos» no dice nada que la
     navegación no dijera ya. #}
  <header class="campus-saludo">
    <h1>{{ nombre ? 'Hola, ' ~ nombre|split(' ')|slice(0, 2)|join(' ') : 'Tus cursos' }}</h1>
    <p>
      {%- if enMarcha|length -%}
        Tienes {{ enMarcha|length }} curso{{ enMarcha|length == 1 ? '' : 's' }} en marcha
      {%- else -%}
        Todavía no has empezado ningún curso
      {%- endif -%}
      {%- if certificaciones|length %} y
        {{ certificaciones|length == 1 ? 'una certificación' : certificaciones|length ~ ' certificaciones' }}
        en camino{% endif -%}.
    </p>
  </header>

  {# ── Retomar ──
     Va antes que nada y ocupa el ancho: es la única acción que importa al entrar. #}
  {% if retomar %}
   <div class="campus-arriba">
    <section class="retomar">
      <a class="retomar-portada"
         href="{{ url('/aula/' ~ retomar.curso.slug ~ '/actividad/' ~ retomar.actividad.id) }}"
         tabindex="-1" aria-hidden="true">
        {% include 'parciales/portada-curso.twig' with {curso: retomar.curso} %}
      </a>

      <div class="retomar-cuerpo">
        <p class="retomar-donde">
          {% include 'parciales/icono.twig' with {n: retomar.actividad.tipo, px: 15} %}
          {{ retomar.curso.titulo }}
        </p>

        <h1>{{ retomar.actividad.titulo }}</h1>

        <div class="retomar-pie">
          <div class="retomar-avance">
            <div class="barra" role="progressbar"
                 aria-valuenow="{{ retomar.avance.porcentaje }}" aria-valuemin="0" aria-valuemax="100">
              <div class="barra-relleno" style="width: {{ retomar.avance.porcentaje }}%"></div>
            </div>
            <span><strong>{{ retomar.avance.completadas }} de {{ retomar.avance.total }}</strong> actividades</span>
          </div>

          <a class="btn btn-principal btn-grande"
             href="{{ url('/aula/' ~ retomar.curso.slug ~ '/actividad/' ~ retomar.actividad.id) }}">
            {{ retomar.avance.completadas > 0 ? 'Continuar' : 'Empezar' }}
            {% include 'parciales/icono.twig' with {n: 'adelante', px: 16} %}
          </a>
        </div>
      </div>
    </section>

    {# El sello más cercano, al lado de «retomar»: son el par que ordena la pantalla
       —dónde sigo, y para qué—. Con los cursos ya aprobados y su nota, para que la meta
       no sea una barra sino una lista de lo que falta. #}
    {% if certificaciones %}
      {% set cerca = certificaciones|first %}
      <aside class="campus-sello">
        <p class="pastilla pastilla-ruta">
          {%- set faltan = cerca.avance.requeridos - cerca.avance.completados -%}
          {{ faltan == 1 ? 'A un curso del sello' : 'A ' ~ faltan ~ ' cursos del sello' }}
        </p>
        <h2><a href="{{ url('/certificaciones/' ~ cerca.slug) }}">{{ cerca.titulo }}</a></h2>

        <div class="campus-sello-avance">
          <div class="barra" role="progressbar"
               aria-valuenow="{{ cerca.avance.porcentaje }}" aria-valuemin="0" aria-valuemax="100">
            <div class="barra-relleno" style="width: {{ cerca.avance.porcentaje }}%"></div>
          </div>
          <span>{{ cerca.avance.completados }} de {{ cerca.avance.requeridos }}</span>
        </div>

        <a class="btn btn-ancho" href="{{ url('/certificaciones/' ~ cerca.slug) }}">Ver qué falta</a>
      </aside>
    {% endif %}
   </div>
  {% else %}
    <header class="pagina-cabecera">
      <p class="eyebrow">Tu campus</p>
      <h1>Mis cursos</h1>
    </header>
  {% endif %}

  {# ── Cursos ── #}
  {% if enMarcha is not empty or terminados is not empty %}
    <section class="seccion">
      <header class="seccion-cabecera">
        <div>
          <p class="eyebrow">Tus cursos</p>
          <h2>
            {%- if vista == 'terminados' -%}
              Terminados
            {%- elseif vista == 'en-marcha' -%}
              En marcha
            {%- else -%}
              {{ cuentas.en_marcha }} en marcha
              {%- if cuentas.terminados %}, {{ cuentas.terminados }} terminado{{ cuentas.terminados == 1 ? '' : 's' }}{% endif -%}
            {%- endif -%}
          </h2>
        </div>
        <a class="enlace-flecha" href="{{ url('/cursos') }}">Ver el catálogo</a>
      </header>

      {# Pestañas. Con dos cursos sobran; con quince —lo normal al segundo año— la
         parrilla mezcla lo que está a medias con lo que ya se cerró, y lo primero es lo
         que se viene a buscar. «Certificados» cambia de pantalla: son documentos, no
         cursos, y meterlos en esta parrilla los haría parecer otra cosa. #}
      {% if cuentas.terminados or certificados %}
        <nav class="explorar-pestanas" aria-label="Qué cursos mostrar">
          <a href="{{ url('/mis-cursos') }}" class="{{ not vista ? 'activa' : '' }}">
            Todos <span>{{ cuentas.en_marcha + cuentas.terminados }}</span>
          </a>
          <a href="{{ url('/mis-cursos?vista=en-marcha') }}" class="{{ vista == 'en-marcha' ? 'activa' : '' }}">
            En marcha <span>{{ cuentas.en_marcha }}</span>
          </a>
          {% if cuentas.terminados %}
            <a href="{{ url('/mis-cursos?vista=terminados') }}" class="{{ vista == 'terminados' ? 'activa' : '' }}">
              Terminados <span>{{ cuentas.terminados }}</span>
            </a>
          {% endif %}
          {% if certificados %}
            <a href="{{ url('/mis-certificados') }}">
              Certificados <span>{{ certificados }}</span>
            </a>
          {% endif %}
        </nav>
      {% endif %}

      {# La misma tarjeta del catálogo: una parrilla de cursos es la misma pieza esté
         donde esté, y mantener dos versiones garantiza que se separen. #}
      <div class="grid-cursos">
        {% for item in enMarcha %}
          {% include 'parciales/tarjeta-curso.twig' with {
            curso:    item.curso,
            certs:    certsPorCurso[item.curso.id]|default([]),
            avance:   item.avance,
            inscrito: true,
          } %}
        {% endfor %}

        {% for item in terminados %}
          <article class="curso-tarjeta curso-tarjeta-listo">
            <a class="curso-tarjeta-foto" href="{{ url('/aula/' ~ item.curso.slug) }}" tabindex="-1" aria-hidden="true">
              {% include 'parciales/portada-curso.twig' with {curso: item.curso, certs: certsPorCurso[item.curso.id]|default([])} %}
              <span class="curso-sello curso-sello-listo">
                {% include 'parciales/icono.twig' with {n: 'completa', px: 13} %}
                Terminado
              </span>
            </a>

            <div class="curso-tarjeta-cuerpo">
              <p class="curso-tarjeta-meta">
                <span>{{ item.curso.nivel|capitalize }}</span>
                {% if item.curso.duracion_horas %}<span>{{ item.curso.duracion_horas }} h</span>{% endif %}
              </p>

              <h3><a href="{{ url('/aula/' ~ item.curso.slug) }}">{{ item.curso.titulo }}</a></h3>

              <div class="curso-tarjeta-pie">
                {% if item.inscripcion.nota_final is not null %}
                  <p class="curso-tarjeta-nota">
                    Aprobado · <strong>{{ item.inscripcion.nota_final|nota }}%</strong>
                  </p>
                {% endif %}
                <a class="btn btn-ancho" href="{{ url('/mis-certificados') }}">Ver el certificado</a>
              </div>
            </div>
          </article>
        {% endfor %}

        {# En vez de dejar el hueco de la última fila, se empuja al curso que cierra la
           ruta: es la acción que de verdad tiene sentido ofrecer acá. #}
        {% if certificaciones %}
          {% set cerca = certificaciones|first %}
          {% if cerca.avance.requeridos > cerca.avance.completados %}
            <article class="curso-tarjeta curso-tarjeta-empuje">
              <div class="curso-tarjeta-cuerpo">
                <span class="empuje-mas" aria-hidden="true">+</span>
                <h3>
                  Te falta{{ cerca.avance.requeridos - cerca.avance.completados == 1 ? '' : 'n' }}
                  {{ cerca.avance.requeridos - cerca.avance.completados }}
                  curso{{ cerca.avance.requeridos - cerca.avance.completados == 1 ? '' : 's' }}
                  para el sello
                </h3>
                <p class="curso-tarjeta-resumen">
                  {{ cerca.titulo|replace({'Certificado en ': ''}) }} se cierra con lo que te queda.
                </p>
                <div class="curso-tarjeta-pie">
                  <a class="btn btn-principal btn-ancho" href="{{ url('/certificaciones/' ~ cerca.slug) }}">
                    Ver qué falta
                  </a>
                </div>
              </div>
            </article>
          {% endif %}
        {% endif %}
      </div>
    </section>
  {% else %}
    <p class="vacio">
      Todavía no estás inscrito en ningún curso.
      <a href="{{ url('/cursos') }}">Ver el catálogo</a>.
    </p>
  {% endif %}

</div>
{% endblock %}