Wishlist.razor

@page "/wishlist"
@using EveryoneReads.Backend
@inject NavigationManager NavMan

<PageTitle>Wishlist | Everyone Reads</PageTitle>
<h3 style="color:white">Wishlist</h3>


<style>

    body {
        background: linear-gradient(320deg, rgba(155,234,255,1) 0%, rgba(101,61,255,1) 0%, rgba(162,139,255,1) 100%);
    }
</style>



<div class="row row-cols-1 row-cols-sm-4 g-2">
    @foreach (var book in Util.Wishlist)
    {

        <div class="col">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-10"><span class="d-inline-block text-truncate" style="max-width: 310px">@book.Title</span></div>
                        <div class="col">
                            <button class="btn btn-primary-outline" style="color:red" @onclick="(e => Util.Wishlist.Remove(book))">X</button>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="container" style="height:200px">

                        <div class="row">
                            <div class="col-6">
                                <img @onclick="@(e => NavigateTo(@book.GoogleBooksID))" src="@book.CoverURL" class="card-img-top img-fluid" alt="@book.Title's cover" style="height:80%;width:auto;object-fit:fill;cursor:pointer">
                            </div>
                            <div class="col">
                                <p class="text-sm-start">
                                    Publisher: @book.Publisher
                                    <br>
                                    Authors: @string.Join(",",@book.Authors)
                                    <br>
                                    Published: @book.PublishDate
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer text-muted">
                    <div class="container">
                        <div class="row">
                            <div class="col">
                                <button class="btn btn-primary" style="width:100%;background:grey; color:#FFF;border-color:#FFF" @onclick="() => Util.MyBooks.Add(book)">Price: $@book.Price </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    }
    <br />

</div>

<div style="position:fixed;bottom:50px;right:400px;font-family:Roboto">
    <span class="fs-1 text-white">Total: $@TotalPrice</span>
    <button type="button" style="margin-left:50px;bottom:50px" class="fs-1 btn btn-success btn-lg rounded-3 fw-bold">Purchase</button>
</div>


@code {

    private float TotalPrice
    {

        get
        {
            float tmp = 0;
            foreach (var item in Util.Wishlist)
            {
                tmp += item.Price;
            }
            return tmp;
        }
    }

    private async Task NavigateTo(string googleBooksID)
    {
        NavMan.NavigateTo(NavMan.BaseUri + "book?google=" + googleBooksID);
    }
}