btcpayserver/BTCPayServer/Views/UIStores/StoreEmailRulesList.cshtml

@using BTCPayServer.Client
@using BTCPayServer.TagHelpers
@using Microsoft.AspNetCore.Mvc.TagHelpers
@model List<BTCPayServer.Controllers.UIStoresController.StoreEmailRule>

@{
    var storeId = Context.GetStoreData().Id;
    ViewData.SetActivePage(StoreNavPages.Emails, StringLocalizer["Email Rules"], storeId);
}
<div class="sticky-header">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a asp-action="StoreEmailSettings" asp-route-storeId="@storeId" text-translate="true">Emails</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">@ViewData["Title"]</li>
        </ol>
        <h2>@ViewData["Title"]</h2>
    </nav>
    <a id="CreateEmailRule" permission="@Policies.CanModifyStoreSettings" asp-action="StoreEmailRulesCreate" asp-route-storeId="@storeId" 
       class="btn btn-primary" role="button">
        Create Email Rule
    </a>
</div>

<partial name="_StatusMessage" />
<p text-translate="true">
    Email rules allow BTCPay Server to send customized emails from your store based on events.
</p>

<div id="overlay" style="display: none; position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.5);
    z-index: 9998;"></div>

<div id="deleteConfirmation" class="modal-content" style="display: none;position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%); background-color: black; color: white; padding: 20px;
    border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); z-index: 9999; width: 500px;">
    <div class="modal-header"><h4 class="modal-title">Delete rule</h4></div><br />
    <p style="margin-bottom: 20px;">This rule will be deleted. Are you sure?</p>
    <br />
    <div style="display: flex; justify-content: flex-end; gap: 10px;">
        <button onclick="cancelDelete()" class="btn btn-secondary only-for-js">Cancel</button>
        <button onclick="confirmDelete()" class="btn btn-danger">Delete</button>
    </div>
</div>

<button onclick="showConfirmation()" style="display: none;">Delete Item</button>

@if (Model.Any())
{
    <div class="table-responsive">
        <table class="table table-hover">
            <thead>
            <tr>
                <th>Trigger</th>
                <th>Customer Email</th>
                <th>To</th>
                <th>Subject</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
            @foreach (var rule in Model.Select((value, index) => new { value, index }))
            {
                <tr>
                    <td>@rule.value.Trigger</td>
                    <td>@(rule.value.CustomerEmail ? "Yes" : "No")</td>
                    <td>@rule.value.To</td>
                    <td>@rule.value.Subject</td>
                    <td>
                        <a asp-action="StoreEmailRulesEdit" asp-route-storeId="@storeId" asp-route-ruleIndex="@rule.index">Edit</a>
                        -
                        <form id="deleteRule" asp-action="StoreEmailRulesDelete" asp-route-storeId="@storeId" asp-route-ruleIndex="@rule.index" method="post" style="display:inline;">
                            <a href="#" class="text-danger" onclick="event.preventDefault(); showConfirmation();">Delete</a>
                        </form>
                    </td>
                </tr>
            }
            </tbody>
        </table>
    </div>
}
else
{
    <p class="text-secondary" text-translate="true">
        There are no rules yet.
    </p>
}

<script>
    function showConfirmation() {
         document.getElementById('overlay').style.display = 'block';
         document.getElementById('deleteConfirmation').style.display = 'block';
     }

     function cancelDelete() {
         document.getElementById('overlay').style.display = 'none';
         document.getElementById('deleteConfirmation').style.display = 'none';
     }

     function confirmDelete() {
         document.getElementById('deleteRule').submit();
     }

     document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape') {
            cancelDelete();
        }
    });
</script>