<div class="modal modal-blur fade" id="modal-clase" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-title">{{accion}} clase</div>
      </div>
      <form method="post" id='form-clase' enctype="multipart/form-data">

      <!-- DIV que crea una pantalla en negro cuando se crea una clase -->
      <div  class="block-layer m-0 p-0" id="bloqueo" style="display: none;" ></div>

      {% csrf_token %}
        <div class="modal-body">

          <!-- DIV para mostrar errores relacionados con la compresión de video -->
          <div id="div_error_video_comp" class="alert alert-danger" hidden>
            <p id="error_video_comp"></p>
          </div>
          <!-- FIN DEL DIV --> 

          <!-- Spinner para cargar elemenots -->
          <div class="spinner" id="spinner" style="display: none;">
            <div class="spinner-border text-primary spinner-xl " role="status">
            </div>
          </div>
          <!-- FIN Spinner para cargar elemenots -->

          <div>
            <div class="mb-3">
              <label class="form-label">Título de la clase:</label>
              {{form.titulo}}
            </div>
            <div class="mb-3">
              <label class="form-label">Descripción de la clase:</label>
              {{form.descripcion}}
            </div>
          </div>
          <div class="row">
            <div class="col-lg-6">
              <div class="mb-3">
                <label class="form-label">Archivo pdf:</label>
                {{ form.archivo_pdf}}
              </div>
            </div>
            <div class="col-lg-6">
              <div class="mb-3">
                <label class="form-label">Video:</label>
                {% if accion == 'Editar' %}
                  <input class="form-control" type="file" name="{{ form.video.name }}" accept="video/*" value="">
               {% else %}
                  {{ form.video }}
               {% endif %}

              </div>
            </div>
          </div>
          <input type="hidden" name="curso" id = 'curso' value="{{curso.id}}">
          <input type="hidden" name="accion" id = 'accion' value="{{accion}}">
          {% if accion == 'Editar' %} 
            <input type="hidden" name="curso" id = 'curso' value="{{form.curso.value}}">
            <input type="hidden" name="clase" id = 'clase' value="{{clase.id}}">
            <input type="hidden" name="video_comp" value="{{ clase.video }}">
          {% endif %}
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-link link-secondary me-auto" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-success" value="Crear clase"  id="btnFreeze" >Agregar</button>
        </div>
      </form>
    </div>
  </div>
</div>


