@if (Visible)
{
    <div class="modal-overlay" role="presentation" @onclick="HandleOverlayClickAsync">
        <section class="modal-card rolemaster-roll-modal"
                 role="dialog"
                 aria-modal="true"
                 aria-label="Rolemaster situational modifier"
                 tabindex="-1"
                 @onclick:stopPropagation="true"
                 @onkeydown="HandleKeyDownAsync">
            <h2>Rolemaster skill roll</h2>
            <p class="muted">Roll <strong>@SkillName</strong> using <code>@Expression</code>.</p>
            @if (!string.IsNullOrWhiteSpace(ErrorMessage))
            {
                <p class="form-error">@ErrorMessage</p>
            }
            <form class="form-grid" @onsubmit="SubmitAsync" @onsubmit:preventDefault>
                <label for="@ModifierInputId">Situational modifier</label>
                <input id="@ModifierInputId"
                       @ref="ModifierInputElement"
                       value="@CurrentModifierText"
                       @oninput="OnModifierInput"
                       placeholder="Blank = 0"
                       inputmode="numeric"
                       autocomplete="off"/>
                <p class="field-help">Optional one-shot bonus or penalty. Examples: <code>20</code>, <code>-15</code>, or blank for <code>0</code>.</p>
                <div class="inline-actions">
                    <button type="submit" disabled="@(IsMutating || IsSubmitting)">Roll</button>
                    <button type="button" class="ghost" disabled="@(IsMutating || IsSubmitting)" @onclick="CancelRequested">Cancel</button>
                </div>
            </form>
        </section>
    </div>
}