<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">Preferences</h4>
        </div>

        
        <form method="POST" action="https://fans.lindqst.com/en/50/user/preferences" enctype="multipart/form-data" id="preference-form"><input type="hidden" name="_token" value="IZrix474EZ9qSBJZOEGhjDWJEv6sRRAtk6VCl58v">
          <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>Flow rate</label>
                  <p>Default unit of volume used in the selection form and graphics.</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>Static pressure</label>
                  <p>Default unit of pressure used in the selection form and graphics.</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>Temperature</label>
                  <p>Default unit of temperature to be displayed.</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>Length/Height</label>
                  <p>Measure unit for distance and height to a noise source over the sea level.</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>Airflow tolerance percentage</label>
                  <p>Default limits for airflow used in selection and graphics calculations.</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>Pressure tolerance percentage</label>
                  <p>Default limits for pressure used in selection and graphics calculations.</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>Security coefficient</label>
                  <p>Value expressed in% to calculate belt drive and axial multiblade fans power, applying this security factor.</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>

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