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

{% block title %} Detalles de la conferencia {% endblock title %}


{% block contenido %}
{% include 'message.html' %}
<div class="container-xxl py-5">
  <div class="container">
    <div class="row g-5">
      <div class="col-lg-12">
        <article>
          <header class="mb-4">
            <h1 class="fw-bolder mb-1" id="titulo_clase" style="align:justify"> {{ videollamada.titulo }}</h1>
            <div class="text-muted fst-italic mb-2"> Impartido por {{videollamada.instructor}}</div>
          </header>
        </article>
      </div>
      <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.1s" style="min-height: 400px;">
        <div class="position-relative h-100">
          <img class="img-fluid position-absolute w-100 h-100" src="{{videollamada.miniatura.url}}" alt="" style="object-fit: cover;">
        </div>
      </div>
      <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.3s">
        <h6 class="section-title bg-white text-start text-primary pe-3">Sobre la conferencia</h6>
        <p class="mb-4">{{ videollamada.descripcion }}</p>
        <h5 style="text-align: justify;">Datos de realización: </h5>
        <ul class="list-unstyled space-y-1">
          <li>
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-calendar text-blue" 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="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z"></path>
              <path d="M16 3v4"></path>
              <path d="M8 3v4"></path>
              <path d="M4 11h16"></path>
              <path d="M11 15h1"></path>
              <path d="M12 15v3"></path>
            </svg>
            Fecha: {{ videollamada.fecha_reunion }}
          </li>
          <li>
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock-hour-4 text-blue" 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 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
              <path d="M12 12l3 2"></path>
              <path d="M12 7v5"></path>
            </svg>
            Hora: {{ videollamada.hora }}
          </li>
          <li style="text-align: justify;">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link text-blue" 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 15l6 -6"></path>
              <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464"></path>
              <path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463"></path>
            </svg>
            Enlace: {{ videollamada.enlace }}
          </li>
        </ul>
        {% if videollamada.archivo %}
        <h4>Archivo PDF:</h4>
        <ul class="list-unstyled space-y-1">
          <li>
            <a class="d-block" href='{{videollamada.archivo.url}}'>
              <center> 
                <img src="{% static 'img/pdf.png' %}" width="100" height="80" >
              </center>
            </a><br>
          </li>
        </ul>
        {% endif %}
      </div>
      <div class="col-lg-12">
        <article>
          <div class="card card-lg">
            <video controls style="max-width: 1540px; max-height: 590px; background-color:  #181818;  min-height: auto; min-width: auto">
              <source src="{{videollamada.video.url}}" type="video/mp4">
            </video>
          </div>
        </article>
      </div>
    </div>
  </div>
  <div class="container ">
    <div class="card">
      <div class="card-body">
        <div class="border p-4">
          <h2 class="fw-bold fs-4 pb-2">Acerca del instructor</h2>
          <h3 class="fw-bold fs-5 pb-2" style="color: #5564eb;">{{videollamada.instructor.first_name}} {{ videollamada.instructor.last_name }}</h3>
          <div class="row mb-3">
            <div class=" col-md-4 col-lg-2 mb-2">
              <div class="image-container ">
                <img class="rounded-circle img-fluid" src="{{ videollamada.instructor.profile_picture.url }}" height="140px" width="140px" alt="Foto de perfil">
              </div>
            </div>
            <div class="col-md-8 col-lg-10">
              <p class="small"> 
                {% if  curso.instructor.descripcion  %}
                  {{ curso.instructor.descripcion }}
                {% else %}
                  Este instructor no ha agregado una descripción.
                {% endif %}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>




{% endblock contenido %}
