<turbo-stream target="modal-holder" action="append">
    <template><dialog id="user_preferences" data-controller="single-modal" data-auto-open="true" data-destroy-on-close="true">
    <div class="modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-action="single-modal#close" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 id="user_preferences_title" class="modal-title">Preferencias</h4>
        </div>

        
        <form method="POST" action="https://configurador.siberzone.es/es/50/user/preferences" enctype="multipart/form-data" id="preference-form"><input type="hidden" name="_token" value="twoQ6cQrR5FzVPQ1GzA4zrgHJpGpFbrUgEWFLEMC">
          <div class="modal-body text-center grid grid-cols-3 gap-4">
            <div class="panel panel-default">
              <div class="panel-body flex flex-col h-full">
                <div>
                  <label>Caudal</label>
                  <p>Unidad por defecto de caudal utilizado en los cálculos de selección y gráficos.</p>
                </div>
                <div class="grow flex items-end justify-center">
                  <div class="w-full"><label class="control-label sr-only" for="flow_unit_id"></label><select name="flow_unit_id" id="flow_unit_id" class="form-control"><option value="1" selected>m&sup3;/h</option><option value="2">m&sup3;/min</option><option value="3">m&sup3;/s</option><option value="4">ft&sup3;/h</option><option value="5">CFM</option><option value="7">l/s</option></select></div>
                </div>
              </div>
            </div>

            <div class="panel panel-default">
              <div class="panel-body flex flex-col h-full">
                <div>
                  <label>Presión estática</label>
                  <p>Unidad por defecto de presión utilizada en los cálculos de selección y gráficos.</p>
                </div>
                <div class="grow flex items-end justify-center mt10">
                  <div class="w-full"><label class="control-label sr-only" for="pressure_unit_id"></label><select name="pressure_unit_id" id="pressure_unit_id" class="form-control"><option value="6">mmH₂O</option><option value="8" selected>Pa</option><option value="9">mmHg</option><option value="10">inH₂O</option><option value="11">mbar</option></select></div>
                </div>
              </div>
            </div>

            <div class="panel panel-default">
              <div class="panel-body flex flex-col h-full">
                <div>
                  <label>Temperatura</label>
                  <p>Unidad por defecto de la temperatura mostrada.</p>
                </div>
                <div class="grow flex items-end justify-center mt10">
                  <div class="w-full"><label class="control-label sr-only" for="temperature_unit_id"></label><select name="temperature_unit_id" id="temperature_unit_id" class="form-control"><option value="14" selected>&ordm;C</option><option value="15">&ordm;K</option><option value="16">&ordm;F</option></select></div>
                </div>
              </div>
            </div>

            <div class="panel panel-default">
              <div class="panel-body flex flex-col h-full">
                <div>
                  <label>Longitud</label>
                  <p>Unidad de medida de la distancia a una fuente sonora o bien la altura sobre el nivel del mar</p>
                </div>
                <div class="grow flex items-end justify-center mt10">
                  <div class="w-full"><label class="control-label sr-only" for="distance_unit_id"></label><select name="distance_unit_id" id="distance_unit_id" class="form-control"><option value="12" selected>m</option><option value="13">ft</option></select></div>
                </div>
              </div>
            </div>

            <div class="panel panel-default">
              <div class="panel-body flex flex-col h-full">
                <div>
                  <label>Tol. Q</label>
                  <p>Límites por defecto de caudal utilizado en los cálculos de selección y gráficos.</p>
                </div>
                <div class="grow flex items-end justify-center mt10">
                  <div class="dual-range-slider w-full">
                    <div class="range-slider" data-controller="range-slider" data-range-slider-unit-value="%">
  <range-slider dir="rtl" min="0" max="100" value="3" data-range-slider-target="slider" data-nominal-value-target="slider">
    <div data-track></div>
    <div data-track-fill></div>
    <div data-runnable-track>
      <div data-thumb></div>
    </div>
    <input data-range-slider-target="input" type="hidden" value="3" name="flow_tol_inf" />
  </range-slider>
  <div class="outputs">
    <div data-range-slider-target="output"></div>
    <div data-nominal-value-target="output"></div>
  </div>
</div>
                    <div class="range-slider" data-controller="range-slider" data-range-slider-unit-value="%">
  <range-slider dir="ltr" min="0" max="100" value="15" data-range-slider-target="slider" data-nominal-value-target="slider">
    <div data-track></div>
    <div data-track-fill></div>
    <div data-runnable-track>
      <div data-thumb></div>
    </div>
    <input data-range-slider-target="input" type="hidden" value="15" name="flow_tol_sup" />
  </range-slider>
  <div class="outputs">
    <div data-range-slider-target="output"></div>
    <div data-nominal-value-target="output"></div>
  </div>
</div>
                  </div>
                </div>
              </div>
            </div>

            <div class="panel panel-default">
              <div class="panel-body flex flex-col h-full">
                <div>
                  <label>Presión</label>
                  <p>Límites por defecto de presión utilizada en los cálculos de selección y gráficos.</p>
                </div>
                <div class="grow flex items-end justify-center mt10">
                  <div class="dual-range-slider w-full">
                    <div class="range-slider" data-controller="range-slider" data-range-slider-unit-value="%">
  <range-slider dir="rtl" min="0" max="100" value="3" data-range-slider-target="slider" data-nominal-value-target="slider">
    <div data-track></div>
    <div data-track-fill></div>
    <div data-runnable-track>
      <div data-thumb></div>
    </div>
    <input data-range-slider-target="input" type="hidden" value="3" name="pressure_tol_inf" />
  </range-slider>
  <div class="outputs">
    <div data-range-slider-target="output"></div>
    <div data-nominal-value-target="output"></div>
  </div>
</div>
                    <div class="range-slider" data-controller="range-slider" data-range-slider-unit-value="%">
  <range-slider dir="ltr" min="0" max="100" value="15" data-range-slider-target="slider" data-nominal-value-target="slider">
    <div data-track></div>
    <div data-track-fill></div>
    <div data-runnable-track>
      <div data-thumb></div>
    </div>
    <input data-range-slider-target="input" type="hidden" value="15" name="pressure_tol_sup" />
  </range-slider>
  <div class="outputs">
    <div data-range-slider-target="output"></div>
    <div data-nominal-value-target="output"></div>
  </div>
</div>
                  </div>
                </div>
              </div>
            </div>

            <div class="panel panel-default">
              <div class="panel-body flex flex-col h-full">
                <div>
                  <label>Coeficiente seguridad</label>
                  <p>Valor expresado en % para calcular la potencia de los ventialdores a transmisión y axiales de ángulo variable aplicando dicho factor de  seguridad.</p>
                </div>
                <div class="grow flex items-end justify-center mt10">
                  <div class="w-full">
                    <div class="range-slider" data-controller="range-slider" data-range-slider-unit-value="%">
  <range-slider dir="ltr" min="0" max="100" value="1" data-range-slider-target="slider" data-nominal-value-target="slider">
    <div data-track></div>
    <div data-track-fill></div>
    <div data-runnable-track>
      <div data-thumb></div>
    </div>
    <input data-range-slider-target="input" type="hidden" value="1" name="security_coefficient" />
  </range-slider>
  <div class="outputs">
    <div data-range-slider-target="output"></div>
    <div data-nominal-value-target="output"></div>
  </div>
</div>
                  </div>
                </div>
              </div>
            </div>

                          <div class="panel panel-default">
                <div class="panel-body flex flex-col h-full">
                  <div>
                    <label>Frecuencia</label>
                    <p>Frecuencia por defecto de los motores.</p>
                    <p class="text-[16px] my-8">50 Hz</p>
                  </div>
                  <div class="grow flex items-center justify-center mt10">
                                          <a href="https://configurador.siberzone.es/es/60" class="underline">
                        Cambiar a 60 Hz
                      </a>
                                      </div>
                </div>
              </div>
                      </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-default mr-2" data-action="single-modal#close">
              Cancelar
            </button>
            <button type="submit" class="btn btn-primary">
              Guardar cambios
            </button>
          </div>
        </form>
      </div>
    </div>
  </dialog></template>
</turbo-stream>
