@model MemberCenter.Web.Models.TenantNewsletters.TenantNewsletterDetailViewModel
@{
    ViewData["Title"] = Model.Name;
    var showReason = Model.Tab == "blacklisted";
}

<div class="account-detail-title tenant-newsletter-detail-title">
  <a class="account-detail-back" asp-action="Index" aria-label="@L["Back to newsletter management"]">&lt;</a>
  <div>
    <h1>@Model.Name</h1>
    <p>@Model.TenantName</p>
  </div>
</div>

<div class="tenant-newsletter-detail-summary">
  <section class="tenant-newsletter-detail-metric">
    <span>@L["Subscriptions"]</span>
    <strong>@Model.ActiveSubscriptionCount</strong>
  </section>

  <section class="tenant-newsletter-detail-metric">
    <span>@L["Unsubscribed"]</span>
    <strong>@Model.UnsubscribedCount</strong>
  </section>
</div>

<nav class="admin-tabs newsletter-detail-tabs" aria-label="@L["Newsletter subscriber status"]">
  <a class="admin-tab @(Model.Tab == "subscribers" ? "is-active" : null)" asp-action="Details" asp-route-id="@Model.Id" asp-route-tab="subscribers" asp-route-search="@Model.Search">@L["Subscribers"]</a>
  <a class="admin-tab @(Model.Tab == "unsubscribed" ? "is-active" : null)" asp-action="Details" asp-route-id="@Model.Id" asp-route-tab="unsubscribed" asp-route-search="@Model.Search">@L["Unsubscribed"]</a>
  <a class="admin-tab @(Model.Tab == "pending" ? "is-active" : null)" asp-action="Details" asp-route-id="@Model.Id" asp-route-tab="pending" asp-route-search="@Model.Search">@L["Pending verification"]</a>
  <a class="admin-tab @(Model.Tab == "blacklisted" ? "is-active" : null)" asp-action="Details" asp-route-id="@Model.Id" asp-route-tab="blacklisted" asp-route-search="@Model.Search">@L["Blacklist"]</a>
</nav>

<form method="get" class="admin-table-toolbar">
  <input type="hidden" name="tab" value="@Model.Tab" />
  <input type="search" name="search" value="@Model.Search" placeholder="@L["Search"]" aria-label="@L["Search"]" />
  <button type="submit" class="data-table-icon-button" aria-label="@L["Search"]">⌕</button>
</form>

<div class="data-table-shell">
  <table class="data-table tenant-newsletter-detail-table">
    <thead>
      <tr>
        <th class="data-table-index">#</th>
        <th>@L["Email"]</th>
        <th>@L["List ID"]</th>
        <th>@L["Created"]</th>
        @if (showReason)
        {
          <th>@L["Reason"]</th>
        }
        <th>@L["Action"]</th>
      </tr>
    </thead>
    <tbody>
    @if (!Model.Rows.Any())
    {
      <tr>
        <td colspan="@(showReason ? 6 : 5)" class="data-table-empty">@L["No records."]</td>
      </tr>
    }
    else
    {
      var rowNumber = 1;
      foreach (var row in Model.Rows)
      {
        <tr>
          <td class="data-table-index">@rowNumber.ToString("000")</td>
          <td>@row.Email</td>
          <td>@row.ListId</td>
          <td>@row.CreatedAt.ToString("yyyy/MM/dd HH:mm")</td>
          @if (showReason)
          {
            <td>@(row.Reason ?? "-")</td>
          }
          <td><span class="data-table-muted">-</span></td>
        </tr>
        rowNumber++;
      }
    }
    </tbody>
  </table>
</div>
