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


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

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

      <div class="boxes">

        <div class="box configuration">

          <h2 class="titleConfig"> Configuración </h2>
          <hr>

          <div class="oneInput">
            <label for="nombreOperador" class="labelForm"> Operador </label>
            <input type="text" id="nombreOperador" class="inputForm" name="operador" placeholder="Joaquín" required>
          </div>
          <div class="oneInput">
            <label for="nombreExperimento" class="labelForm"> Experimento </label>
            <input type="text" id="nombreExperimento" class="inputForm" name="experimento" placeholder="Ensayo de sedimentacion" required>
          </div>

          <div class="row">
            <div class="initialHeightDiv">
              <div class="oneInput initialHeight">
                <label for="alturaInicial" class="labelForm"> Altura Inicial</label>
                <input type="number" id="alturaInicial" class="inputForm" name="alturaInicial" min="0" max="360"
                  value="320">
              </div>
            </div>
            <div class="oneInput">
              <div class="sensibility">
                <label class="labelForm sensor">Sensibilidad sensores</label>
                <div class="limits">
                  <div class="oneInput limit">
                    <label for="alturaInicial" class="labelForm limit"> Limite Superior</label>
                    <input type="number" id="limiteSuperior" class="inputForm" name="limiteSuperior" min="0" value="500">
                  </div>
                  <div class="oneInput limit">
                    <label for="alturaInicial" class="labelForm limit"> Limite Inferior</label>
                    <input type="number" id="limiteInferior" class="inputForm" name="limiteInferior" min="0" value="0">
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="oneInput">
            <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="0">
                  <label for="horas">Hrs</label>
                </div>
                <span>:</span>
                <div class="timeBox">
                  <input type="number" id="minutos" name="minutos" min="0" step="1" value="0">
                  <label for="minutos">Min</label>
                </div>
                <span>:</span>
                <div class="timeBox">
                  <input type="number" id="segundos" name="segundos" min="0" step="1" value="0">
                  <label for="segundos">Seg</label>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="box properties">
          <h2 class="titleConfig"> Propiedades</h2>
          <hr>
          <div class="twoColumns">
            <div class="columnInputs">
              <div class="oneInput">
                <label for="densidad" class="labelForm"> Densidad </label>
                <input type="text" id="densidad" class="inputForm" name="densidad">
              </div>
              <div class="oneInput">
                <label for="material" class="labelForm"> Material </label>
                <input type="text" id="material" class="inputForm" name="material">
              </div>

            </div>

            <div class="columnInputs">
              <div class="oneInput">
                <label for="floculante" class="labelForm"> Floculante </label>
                <input type="text" id="floculante" class="inputForm" name="floculante">
              </div>
              <div class="oneInput">
                <label for="dosis" class="labelForm"> Dosis </label>
                <input type="text" id="dosis" class="inputForm" name="dosis">
              </div>
            </div>

          </div>

          <div class="columnInputs textareaComments">
            <div class="oneInput">
              <label for="comentarios" class="labelForm"> Comentarios </label>
              <textarea name="comentarios" id="comentarios" cols="30" rows="10" class="comments"></textarea>
            </div>
          </div>


        </div>



      </div>

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


    </form>

  </div>


</div>

<script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
{% endblock content %}