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


{% block head %}
<link href="{% static 'css/medition/medition2.css' %}" rel="stylesheet">
</style>
{% 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>

    <form method="GET" action="{% url 'medition' %}">


      <div class="boxes">
        <div class="box configuration">
          <div class="divTitleConfig">
            <h2 class="titleConfig"> Configuración del experimento</h2>
            <hr>
          </div>
          <div class="row">
            <div class="oneInput">
              <label for="nombreOperador" class="labelForm"> Operador</label>
              <input type="text" id="nombreOperador" class="inputForm" name="operador" value="" placeholder="Nombre operador" required>
            </div>
          </div>
          <div class="row">
            <div class="oneInput">
              <label for="nombreExperimento" class="labelForm"> Experimento</label>
              <input type="text" id="nombreExperimento" class="inputForm" value="" name="experimento"
                placeholder="Nombre experimento" required>
            </div>
          </div>
          <!--<div class="row">
            <div class="oneInput">
              <label for="temperatura" class="labelForm">Temperatura</label>
              <input class="inputForm" type="number" id="temperatura" name="temperatura" max="40.0" min="-10.0" step="0.1" value="0" onchange="ver2(this)">
              <div data-mdb-range-init class="range">
                <h3 class="labelForm">Arrastre el punto a la temperatura deseada, o bien ingrésela manualmente</h3>
                <b>-10 °C</b>
                <input type="range" class="form-range" min="-10" max="40" id="rango" value="0" step="0.1" oninput="ver(this)"/>
                <b>40 °C</b>
              </div>
            </div>
          </div>-->

          <div class="duration">
            <div class="durationFlex">
              <label for="nombreOperador" class="labelForm"> Duración del Experimento </label>
              <div class="timeOptions">

                <div class="infinityBox">
                  <input type="radio" id="infinito" name="timeOption" value="infinity" checked>
                  <label for="infinito" class="infinityText"> &infin;</label>
                </div>

                <div class="time">
                  <input type="radio" id="finito" name="timeOption" value="finite">
                  <label for="finito"> </label>
                  <div class="timeBox">
                    <input type="number" id="horas" name="horas" min="0" step="1" value="00" class="arrowsOn"
                      onchange="padInputValue(this)">
                    <label for="horas">Hrs</label>
                  </div>
                  <span>:</span>
                  <div class="timeBox">
                    <input type="number" id="minutos" name="minutos" min="0" step="1" value="00" class="arrowsOn"
                      onchange="padInputValue(this)">
                    <label for="minutos">Min</label>
                  </div>
                  <span>:</span>
                  <div class="timeBox">
                    <input type="number" id="segundos" name="segundos" min="0" step="1" value="00" class="arrowsOn"
                      onchange="padInputValue(this)">
                    <label for="segundos">Seg</label>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="inputComment">
            <label for="comentarios" class="labelForm">Comentarios</label>
            <textarea name="comentarios" id="comentarios" cols="30" rows="10" class="commentsInput"></textarea>
          </div>
        </div>
      </div>

      <div class="contentButton">
        <button class="buttonDesign big" name="expInit" value="True">Iniciar Experimento
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#9658;</button>
      </div>

    </form>

  </div>


</div>

{% block js %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="{% static 'js/medition/medition.js' %}"></script>
{% endblock js %}

{% endblock content %}