@model BTCPayServer.Models.StoreViewModels.ListStoresViewModel
@{
    Layout = "_Layout";
    ViewData.SetActivePage(ServerNavPages.Stores, StringLocalizer["Store Overview"]);
}
<div class="sticky-header">
	<h2 class="my-1" text-translate="true">@ViewData["Title"]</h2>
</div>
<partial name="_StatusMessage" />

@if (Model.Stores.Any())
{
    <table class="table table-hover">
        <thead>
            <tr>
                <th text-translate="true">Store</th>
                <th text-translate="true">Users</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var store in Model.Stores)
            {
                var detailsId = $"store_details_{store.StoreId}";
                <tr id="store_@store.StoreId" class="mass-action-row">
                    <td>
                        <a asp-controller="UIStores" asp-action="Index" asp-route-storeId="@store.StoreId" id="Store-@store.StoreId">
                            @store.StoreName
                        </a>
                        @if (store.Archived)
                        {
                            <span class="badge bg-info ms-2" text-translate="true">archived</span>
                        }
                    </td>
                    <td>@store.Users.Count User@(store.Users.Count == 1 ? "" : "s")</td>
                    <td class="text-end">
                        <div class="d-inline-flex align-items-center gap-2">
                            <button class="accordion-button collapsed only-for-js ms-0 d-inline-block" type="button" data-bs-toggle="collapse" data-bs-target="#@detailsId" aria-expanded="false" aria-controls="@detailsId">
                                <vc:icon symbol="caret-down" />
                            </button>
                        </div>
                    </td>
                </tr>
                <tr id="@detailsId" class="store-details-row collapse">
                    <td colspan="5" class="border-top-0">
                        @if (store.Users.Any())
                        {
                            <ul class="mb-0 p-0">
                                @foreach (var user in store.Users)
                                {
                                    <li class="py-1 d-flex gap-2">
                                        <a asp-controller="UIServer" asp-action="User" asp-route-userId="@user.ApplicationUser.Id">@user.ApplicationUser.Email</a>
                                        <span class="badge bg-light">@user.StoreRoleId</span>
                                        @if (store.Archived)
                                        {
                                            <span class="badge bg-info" text-translate="true">archived</span>
                                        }
                                    </li>
                                }
                            </ul>
                        }
                        else
                        {
                            <span class="text-secondary" text-translate="true">No users</span> 
                        }
                    </td>
                </tr>
            }
        </tbody>
    </table>
}
else
{
    <p class="text-secondary mt-3" text-translate="true">
        There are no stores yet.
    </p>
}