@page
@model ShoppingAssistantWebClient.Web.Pages.WishlistModel
@{
    //Layout = null;
}
<style>
    .table-container {
        width: 95%;
        height: 95%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
    }

    .styled-table {
        border-collapse: collapse;
        width: 100%;
        max-width: 100%;
    }
    .styled-table th {
        border-bottom: 1px solid #ddd;
        text-align: center;
        font-size: larger;
        background-color: rgba(0, 159, 255, 0.1);
    }
    .styled-table td {
        border-bottom: 5px solid #FFF;
        border-top: 5px solid #FFF;
        text-align: center;
        font-size: large;
        padding: 20px;
        background-color: rgba(248, 248, 255, 1);
    }
</style>
<h1 style="text-align: center; margin-bottom: 50px">My Wishlist</h1>

<div class="table-container">

    @if(!(Model.wishlist is null))
    {
        <table class="styled-table">
            <thead>
                <tr>
                    <th> </th>
                    <th style="text-align: left;">Chat name</th>
                    <th>Type</th>
                    <th>Time</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model.wishlist) 
                {
                    <tr>
                        <form method="post" asp-page-handler="Delete" asp-route-id="@item.Id">
                            <td><input type="image" src="~/assets/x-button.png"></td>
                        </form>
                        <td style="text-align: left">@Html.DisplayFor(modelItem => item.Name)</td>
                        <td>@Html.DisplayFor(modelItem => item.Type)</td>
                        <td>@Html.DisplayFor(modelItem => item.Date)</td>
                        <form method="post" asp-page="Wishlist">
                            <td><input type="image" src="~/assets/shopping-cart.png" asp-page-handler="MoveToChat"></td>
                        </form>
                    </tr>
                }
            </tbody>
        </table>
    }
    else 
    {
        <h3>You don't have a wishlist</h3>
    }
    
</div>