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

{% block head %}
<link href="{% static 'css/historic/instance.css' %}" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/historic/modal_confirmation.css' %}">
<link rel="stylesheet" href="{% static 'css/historic/loadingUpdate.css' %}">
{% endblock head %}

{% block content %}

<div class="mainContent">
  <div class="content">
    <!-- icono -->
    <img src="{% static 'img/historico-on.png' %}" alt="Medición" class="iconContent">
    <!-- Alert -->
    {% if alert %}
    <div class="alert">
      <p>
        {{alert}}
      </p>
      <img src="{% static 'img/historic/alert.svg' %}" alt="Medición" class="alertIcon">
    </div>
    {% endif %}
    <!-- Título -->
    <p class="title"> HISTÓRICO </p>
    <div class="boxes">
      {% if from == "historic" %}
      <div class="tab-navigation">
        <h5>{{experiment_name}}</h5>
        <div class="tab-buttons">
          <a class="tab-button left" id="prev-btn"><span>&#60;&nbsp;&nbsp;Ver ensayo anterior</span></a>
          <a class="tab-button right" id="next-btn"><span>Ver siguiente ensayo &nbsp;&nbsp;&#62;</span></a>
        </div>
      </div>
      {% endif %}
      <div class="box instance">
        <header>
          {% if from == "historic" %}
          <h2 class="titleConfig">Detalles del experimento</h2>
          <a href="{% url 'historic' %}" class="buttonDesign back">&#9664;&nbsp;&nbsp; Volver</a>
          {% else %}
          <h2 class="titleConfig">Detalles del experimento</h2>
          <a href="{% url 'medition' %}" class="buttonDesign new">&#9664;&nbsp;&nbsp; Nueva medición</a>
          {% endif %}
        </header>
        <hr class="hrResumen">
        
          <div class="divDetalles">
            <input type="text" name="expInst" id="expInst" style="display:none" value="{{nombre_inst}}" hidden>
            <div class="experimentName">
              <p class="titlebold">{{experimento}}</p>
              <br>
              <p class="textbold" id="pExpName">{{operador}}</p>
            </div>
            <div class="barra-vertical"></div>
            <!--<div class="initialHeightValue">
              <h3>Temperatura °C</h3>
              <input type="text" class="inputNoIcon" placeholder="-" value="{{temperatura}}" readonly>
            </div>-->
            <div class="initialHeightValue">
              <h3>% de turbidez</h3>
              <input type="text" class="inputNoIcon" placeholder="-" value="{{turbidez}}" readonly>
            </div>
            <div class="duration">
              <h3>Duración</h3>
              <input type="text" class="inputNoIcon" placeholder="-" value="{{duracion}}" readonly>
            </div>
            <div class="commentsExperiment">
              <h3>Comentarios:</h3>
              <textarea id="inputExpComments" name="inputExpComments" class="textareaIcon" name="inputExpComments"
                id="inputExpComments" rows="9" maxlength="255"
                placeholder="-" disabled>{{comentarios}}</textarea>
            </div>
            <!--
            <div class="saveChanges">
              <button id="saveButtonChanges" class="buttonDesign saveChangesBtn">Guardar cambios</button>
            </div>
            -->
          </div>
          
        <h2 class="titleConfig"> Gráfico </h2>
        <hr>
        <div class="row plot">
          <div id="loadingUpdate">
            <div id="loadingUpdate-spinner"></div>
          </div>
          <div id="plotSedimentation">
          </div>
          <img src="data:image/png;base64,{{image}}" alt="" id="zonesCurve">
          <div class="buttons">
            <!--<button id="arrowManualMode">&#9654;</button>
            <button id="updateVelocity" class="update">Actualizar</button>
            <button id="restoreVelocity" class="update refresh">&#8634;</button>
            <p class="button-download-text">descargar</p>-->
            <a href="{% url 'download_csv' %}?id={{id}}" class="button-download"
              id="download-csv">Descargar CSV</a>
            <div id="modal" class="modal">
              <div class="modal-content">
                <h3 id="modal-title">Confirmación</h3>
                <p id="modal-text">¿Desea eliminar este experimento?</p>
                <button class="accept-button" id="accept-button" onclick="redirectToLink()">Aceptar</button>
                <button class="close-button" onclick="closeModal()">Cancelar</button>
              </div>
            </div>
            <a data-url="{% url 'historic' %}?id={{id}}&delete=true"
              onclick="openModal(this.getAttribute('data-url')); return false;" class="button-delete">
              Descartar
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  id_exp = "{{id}}"
  fecha_exp = "{{fecha}}"
</script>
<script src="{% static 'js/apexcharts/apexcharts.js' %}"></script>
<script src="{% static 'js/historic/sedimentationCurve.js' %}"></script>
<script src="{% static 'js/historic/instance.js' %}"></script>
<script src="{% static 'js/historic/spinner.js' %}"></script>
<script src="{% static 'js/historic/modal.js' %}"></script>

{% endblock content %}