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

{% block head %}
<link href="{% static 'css/medition/medition.css' %}" rel="stylesheet">
<link href="{% static 'css/medition/slider.css' %}" rel="stylesheet">
<link href="{% static 'css/medition/show_experiment.css' %}" rel="stylesheet">
{% endblock head %}


{% block content %}

<div class="mainContent">

  <div class="content">

    <!-- icono -->
    <img src="{% static 'img/medition-on.png' %}" alt="Medición" class="iconContent">

    <!-- Título -->
    <p class="title"> Medición </p>

    <div class="boxes">
      <div class="box sensor" id="boxSensor">
        <h2 class="titleConfig"> Experimento </h2>
        <hr>
        <div class="timer-container">
          <div class="timer-label">Altura</div>
          <div class="timer-display" id="altura">0 mm</div>
        </div>
        <hr>
        <div class="timer-container">
          <div class="timer-label">Temperatura</div>
          <div class="timer-display" id="temperatura">0°C</div>
        </div>
        <hr>
        <div class="timer-container">
          <div class="timer-label">Tiempo</div>
          <div class="timer-display" id="tiempo">00:00:00</div>
        </div>
        <div class="buttons"></div>
          <div class="contentbutton">
                <a class="buttonDesign big" id="stopExperiment" style="display: flex;" href="{% url 'stop_experiment' %}">Detener experimento</a>
          </div>
        </div>
    </div>
  </div>
</div>
{% endblock content %}

{% block js %}
<script src="{% static 'js/medition/show_experiment.js' %}"></script>
{% endblock js %}