{% extends 'base_externa.html' %} 
{% load static %}

{% block contenido %}
{% if pagination %}
<div class="container-xxl py-5">
    <div class="container">
      <div class="text-center wow fadeInUp" data-wow-delay="0.1s">
        <h6 class="section-title bg-white text-center text-primary px-3">Cursos</h6>
        <h1 class="mb-5">Cursos disponibles para ti</h1>
      </div>
      <div class="row g-4 justify-content-center">
        {% for curso in pagination %}
          <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
            <div class="course-item bg-light">
              <div class="position-relative overflow-hidden">
                <img class="img-fluid" src="{{curso.miniatura.url}}" style="width: 500px; height: 200px;">
                <div class="w-100 d-flex justify-content-center position-absolute bottom-0 start-0 mb-4">
                  <a class="flex-shrink-0 btn btn-sm btn-primary px-3 border-end" style="border-radius: 30px 0 0 30px;" href="{% url 'curso:ver_curso' curso.id %}">Leer más</a>
                  <a  href="{% url 'curso:inscripcion' curso.id  %}" class="flex-shrink-0 btn btn-sm btn-primary px-3" style="border-radius: 0 30px 30px 0;">Inscribirse</a>
                </div>
              </div>
              <div class="text-center p-4 pb-0">
                <h5 class="mb-4" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 400px;">{{curso.nombre}}</h5>
              </div>
              <div class="d-flex border-top">
                <small class="flex-fill text-center border-end py-2">
                  <i class="fa fa-user-tie text-primary me-2"></i>{{curso.instructor.first_name}} {{ curso.instructor.last_name }}
                </small>
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  </div>
{% else %}
<div id="class-message" data-class="0" class="container-xxl py-5 wow fadeInUp" data-wow-delay="0.1s">
    <div class="container text-center">
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <i class="bi bi-emoji-frown-fill display-1 text-primary"></i>
                <h1 class="mb-4">No hay cursos disponibles por el momento</h1>
            </div>
        </div>
    </div>
</div>
{% endif %}

{% endblock contenido %}



{% block pag %} {% if pagination %} {% include 'paginacion.html' %} {% endif %} {% endblock pag%}

