@model BTCPayServer.Models.NotificationViewModels.IndexViewModel
@{
    ViewData["Title"] = "Notifications";
}
@section HeadScripts {
    <script src="~/modal/btcpay.js" asp-append-version="true"></script>
}
<section>
    <div class="container">
        @if (TempData.HasStatusMessage())
        {
            <div class="row">
                <div class="col-lg-12 text-center">
                    <partial name="_StatusMessage" />
                </div>
            </div>
        }
        <div class="row">
            <div class="col-lg-12 section-heading">
                <h2>@ViewData["Title"]</h2>
                <hr class="primary">
            </div>
        </div>
        <div class="row button-row">
            <div class="col-lg-6">
                <a asp-action="Generate" class="btn btn-primary" role="button" id="Generate"><span class="fa fa-plus"></span> Generate Test Notification</a>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <table class="table table-sm table-responsive-md">
                    <thead>
                        <tr>
                            <th width="165px">Date</th>
                            <th>Message</th>
                            <th width="70px">&nbsp;</th>
                            <th width="70px">&nbsp;</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in Model.Items)
                        {
                            @* TODO: Click on td to mark notification read through JavaScript magic *@
                            @* TODO: Multiselect akin to Gmail *@
                            <tr>
                                <td class="cursor-pointer @(item.Seen ? "": "font-weight-bold")">@item.Created.ToBrowserDate()</td>
                                <td class="cursor-pointer @(item.Seen ? "": "font-weight-bold")">@item.Body</td>
                                <td>
                                    @if (!String.IsNullOrEmpty(item.ActionLink))
                                    {
                                        <a href="@item.ActionLink">Action</a>
                                    }
                                    else
                                    {
                                        <span>&nbsp;</span>
                                    }
                                </td>
                                <td>
                                    @if (item.Seen)
                                    {
                                        <a asp-action="FlipRead" asp-route-id="@item.Id"><span class="fa fa-envelope-o" title="Mark Unread"></span></a>
                                    }
                                    else
                                    {
                                        <a asp-action="FlipRead" asp-route-id="@item.Id"><span class="fa fa-envelope-open-o" title="Mark Read"></span></a>
                                    }
                                    &nbsp;
                                    <a asp-action="Delete" asp-route-id="@item.Id"><span class="fa fa-trash-o" title="Delete"></span></a>
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>

                <nav aria-label="...">
                    <ul class="pagination">
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</section>