@inherits ViewModelTemplate<UserListViewModel>
@using Dynamicweb.Frontend
@using Dynamicweb.Rendering
@using Dynamicweb.Users.Frontend

@if (Model.Users.Count() > 0)
{
    <table class="table d-none d-lg-table table-striped table-hover align-top mb-0">
        <thead>
            <tr>
                <th>@Translate("Id")</th>
                <th>@Translate("Name")</th>
                <th>@Translate("Customer number")</th>
                <th>@Translate("Country")</th>
                <th>@Translate("Email")</th>
                <th>@Translate("Phone")</th>
            </tr>
        </thead>

        <tbody class="border-top-0">
            @foreach (var user in Model.Users)
            {
                <tr role="button"
                    tabindex="0"
                    data-bs-toggle="offcanvas" 
                    data-bs-target="#DynamicOffcanvas"
                    hx-trigger="click" 
                    hx-target="#DynamicOffcanvas" 
                    hx-get="/"
                    hx-vals='{"ParagraphId": "@Pageview.CurrentParagraph.ID", "ID": "@Pageview.Page.ID", "LayoutTemplate": "Swift-v2_PageClean.cshtml", "Secret": "@user.UniqueId"}'>

                    <td>@user.ID</td>
                    <td>@user.Name</td>
                    <td>@user.CustomerNumber</td>
                    <td>@user.Country</td>
                    <td>@user.Email</td>
                    <td>@user.Phone</td>
                </tr>
            }
        </tbody>
    </table>

    <div class="d-block d-lg-none">
        @foreach (var user in Model.Users)
        {
            <div class="card mb-3">
                <div class="card-body p-3">
                    <h5 class="card-title">
                        @user.Name
                    </h5>
                    <div class="card-text">
                        <div>@user.ID</div>
                        <div>@user.CustomerNumber</div>
                        <div>@user.Address</div>
                        <div>@user.Zip, @user.City</div>
                        <div>@user.Country</div>
                        <div>@user.Email</div>
                        <div>@user.Phone</div>
                    </div>
                </div>
            </div>
        }
    </div>

    if (Model.PageCount > 1)
    {
        <form class="p-3 mt-3">
            <ul class="pagination m-0">
                @for (int i = 1; i <= Model.PageCount; i++)
                {
                    var active = (i == Model.CurrentPage) ? "active" : string.Empty;
                    <li class="page-item @active">
                        <button type="submit" class="page-link" name="PageNum" value="@i">@i</button>
                    </li>
                }
            </ul>
        </form>
    }
}
else
{
    <div class="alert alert-info text-center mt-3" role="alert">
        @Translate("No users found")
    </div>
}
