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

{% block title %} {{ clase.titulo }} {% endblock title %}

{% block contenido %}
{% include 'message.html' %}
  <div class="container-fluid" >
    <center>
        
        <video width="100%" height="100%" controls style="border-radius: 10px;">
          <source src="{{clase.video.url }}" type="video/mp4">
        </video>
      </center>
  </div>
  <div class="card">
    <div class="card-body">
      <div class="w-100 border p-4 d-flex flex-row gap-4 flex-wrap justify-content-center">
        <div class="w-100">
          <h3> Descripción de la clase: </h3>
          <p class="justify-content-center">
            {{ clase.descripcion}}
          </p>

       </div>

       <div class=" w-100 justify-content-center">
        <div class="mb-3">
            <label class="form-label">
              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-pdf" 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="M10 8v8h2a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2h-2z"></path>
                 <path d="M3 12h2a2 2 0 1 0 0 -4h-2v8"></path>
                 <path d="M17 12h3"></path>
                 <path d="M21 8h-4v8"></path>
              </svg>
              Archivo PDF: 
            </label>
            {% if clase.archivo_pdf %}
            
  
            <a class="d-block text-primary" href="{{clase.archivo_pdf.url}}">
              <div style="display: flex; max-width: 200px; padding: 6px; align-self: flex-start; background-color: #2F3659; border-radius: 10px;">
                        
                      <svg height="40px" width="40px" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" style="fill: white; margin-right: 10px;">
                        <style type="text/css">
                          .st0{fill:#ffffff;}
                        </style>
                        <g>
                          <path class="st0" d="M378.413,0H208.297h-13.182L185.8,9.314L57.02,138.102l-9.314,9.314v13.176v265.514
                          c0,47.36,38.528,85.895,85.896,85.895h244.811c47.353,0,85.881-38.535,85.881-85.895V85.896C464.294,38.528,425.766,0,378.413,0z
                           M432.497,426.105c0,29.877-24.214,54.091-54.084,54.091H133.602c-29.884,0-54.098-24.214-54.098-54.091V160.591h83.716
                          c24.885,0,45.077-20.178,45.077-45.07V31.804h170.116c29.87,0,54.084,24.214,54.084,54.092V426.105z"/>
                          <path class="st0" d="M171.947,252.785h-28.529c-5.432,0-8.686,3.533-8.686,8.825v73.754c0,6.388,4.204,10.599,10.041,10.599
                          c5.711,0,9.914-4.21,9.914-10.599v-22.406c0-0.545,0.279-0.817,0.824-0.817h16.436c20.095,0,32.188-12.226,32.188-29.612
                          C204.136,264.871,192.182,252.785,171.947,252.785z M170.719,294.888h-15.208c-0.545,0-0.824-0.272-0.824-0.81v-23.23
                          c0-0.545,0.279-0.816,0.824-0.816h15.208c8.42,0,13.447,5.027,13.447,12.498C184.167,290,179.139,294.888,170.719,294.888z"/>
                          <path class="st0" d="M250.191,252.785h-21.868c-5.432,0-8.686,3.533-8.686,8.825v74.843c0,5.3,3.253,8.693,8.686,8.693h21.868
                          c19.69,0,31.923-6.249,36.81-21.324c1.76-5.3,2.723-11.681,2.723-24.857c0-13.175-0.964-19.557-2.723-24.856
                          C282.113,259.034,269.881,252.785,250.191,252.785z M267.856,316.896c-2.318,7.331-8.965,10.459-18.21,10.459h-9.23
                          c-0.545,0-0.824-0.272-0.824-0.816v-55.146c0-0.545,0.279-0.817,0.824-0.817h9.23c9.245,0,15.892,3.128,18.21,10.46
                          c0.95,3.128,1.62,8.56,1.62,17.93C269.476,308.336,268.805,313.768,267.856,316.896z"/>
                          <path class="st0" d="M361.167,252.785h-44.812c-5.432,0-8.7,3.533-8.7,8.825v73.754c0,6.388,4.218,10.599,10.055,10.599
                          c5.697,0,9.914-4.21,9.914-10.599v-26.351c0-0.538,0.265-0.81,0.81-0.81h26.086c5.837,0,9.23-3.532,9.23-8.56
                          c0-5.028-3.393-8.553-9.23-8.553h-26.086c-0.545,0-0.81-0.272-0.81-0.817v-19.425c0-0.545,0.265-0.816,0.81-0.816h32.733
                          c5.572,0,9.245-3.666,9.245-8.553C370.411,256.45,366.738,252.785,361.167,252.785z"/>
                        </g>
                        </svg>
                    
                    <p style="color: white; margin-top: 10px;">Descargar PDF</p>
                        
                      </div>
            </a>
  
              {{curso.archivo_pdf}}
            {% else %}
              <label class="d-block form-control" > <center> No se adjunto archivo pdf </center></label><br>
            {% endif %}
          </div>
        </div>


      </div>
      
      <div class="card-footer">
        <div class="d-flex">
          <a href="{% url 'curso:ver_curso' clase.curso.id %}" class="btn btn-link">Regresar</a>
          {% if request.user.user_type == 'instructor' %}
            <a class="btn btn-primary ms-auto" data-bs-toggle="modal" data-bs-target="#modal-clase"> 
              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit" 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="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"></path>
                <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"></path>
                <path d="M16 5l3 3"></path>
              </svg>
              Editar
            </a>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  <div class="container mt-5">
    <div id="columna-primaria" class="row">
      <div id="contenedor-comentarios" class="col-lg-8 mb-5 card card-body" style="background-color: #2F3659;">
        <div>
          <div class="mb-4">
            <h3 class="text-white">Comentarios</h3>
          </div>
          <div class="d-flex">
            <div class="container">
              <form  class="mb-4" method="POST" id="form-user">
                {%csrf_token%} {{form_comentario.contenido}} {{form_comentario.id_autor}}
                {{form_comentario.id_clase}} {{form_comentario.id_respuesta}}
                <button type="submit" class="btn btn-sm mt-2" data-type="send" data-id="form-user" style="background-color: white; "> Comentar </button>
                <button type="button" class="btn btn-danger btn-sm mt-2" data-type="cancel" data-id="form-user" > Cancelar </button>
              </form>
            </div>
          </div>
        </div>
        <div id="lista-comentarios">
          {% for comentario in comentarios reversed%}
          <div class="d-flex mb-3">
              <div class="flex-shrink-0"><img class="rounded-circle" src="{{ comentario.id_autor.profile_picture.url }}"  style="width: 50px; height: 50px;" /></div>
              <div class="ms-3" id="comentario-info">
                  <div class="fw-bold text-white">{{ comentario.id_autor}}</div>
                  <div class="text-white"> {{comentario.contenido}} </div>
                  <br>
                  <button data-type="display-block" data-id="contenedor-respuesta-{{comentario.id}}" class="btn btn-sm" style="background-color: white; border: none;">
                respuestas {{comentario.respuestas.count}}
                </button>
              </div>
          </div>     
          <div id="contenedor-respuesta-{{comentario.id}}" class="mb-4" style="display: none">
            {% for respuesta in comentario.respuestas.all%}
            <div class="d-flex ms-5 mb-3">
              <div class="d-flex mt-4">
                <div class="flex-shrink-0">
                  <img class="rounded-circle" src="{{ respuesta.id_autor.profile_picture.url }}" style="width: 50px; height: 50px;" />
                </div>
                  <div id="respuesta-info" class="ms-3">
                      <div class="fw-bold text-white">{{respuesta.id_autor}}</div>
                      <div class="text-white"> {{respuesta.contenido}} </div>
                  </div>
              </div>
            </div>
            {% endfor %}
            <div class="ms-5">
              <form method="POST" id="form-{{comentario.id}}">
                {% csrf_token %} 
          {{form_comentario.contenido}} 
          {{form_comentario.id_autor}}
                {{form_comentario.id_clase}}
                <input id="id_respuesta" name="id_respuesta" type="hidden" value="{{comentario.id}}" />
                <button type="submit" class="btn btn-sm mt-2" data-type="send" data-id="form-{{comentario.id}}" style="background-color: white; ">Comentar </button>
                <button type="button" class="btn btn-danger btn-sm mt-2" data-type="cancel" data-id="form-{{comentario.id}}" > Cancelar </button>
              </form>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
    <form id="csrf-form">
      {% csrf_token %}
    </form>
  </div>

 
{% endblock contenido %}

{% block js %}
{% include 'clase/modal-clase.html' %}
<script src="{% static 'js/jquery-3.5.1.slim.min.js' %}" ></script>
<script src="{% static 'js/spinner.js' %}"></script>
<script src="{% static 'js/clase_comentarios.js' %}" ></script>
{% include 'clase/script-editar_clase.html' %}
{% endblock js %}