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

{% block title %} Lista de cursos {% endblock title %}

{% block botones %} 
<span >
  <div class="input-group w-100">
    {% if request.user.user_type == 'instructor' %}
      <h1 id="id_usuario" class="d-none">{{request.user.pk}}</h1>
    {% endif %}

    {% if request.user.user_type != 'instructor' %}
      <h1 id="id_super_admin" class="d-none" data-user-type="admin" ></h1>
    {% endif %}
    <input type="text" id="buscador-cursos" class="form-control rounded-start" placeholder="Buscar curso">
  </div> 

  <div id="desplegar_info" style="display: none;">
        
  </div>
</span>

<!-- Mostrar botones en pantallas pequeñas -->
<span class=""> <!-- Muestra solo en pantallas medianas y grandes -->
  <a class="btn btn-outline-primary btn-pill" data-bs-toggle="modal" data-bs-target="#modal-curso">
    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-square-rounded-plus" 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="M9 12h6"></path>
      <path d="M12 9v6"></path>
      <path d="M12 3c7.2 0 9 1.8 9 9s-1.8 9 -9 9s-9 -1.8 -9 -9s1.8 -9 9 -9z"></path>
    </svg>
    Agregar curso
  </a>
</span>

{% if request.user.user_type != 'instructor' %}
<!-- Mostrar botones en pantallas pequeñas -->
<span class=""> <!-- Muestra solo en pantallas medianas y grandes -->
  <a class="btn btn-outline-primary btn-pill" data-bs-toggle="modal" data-bs-target="#modal-etiqueta">
    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-square-rounded-plus" 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="M9 12h6"></path>
      <path d="M12 9v6"></path>
      <path d="M12 3c7.2 0 9 1.8 9 9s-1.8 9 -9 9s-9 -1.8 -9 -9s1.8 -9 9 -9z"></path>
    </svg>
    Agregar etiqueta
  </a>
</span>
<!-- Mostrar botones en pantallas pequeñas -->
<span class=""> <!-- Muestra solo en pantallas medianas y grandes -->
  <a href="{% url 'curso:lista_solicitud_curso' %}" class="btn btn-outline-danger btn-pill">
    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-device-desktop-check" 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 16h-8a1 1 0 0 1 -1 -1v-10a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v8"></path>
      <path d="M15 19l2 2l4 -4"></path>
      <path d="M7 20h4"></path>
      <path d="M9 16v4"></path>
    </svg>
    Solicitudes ({{cantidad}})
  </a>             
</span>
{% endif %}
{% endblock botones %}

{% block contenido %}
{% include 'message.html' %}
<div class="row row-cols-1 row-cols-md-3 g-3" id="card_display">
  {% for curso in pagination %}
  <div class="col-sm-6 col-lg-3">
    <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-2 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 class="card-btn" href="{% url 'curso:ver_curso' curso_id=curso.id  %}">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2 text-muted icon icon-tabler icon-tabler-id" 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="M3 4m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v10a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z"></path>
              <path d="M9 10m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
              <path d="M15 8l2 0"></path>
              <path d="M15 12l2 0"></path>
              <path d="M7 16l10 0"></path>
            </svg> Ver detalles
          </a>
        </div>
    </div>
  </div>
  {% empty %}
  <div class="page-wrapper">
    <div class="page-body">
      <div class="container-xl d-flex flex-column justify-content-center">
        <div class="empty">
          <div class="empty-img"><img src="{% static 'img/mood-sad-2.png' %}" height="128"  alt=""></div>
          <p class="empty-title">No hay cursos registrados</p>
          <p class="empty-subtitle text-muted"> Los cursos aparecerán cuando sean agregados por un instructor o administradores del sistema.
          </p>
        </div>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% endblock contenido %}


{% block contenidoBuscador %} 
<div id="display_search_buscador" style="width: 100%;display: flex;flex-direction: row;flex-wrap: wrap; ">
</div>
{% endblock contenidoBuscador %}

{% block pagination %} 
{% include 'paginacion.html' %}
{% endblock pagination %}

{% block js %} 
<script src="{% static 'js/buscador_instructorYsuper_admin.js' %}"></script>
{% include 'curso/creacion-curso.html' %}
{% include 'curso/agregar-etiqueta.html' %}
{% endblock js %}
