{% extends 'base_externa.html' %} 
{% load static %}
{% block contenido %} 
<div class="container-xxl py-5">
  <div class="container">
    <div class="col-lg-12 wow fadeInUp" data-wow-delay="0.3s">
      <h1 class="mb-4">Resultados de la búsqueda: "{{ query }}"</h1>
    </div>
    <div class="text-center wow fadeInUp" data-wow-delay="0.1s">
      {% if not request.user.is_authenticated and pagination.start_index %}
        <h6 class="section-title bg-white text-center text-primary px-3">Inicia sesión para inscribirte a un curso</h6>
      {% endif %}  
    </div>
    <div class="row g-4">
      {% for curso in page_obj %}
      <div class="col-sm-6 col-lg-3 mt-4">
        <div class="card">
          <a href="#" class="d-block"><img src="{{curso.miniatura.url}}" style="max-width: 100%; height: 160px;" class="card-img-top"></a>
            <div class="card-body">
              <div class="d-flex align-items-center">
                <span class="avatar me-3 rounded">
                  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-info-square" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path d="M12 9h.01"></path>
                      <path d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z"></path>
                    <path d="M11 12h1v4h1"></path> 
                  </svg>
                </span>
                <span class="text-truncate w-100">{{curso.nombre}}</span>
              </div>
            </div>
            <div class="d-flex">
              <a href="{% url 'curso:ver_curso' curso.id %}" class="btn" style="display: flex; align-items: center; justify-content: center; padding: 1rem 1.25rem; text-align: center; transition: background .3s; border-top: 1px solid var(--tblr-border-color); flex: 1; color: inherit;font-weight: 500;">
                Ver curso
              </a>
              {% if request.user.is_authenticated  %}
                <a href="{% url 'curso:inscripcion' curso.id %}" class="btn" style="display: flex; align-items: center; justify-content: center; padding: 1rem 1.25rem; text-align: center; transition: background .3s; border-top: 1px solid var(--tblr-border-color); flex: 1; color: white;font-weight: 500; background-color: #2F3659;">
                  Inscribirse
                </a>
              {% endif %}
            </div>
        </div>
      </div>
      {% empty %}
      <div 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 que coincidan con la búsqueda</h1>
                </div>
            </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</div>


  
     
  {% endblock contenido %}

  {% block pag %} 

  {% if pagination %}
  <!-- Paginacion de los cursos -->
  {% include 'paginacion.html' %}
  {% endif %}
  <!-- Fin de la paginacion de los cursos -->
    
 {% endblock pag%}


{% block modal_externo %} 
{% include 'usuario/modal-login.html' %} 
{% include 'usuario/modal-registro.html' %}
{% endblock modal_externo %}

{% block js_externo %} 
{% include 'usuario/modal-script.html' %}
{% endblock js_externo %}