<div class="bw-ut-main">
    <div class="bw-ut-controls">
        <div class="left">
            <div>
                <button data-action="pan" data-direction="up"><i class="fas fa-chevron-up"></i></button>
            </div>
            <div>
                <button data-action="pan" data-direction="left"><i class="fas fa-chevron-left"></i></button>
                <button data-action="pan" data-direction="right" ><i class="fas fa-chevron-right"></i></button>
            </div>
            <div>
                <button data-action="pan" data-direction="down" ><i class="fas fa-chevron-down"></i></button>
            </div>
            <div>
                <button data-action="zoom" data-direction="in"><i class="far fa-search-plus"></i></button>
                <button data-action="zoom" data-direction="out"><i class="far fa-search-minus"></i></button>
            </div>
            <div>
                <button data-action="rotate" data-direction="clockwise" ><i class="fas fa-undo"></i></button>
                <button data-action="rotate" data-direction="anti-clockwise"><i class="fas fa-undo fa-flip-horizontal"></i></button>
            </div>
        </div>
        <div class="middle">
            <div>
                <label>Step</label><label>Min</label><label>Max</label><label></label>
            </div>
            <div>
                <input class="percent" type="text" name="pan.step" value="{{pan.step}}" min="1" max="50" step="1">
                <input class="percent" type="text" name="pan.min" value="{{pan.min}}" min="-100" max="100" step="1">
                <input class="percent" type="text" name="pan.max" value="{{pan.max}}" min="-100" max="100" step="1">
                <button data-action="randomize" data-aspect="pan"><i class="fa-solid fa-dice"></i></button>
            </div>
            <div></div>
            <div>
                <input class="percent" type="text" name="zoom.step" value="{{zoom.step}}" min="1" max="50" step="1">
                <input class="percent" type="text" name="zoom.min" value="{{zoom.min}}" min="-100" max="100" step="1">
                <input class="percent" type="text" name="zoom.max" value="{{zoom.max}}" min="-100" max="100" step="1">
                <button data-action="randomize" data-aspect="zoom"><i class="fa-solid fa-dice"></i></button>
            </div>
            <div>
                <input type="number" name="rotate.step" value="{{rotate.step}}" min="0" max="360" step="1">
                <input type="number" name="rotate.min" value="{{rotate.min}}" min="0" max="360" step="1">
                <input type="number" name="rotate.max" value="{{rotate.max}}" min="0" max="360" step="1">
                <button data-action="randomize" data-aspect="rotate"><i class="fa-solid fa-dice"></i></button>
            </div>
        </div>
        <div class="right">
            <div>
                <label style="text-align: end;">Undo</label>
                <button data-action="undo"><i class="fa-solid fa-share fa-flip-horizontal"></i></button>
            </div>
            <div>
                <label style="flex: 0 0 100px;">Speed Controls</label>
            </div>
            <div>
                <button data-action="animate" data-aspect="play"><i class="fas fa-play"></i></button>
            </div>
            <div>
                <button data-action="animate" data-aspect="backward"><i class="fa-solid fa-backward"></i></button>
                <button data-action="animate" data-aspect="forward"><i class="fa-solid fa-forward"></i></button>
            </div>
            <div>
                <button data-action="animate" data-aspect="pause"><i class="fas fa-pause"></i></button>
            </div>
        </div>
    </div>
    <div class="bw-ut-footer">
        <div class="left">
            <button data-action="disable" {{#unless enableDisableButton}}disabled{{/unless}}>Don't Show Again</button>
        </div>
        <div class="middle">
            <button data-action="reset">Reset to Defaults</button>
            <button data-action="randomize" data-aspect="all">Randomize All <i class="fa-solid fa-dice"></i></button>
        </div>
        <div class="right">
            <button data-action="changeImage">Change Image <i class="fa-solid fa-image"></i></button>
        </div>
    </div>
</div>