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

{% block contenido %}
  <div class="container-xxl px-5 py-4">
    <div class="container">
      {% if cursos.paginator.count > 0 %}
        <div class="text-center mb-3">
          <h6 class="section-title bg-white text-primary px-3">Cursos</h6>
          <h1>Cursos inscritos</h1>
        </div>
        <div class="row g-3 justify-content-center">
          {% for curso in cursos %}
            <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 class="flex-shrink-0 btn btn-sm btn-danger px-3" href="{% url 'curso:eliminar_suscripcion' curso.id %}" data-bs-toggle="modal" data-bs-target="#confirmacionDesinscripcion{{ curso.id }}">Desinscribirme</a>
                    <a href="{% url 'clase:clases_estudiante' curso.id  %}" class="flex-shrink-0 btn btn-sm btn-primary px-3" style="border-radius: 0 30px 30px 0;">Ver clases</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}}
                  </small>
                </div>
              </div>
            </div>

            <!-- Modal de Confirmación Desinscripción -->
            <div class="modal fade" id="confirmacionDesinscripcion{{ curso.id }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Confirmación</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                    ¿Estás seguro de que quieres desinscribirte de este curso?
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <a class="btn btn-danger" href="{% url 'curso:eliminar_suscripcion' curso.id %}">Desinscribirme</a>
                  </div>
                </div>
              </div>
            </div>
              <!-- Modal de Confirmación Desinscripción -->
          {% endfor %}
        </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 %}
    </div>
  </div>

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