{%- 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" style="gap:10px">
            <input class="w-100" id="opacity" type="range" min="0" max="1" step="0.1" value="0.5" />
            <!-- <input type="text" class="amount" value="50"> -->
        </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="download-wrapper">
        <button style="background-color:{{boxColor}};" id="download-zip">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
                style="width: 20px; height:20px; margin-right:10px; fill:#fff;">
                <path
                    d="M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM382.6 302.6l-103.1 103.1C270.7 414.6 260.9 416 256 416c-4.881 0-14.65-1.391-22.65-9.398L129.4 302.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 306.8V128c0-17.69 14.33-32 32-32s32 14.31 32 32v178.8l49.38-49.38c12.5-12.5 32.75-12.5 45.25 0S395.1 290.1 382.6 302.6z">
                </path>
            </svg>
            Download Zip</button>
    </div>
</div>