{%- assign boxColor = site.data[page.folderName][page.lang][page.fileName].color
-%}
<div class="options-panel">
  <div class="title">Options</div>
  <div id="controls" class="text-left">
    <label>Amount</label>
    <div class="d-flex">
      {%- if page.effect == "blur" -%}
      <input
        class="w-100"
        type="range"
        min="0"
        max="50"
        value="25"
        step="0.5"
        id="applyFilter"
        data-filter="{{page.effect}}"
        data-scale="px"
      />
      <div class="d-flex align-items-center" id="counter"></div>
      {%- elsif page.effect == "opacity" -%}
      <input
        class="w-100"
        id="applyFilter"
        type="range"
        min="0"
        max="1"
        step="0.1"
        value="0.5"
        data-filter="{{page.effect}}"
      />
      <div class="d-flex align-items-center" id="counter"></div>
      {%- elsif page.effect == "saturate" -%}
      <input
        class="w-100"
        type="range"
        min="0"
        max="200"
        value="100"
        step="1"
        id="applyFilter"
        data-filter="{{page.effect}}"
        data-scale=""
      />
      <div class="d-flex align-items-center" id="counter"></div>
      {%- elsif page.effect == "hue-rotate" -%}
      <input
        class="w-100"
        type="range"
        min="0"
        max="360"
        value="180"
        step="1"
        id="applyFilter"
        data-filter="{{page.effect}}"
        data-scale="deg"
      />
      <div class="d-flex align-items-center" id="counter"></div>
      {%- elsif page.effect == "grayscale" -%}
      <input
        class="w-100"
        type="range"
        min="0"
        max="100"
        value="50"
        step="1"
        id="applyFilter"
        data-filter="{{page.effect}}"
        data-scale="%"
      />
      <div class="d-flex align-items-center" id="counter"></div>
      {%- elsif page.effect == "sepia" -%}
      <input
        class="w-100"
        type="range"
        min="0"
        max="100"
        value="50"
        step="1"
        id="applyFilter"
        data-filter="{{page.effect}}"
        data-scale="%"
      />
      <div class="d-flex align-items-center" id="counter"></div>
      {%- elsif page.effect == "gamma" -%}
      <input
        class="w-100"
        type="range"
        min="0"
        max="10"
        value="5"
        step="1"
        id="applyFilter"
        data-filter="{{page.effect}}"
      />
      {%- elsif page.panelTitle == "exposure" -%}
      <input
        class="w-100"
        type="range"
        min="-100"
        max="100"
        value="0"
        step="1"
        id="applyFilter"
        data-filter="{{page.effect}}"
      />
      {%- else -%}
      <input
        class="w-100"
        type="range"
        min="0"
        max="200"
        value="100"
        step="1"
        id="applyFilter"
        data-filter="{{page.effect}}"
        data-scale="%"
      />
      <div class="d-flex align-items-center" id="counter"></div>
      {%- endif -%}
      <br />
    </div>
  </div>

  <div class="download-format d-none">
    <span class="select-format-title">image's format</span>
    <select name="image-format" id="image-format">
      <option value="png">png</option>
      <option value="jpg">jpg</option>
      <option value="jpeg">jpeg</option>
      <option value="webp">webp</option>
    </select>
  </div>

  <div class="convertBtn-container">
    <button style="background:{{boxColor}};" class="btn" id="submit-button">
      Convert
      <img src="/assets/images/convert.svg" width="20px" alt="convert-files" />
    </button>
  </div>
</div>