<div class="kopparhavet roll-item">
    <div class="border">
        <h3>{{localize name}}</h3>

        <div class="roll">
            <div class="dice-roll">
                {{#if closed}}
                <div style="text-align: center; margin-bottom: 0.5rem;">
                    {{localize "ROLL.CLOSED"}}: {{closed}}
                </div>
                {{/if}}
                {{#if opened}}
                <div style="text-align: center; margin-bottom: 0.5rem;">
                    {{localize "ROLL.OPENED"}}: {{opened}}
                </div>
                {{/if}}
                <div class="dice-result">
                    {{#if showFormula}}
                    <div class="dice-formula-kh">{{res.formula}}</div>
                    {{/if}}
                    <h2>{{res.total}}</h2>
                </div>
            </div>
            {{#if opposite}}
            <div class="dice-roll" style="text-align: center; margin-bottom: 0.5rem;">
                {{localize "ROLL.OPPOSITE"}}: {{opposite}}
            </div>
            {{/if}}
        </div>
        {{#if success}}
        <h2 style="border: none; text-align: center; width: 100%; font-weight: bold; color: limegreen;">
            {{#if excetional}}{{localize "ROLL.EXCEPTIONAL"}}{{/if}} {{localize "ROLL.SUCCESS"}}
        </h2>
        {{/if}}
        {{#if failure}}
        <h2 style="border: none; text-align: center; width: 100%; font-weight: bold; color: darkred;">
            {{#if excetional}}{{localize "ROLL.EXCEPTIONAL"}}{{/if}} {{localize "ROLL.FAILURE"}}
        </h2>
        {{/if}}
    </div>
</div>