{% 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-primary px-3">Conferencias</h6>
            <h1 class="mb-5">Conferencias disponibles</h1>
        </div>
        <div class="row g-4">
            {% for videollamadas 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="overflow-hidden">
                        <img class="img-fluid " style=" width: 100%; height: 300px  "  src="{{ videollamadas.miniatura.url }}" alt="miniatura de conferencia">
                    </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;">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-video" width="28" height="28" 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="M15 10l4.553 -2.276a1 1 0 0 1 1.447 .894v6.764a1 1 0 0 1 -1.447 .894l-4.553 -2.276v-4z"></path>
                               <path d="M3 6m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path>
                            </svg>
                        {{videollamadas.titulo}}
                        </h5>
                    </div>
                    <div class="d-flex border-top">
                        <a class="flex-fill text-center border-end py-2 text-primary" href="{% url 'videollamada:detalle_video' videollamadas.id %}">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-caret-right" width="28" height="28" 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="M10 18l6 -6l-6 -6v12"></path>
                            </svg>
                            Ver conferencia
                        </a>
                    </div>
                </div>
            </div>
            {% empty %}
                <center>
                    <h2>Aún no hay conferencias realizadas</h2> 
                </center>
            {% 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 conferencias disponibles por el momento</h1>
            </div>
        </div>
    </div>
</div>
{% endif%}

{% endblock contenido %}   


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