@model BTCPayServer.Models.NotificationViewModels.IndexViewModel
@{
    ViewData["Title"] = "Notifications";
}

<partial name="_StatusMessage" />

<div class="d-flex flex-wrap align-items-center justify-content-between mb-2">
    <h2 class="my-1">@ViewData["Title"]</h2>
    <a id="NotificationSettings" asp-controller="UIManage" asp-action="NotificationSettings" class="btn btn-secondary">
        <vc:icon symbol="settings" />                
    </a>
</div>
@if (Model.Items.Count > 0)
{
    <form method="post" asp-action="MassAction">
        @if (Model.Items.Any())
        {
            <div class="table-responsive-md">
                <table class="table table-hover mass-action">
                    <thead class="mass-action-head">
                        <tr>
                            <th class="mass-action-select-col only-for-js">
                                <input name="selectedItems" type="checkbox" class="form-check-input mass-action-select-all" />
                            </th>
                            <th class="date-col">
                                <div class="d-flex align-items-center gap-1">
                                    Date
                                    <button type="button" class="btn btn-link p-0 switch-time-format" title="Switch date format">
                                        <vc:icon symbol="time" />
                                    </button>
                                </div>
                            </th>
                            <th>Message</th>
                            <th></th>
                        </tr>
                    </thead>
                    <thead class="mass-action-actions">
                        <tr>
                            <th class="mass-action-select-col only-for-js">
                                <input type="checkbox" class="form-check-input mass-action-select-all" />
                            </th>
                            <th colspan="6">
                                <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
                                    <div>
                                        <strong class="mass-action-selected-count">0</strong>
                                        selected
                                    </div>
                                    <div class="d-inline-flex align-items-center gap-3">
                                        <button type="submit" name="command" value="mark-seen" class="btn btn-link gap-1">
                                            <vc:icon symbol="actions-show" />
                                            Mark seen
                                        </button>
                                        <button type="submit" name="command" value="mark-unseen" class="btn btn-link gap-1">
                                            <vc:icon symbol="actions-hide" />
                                            Mark unseen
                                        </button>
                                        <button type="submit" name="command" value="delete" class="btn btn-link gap-1">
                                            <vc:icon symbol="actions-trash" />
                                            Delete
                                        </button>
                                    </div>
                                </div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in Model.Items)
                        {
                            <tr data-guid="@item.Id" class="notification-row mass-action-row @(item.Seen ? "seen" : "")">
                                <td class="only-for-js mass-action-select-col">
                                    <input name="selectedItems" type="checkbox" class="form-check-input mass-action-select" value="@item.Id" />
                                </td>
                                <td class="date-col">@item.Created.ToBrowserDate()</td>
                                <td>
                                    @item.Body
                                </td>
                                <td class="text-end">
                                    <div class="d-inline-flex align-items-center gap-3">
                                        <button class="btn btn-link p-0 btn-toggle-seen" type="submit" name="command" value="flip-individual:@(item.Id)">
                                            <span>Mark</span>&nbsp;<span class="seen-text"></span>
                                        </button>
                                        @if (!string.IsNullOrEmpty(item.ActionLink))
                                        {
                                            <a href="@item.ActionLink" class="btn btn-link p-0" rel="noreferrer noopener">Details</a>
                                        }
                                    </div>
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>

                <vc:pager view-model="Model" />
            </div>
        }
    </form>
}
else
{
    <p class="text-secondary mt-3">
        There are no notifications.
    </p>
}

<style>
    .notification-row.loading {
        cursor: wait;
        pointer-events: none;
    }

    .seen-text::after {
        content: "seen";
    }

    tr.seen td .seen-text::after {
        content: "unseen";
    }

    tr td {
        font-weight: bold;
    }

    tr.seen td {
        font-weight: normal;
    }
</style>

@section PageFootContent {
    <script type="text/javascript">
        delegate('click', '.btn-toggle-seen', e => {
            const row = $(e.target).parents(".notification-row").toggleClass("loading");
            const guid = row.data("guid");
            const url = "@Url.Action("FlipRead", "UINotifications", new { id = "placeholder" })".replace("placeholder", guid);
            $.post(url, function (data) {
                row.toggleClass("seen loading");
            });
            return false;
        })
    </script>
}