<form action="submit" class="dnd5e2">
    <div class="grid-container">
        <div class="roll-actor-list">
            <filigree-box>
                <h3>
                    <i class="fa-duotone fa-square-check"></i>
                    <span class="roboto-upper">{{localize "epic-rolls-5e.get-roll-data.selected"}}</span>
                </h3>
                <ul class="selected-actors">
                    {{#each actors.selected as |actor|}}
                    <li class="actor {{#if actor.er5eContestant}}contestant{{/if}}" data-name="{{actor.name}}"
                        data-uuid={{actor.uuid}}>
                        <img class="gold-icon" src="{{actor.img}}" alt="">
                        <div class="actor-info"><span class="title">{{actor.name}}</span><span class="subtitle">{{#if
                                actor.hasPlayerOwner}}{{localize
                                "epic-rolls-5e.get-roll-data.player"}}{{else}}{{localize
                                "epic-rolls-5e.get-roll-data.npc"}}{{/if}}</span></div>
                        <i class="add-remove fa-solid fa-plus"></i>
                    </li>
                    {{/each}}
                </ul>
            </filigree-box>
            <filigree-box>
                <h3>
                    <i class="fa-duotone fa-users"></i>
                    <span class="roboto-upper">{{localize "epic-rolls-5e.get-roll-data.available"}}</span>
                    <input type="search" name="" id="" placeholder="{{localize "SIDEBAR.Search" types=" " }}">
                </h3>
                <ul class="unselected-actors">
                    {{#each actors.notSelected as |actor|}}
                    <li class="actor" data-name="{{actor.name}}" data-uuid={{actor.uuid}}>
                        <img class="gold-icon" src="{{actor.img}}" alt="">
                        <div class="actor-info"><span class="title">{{actor.name}}</span><span class="subtitle">{{#if
                                actor.hasPlayerOwner}}{{localize
                                "epic-rolls-5e.get-roll-data.player"}}{{else}}{{localize
                                "epic-rolls-5e.get-roll-data.npc"}}{{/if}}</span></div>
                        <i class="add-remove fa-solid fa-plus"></i>
                    </li>
                    {{/each}}
                </ul>
            </filigree-box>
        </div>
        <div class="roll-types">
            <filigree-box>
                <div class="rolls-wrapper">
                    <input type="search" name="" id="" placeholder="{{localize "SIDEBAR.Search" types=" " }}">
                    {{#each rolls as |rollType|}}
                    <h3>
                        <i class="{{rollType.icon}}"></i>
                        <span class="roboto-upper">{{rollType.label}}</span>
                    </h3>
                    <ul>
                        {{#each rollType.list as |roll|}}
                        <li class="roll {{#if roll.selected}}selected{{/if}} {{#if roll.contest}}contestant{{/if}}"
                            data-name="{{roll.label}}" data-type="{{roll.type}}" data-key="{{roll.key}}">
                            <span class="title">{{roll.label}}</span>
                        </li>
                        {{/each}}
                    </ul>
                    {{/each}}
                    <h3>
                        <i class="fa-duotone fa-swords"></i><span class="roboto-upper">{{localize "DND5E.Initiative"}}</span>
                    </h3>
                    <ul>
                        <li class="roll initiative {{#if rollData.options.initiative}}selected{{/if}}" data-type="initiative" data-key="initiative">
                                <span for="">{{localize "DND5E.Initiative"}}</span>
                        </li>
                    </ul>
                    <h3>
                        <i class="fa-duotone fa-dice-d20"></i>
                        <span class="roboto-upper">{{localize "epic-rolls-5e.get-roll-data.customFormula"}}</span>
                    </h3>
                    <ul>
                        <li class="roll custom-roll {{#if rollData.options.formula}}selected{{/if}}" data-type="custom" data-key="formula">
                            <div class="form-group" data-name="formula">
                                <label for="">{{localize "epic-rolls-5e.get-roll-data.formula"}}</label>
                                <input type="text" name="customFormula" id="" placeholder="1d100" value="{{rollData.options.formula}}">
                            </div>
                        </li>
                    </h3>
                </div>
            </filigree-box>
        </div>

        <div class="roll-options">
            <filigree-box>
                <div class="roll-options-wrapper">


                    <h3>
                        <i class="fa-solid fa-dice-d20"></i>
                        <span class="roboto-upper">{{localize "epic-rolls-5e.get-roll-data.rollOptions"}}</span>
                        <i data-tooltip-direction="UP" data-tooltip="{{localize "epic-rolls-5e.get-roll-data.saveDefaultOptions"}}" class="fa-duotone fa-floppy-disk save-default"></i>
                    </h3>
                    <div class="form-group" data-name="DC">
                        <label for="">{{localize "DND5E.VsDC"}}</label>
                        <input type="number" placeholder="{{localize "DND5E.VsDC"}}" value="{{rollData.options.DC}}">
                        <p class="notes">{{localize "epic-rolls-5e.get-roll-data.VsDCNotes"}}</p>
                    </div>
                    <div class="form-group" data-name="showDC">
                        <label for="">{{localize "epic-rolls-5e.get-roll-data.showDC"}}</label>
                        <i
                            class="toggle fad {{#if rollData.options.showDC}}fa-toggle-on{{else}}fa-toggle-off{{/if}}"></i>
                        <p class="notes">{{localize "epic-rolls-5e.get-roll-data.showDCNotes"}}</p>
                    </div>
                    <div class="form-group" data-name="useAverage">
                        <label for="">{{localize "epic-rolls-5e.get-roll-data.useAverage"}}</label>
                        <i
                            class="toggle fad {{#if rollData.options.useAverage}}fa-toggle-on{{else}}fa-toggle-off{{/if}}"></i>
                        <p class="notes">{{localize "epic-rolls-5e.get-roll-data.useAverageNotes"}}</p>
                    </div>

                    <div class="form-group" data-name="allowReroll">
                        <label for="">{{localize "epic-rolls-5e.get-roll-data.allowReroll"}}</label>
                        <i
                            class="toggle fad {{#if rollData.options.allowReroll}}fa-toggle-on{{else}}fa-toggle-off{{/if}}"></i>
                        <p class="notes">{{localize "epic-rolls-5e.get-roll-data.allowRerollNotes"}}</p>
                    </div>

                    <div class="form-group" data-name="showRollResults">
                        <label for="">{{localize "epic-rolls-5e.get-roll-data.showRollResults"}}</label>
                        <i
                            class="toggle fad {{#if rollData.options.showRollResults}}fa-toggle-on{{else}}fa-toggle-off{{/if}}"></i>
                        <p class="notes">{{localize "epic-rolls-5e.get-roll-data.showRollResultsNotes"}}</p>
                    </div>

                    <div class="form-group" data-name="blindRoll">
                        <label for="">{{localize "epic-rolls-5e.get-roll-data.blindRoll"}}</label>
                        <i
                            class="toggle fad {{#if rollData.options.blindRoll}}fa-toggle-on{{else}}fa-toggle-off{{/if}}"></i>
                        <p class="notes">{{localize "epic-rolls-5e.get-roll-data.blindRollNotes"}}</p>
                    </div>

                    <div class="form-group" data-name="hideNames">
                        <label for="">{{localize "epic-rolls-5e.get-roll-data.hideNames"}}</label>
                        <i
                            class="toggle fad {{#if rollData.options.hideNames}}fa-toggle-on{{else}}fa-toggle-off{{/if}}"></i>
                        <p class="notes">{{localize "epic-rolls-5e.get-roll-data.hideNamesNotes"}}</p>
                    </div>

                    <div class="form-group" data-name="autoColor">
                        <label for="">{{localize "epic-rolls-5e.get-roll-data.autoColor"}}</label>
                        <i
                            class="toggle fad {{#if rollData.options.autoColor}}fa-toggle-on{{else}}fa-toggle-off{{/if}}"></i>
                        <p class="notes">{{localize "epic-rolls-5e.get-roll-data.autoColorNotes"}}</p>
                    </div>

                    <div class="form-group" data-name="color" style="border: none">
                        <label for="">{{localize "epic-rolls-5e.get-roll-data.color"}}</label>
                        <input type="range" id="color" min="0" max="360" value="{{rollData.options.color}}">
                        <p class="notes">{{localize "epic-rolls-5e.get-roll-data.colorNotes"}}</p>
                        <p class="notes color-preview" style="background: red; width: 100%; height: 1rem;"></p>
                    </div>

                    <div class="form-group" data-name="customLabel">
                        <label for="">{{localize "epic-rolls-5e.get-roll-data.customLabel"}}</label>
                        <input type="text" name="customLabel" id="" value="{{rollData.options.customLabel}}">
                        <p class="notes">{{localize "epic-rolls-5e.get-roll-data.customLabelNotes"}}</>
                    </div>

                    <p class="notes contest-info">
                        <i class="fa-duotone fa-swords"></i><strong> {{localize
                            "epic-rolls-5e.get-roll-data.contest"}}</strong>
                        <br>
                        {{localize "epic-rolls-5e.get-roll-data.contestInfo"}}
                    </p>

                </div>

            </filigree-box>
        </div>

    </div>


    <footer class="flexrow">
        <button id="start-epic-roll"><i class="fa-duotone fa-dice-d20"></i> {{localize
            "epic-rolls-5e.get-roll-data.startRoll"}}</button>
        <button id="macro"><i class="fa-duotone fa-terminal"></i> {{localize
            "epic-rolls-5e.get-roll-data.macro"}}</button>
    </footer>
</form>