<div class="monks-tokenbar flexcol" style="height:100%;">
    <div class="dialog-content" style="max-height: calc(100% - 32px);">
        <form style="height:100%;">
            <div class="flexrow" style="height:100%;">
                <div style="padding-right:10px;">
                    <div class="form-group">
                        <label>{{localize 'MonksTokenBar.SavingDC'}}</label>
                        <input type="text" id="monks-tokenbar-savingdc" placeholder="{{localize 'MonksTokenBar.SavingDCPlaceholder'}}" value="{{dc}}" />
                    </div>
                    <div class="form-group">
                        <label>{{localize 'MonksTokenBar.RollMode'}}</label>
                        <select id="savingthrow-rollmode">
                            <option value="roll" selected="">{{localize 'MonksTokenBar.PublicRoll'}}</option>
                            <option value="gmroll">{{localize 'MonksTokenBar.PrivateGMRoll'}}</option>
                            <option value="blindroll">{{localize 'MonksTokenBar.BlindGMRoll'}}</option>
                            <option value="selfroll">{{localize 'MonksTokenBar.SelfRoll'}}</option>
                        </select>
                    </div>
                    <div class="form-group sheet">
                        <ol class="items-list inventory-list">
                            <li class="items-header flexrow">
                                <h3 class="item-name flexrow">{{localize 'MonksTokenBar.Actors'}}</h3>

                                <div class="item-controls flexrow">
                                    <a class="item-control" title="{{localize 'MonksTokenBar.AddPlayers'}}" data-type="player">
                                        <i class="fas fa-child"></i>{{localize 'MonksTokenBar.Players'}}
                                    </a>
                                    <a class="item-control" title="{{localize 'MonksTokenBar.AddLastTokens'}}" data-type="last">
                                        <i class="fas fa-bolt"></i>{{localize 'MonksTokenBar.LastTokens'}}
                                    </a>
                                    <a class="item-control" title="{{localize 'MonksTokenBar.AddActor'}}" data-type="actor">
                                        <i class="fas fa-plus"></i>{{localize 'MonksTokenBar.XPAdd'}}
                                    </a>
                                    <a class="item-control" title="{{localize 'MonksTokenBar.ClearAll'}}" data-type="clear">
                                        <i class="fas fa-trash-alt"></i>{{localize 'MonksTokenBar.Clear'}}
                                    </a>
                                </div>
                            </li>

                            <ol class="item-list">
                                {{#each tokens}}
                                <li class="item flexrow " data-item-id="{{this.id}}" draggable="true">
                                    <div class="item-name flexrow rollable">
                                        <div class="item-image" style="background-image: url('{{this.data.img}}')">
                                            <video width="30" height="30"><source src="{{this.data.img}}" /></video>
                                        </div>
                                        <h4>
                                            {{this.name}}
                                        </h4>
                                    </div>

                                    <div class="item-controls flexrow">
                                        <a class="item-control item-delete" title="{{localize 'MonksTokenBar.DeleteItem'}}"><i class="fas fa-trash"></i></a>
                                    </div>
                                </li>
                                {{/each}}
                            </ol>
                        </ol>
                    </div>
                </div>
                <div class="request-roll" style="height: 100%; overflow-y: auto; overflow-x: hidden;line-height: 17px;">
                    {{#each options}}
                    {{#if this.text}}
                    <div class="request-header">{{localize this.text}}</div>
                    {{/if}}
                    <div class="request-grid {{this.cssclass}}">
                        {{#each this.groups as |name key|}}
                        <div class="request-option" value="{{../id}}:{{key}}">{{localize name}}</div>
                        {{/each}}
                    </div>
                    {{/each}}
                </div>
            </div>
        </form>
    </div>
    <div class="dialog-buttons">
        <button class="dialog-buttons request" data-button="request">{{localize 'MonksTokenBar.Request'}}</button>
    </div>
</div>
