{{#*inline "button"}}
<button class="dice-tray__button"
	data-formula="{{key}}"
	data-tooltip="{{#if data.tooltip}}{{data.tooltip}}{{else}}{{key}}{{/if}}"
	data-tooltip-direction="{{#if data.direction}}{{data.direction}}{{else}}UP{{/if}}"
	>
	<span class="dice-tray__flag dice-tray__flag--{{key}} hide"></span>
	{{!-- Image (and label, optionally) --}}
	{{#if data.img}}
	<div class="dice" style="
		mask: url({{data.img}}) center 2px/contain no-repeat;
		-webkit-mask: url({{data.img}}) center 2px/contain no-repeat;
		{{#if data.color}}background-color: {{data.color}};{{/if}}
	"></div>
	{{#if data.label}}
	<span class="dice-label" style="{{#if data.color}}color: {{data.color}};{{/if}}">
		{{{data.label}}}
	</span>
	{{/if}}
	{{!-- Label only, if no image --}}
	{{else}}
	<span style="{{#if data.color}}color: {{data.color}};{{/if}}">
		{{{data.label}}}
	</span>
	{{/if}}
</button>
{{/inline}}

<section class="dice-tray">
	{{#each dicerows as |dice|}}
	<div class="dice-tray__buttons flexrow">
		{{#each dice as |data key|}}
		{{> button data=data key=key}}
		{{/each}}
		{{#if (and @root.settings.compactMode @last)}}
		{{#unless @root.settings.hideNumberInput}}
		<input class="dice-tray__input" name="dice.tray.modifier" type="text" value="0"/>
		{{/unless}}
		{{#unless @root.settings.hideAdv }}
		<div id="dice-tray-math" hidden></div>
		{{/unless}}
		{{#unless @root.settings.hideRollButton}}
		<button class="dice-tray__roll">{{localize "DICE_TRAY.Roll"}}</button>
		{{/unless}}
		{{/if}}
	</div>
	{{/each}}
	{{#unless settings.compactMode}}
    <div class="dice-tray__math dice-tray__math__buttons flexrow">
		{{#if @root.settings.hideNumberButtons}}
		<input class="dice-tray__input" name="dice.tray.modifier" type="text" value="0"/>
		{{else}}
		<button class="dice-tray__math dice-tray__math--sub" data-formula="-1"><i class="fas fa-minus"></i></button>
		<input class="dice-tray__input" name="dice.tray.modifier" type="text" value="0"/>
		<button class="dice-tray__math dice-tray__math--add" data-formula="+1"><i class="fas fa-plus"></i></button>
		{{/if}}
		{{#unless @root.settings.hideAdv }}
		<div id="dice-tray-math" hidden></div>
		{{/unless}}
		{{#unless settings.hideRollButton}}
		<button class="dice-tray__roll">{{localize "DICE_TRAY.Roll"}}</button>
		{{/unless}}
    </div>
	{{/unless}}
</section>