source: KernelRecordsMVC.Web/Views/Sale/Index.cshtml

@model IEnumerable<KernelRecordsMVC.Application.ViewModels.SaleItemViewModel>

@{
    ViewData["Title"] = "Sale";
}

<div class="sale-page">

    <div class="sale-header">

        <span class="page-eyebrow">
            KERNEL RECORDS
        </span>

        <h1>Sale</h1>

        <p>
            Limited-time prices on selected physical releases.
        </p>

    </div>


    @if (!Model.Any())
    {
        <div class="no-sales-data">

            <div class="empty-store-icon">
                %
            </div>

            <h2>No items are currently on sale</h2>

            <p>
                Check back soon for new discounts.
            </p>

        </div>
    }
    else
    {
        <div class="sale-grid">

            @foreach (var item in Model)
            {
                <article class="sale-card">

                    <a asp-controller="Release"
                       asp-action="Details"
                       asp-route-id="@item.ReleaseId"
                       class="sale-card-cover">

                        @if (!string.IsNullOrWhiteSpace(item.CoverPhoto))
                        {
                            <img src="@item.CoverPhoto"
                                 alt="@item.ReleaseTitle" />
                        }
                        else
                        {
                            <div class="release-no-cover">
                                <span>♪</span>
                            </div>
                        }

                        <span class="sale-badge">
                            -@item.DiscountPercentage%
                        </span>

                    </a>


                    <div class="sale-card-body">

                        <div class="release-card-meta">

                            <span>
                                @item.Format
                            </span>

                            @if (item.Stock > 0)
                            {
                                <span class="stock available">
                                    In stock
                                </span>
                            }
                            else
                            {
                                <span class="stock unavailable">
                                    Out of stock
                                </span>
                            }

                        </div>


                        <h2>

                            <a asp-controller="Release"
                               asp-action="Details"
                               asp-route-id="@item.ReleaseId">

                                @item.ReleaseTitle

                            </a>

                        </h2>


                        <p class="release-card-artist">
                            @item.ArtistName
                        </p>


                        <div class="sale-price-row">

                            <span class="sale-old-price">
                                @item.OriginalPrice.ToString("C")
                            </span>

                            <strong class="sale-price">
                                @item.SalePrice.ToString("C")
                            </strong>

                        </div>


                        <div class="sale-actions">

                            @if (item.Stock > 0)
                            {
                                <a asp-controller="Order"
                                   asp-action="AddProduct"
                                   asp-route-id="@item.ProductId"
                                   class="store-button primary full">

                                    Add to Cart

                                </a>
                            }

                            <a asp-controller="Release"
                               asp-action="Details"
                               asp-route-id="@item.ReleaseId"
                               class="store-button secondary full">

                                View Release

                            </a>

                        </div>

                    </div>

                </article>
            }

        </div>
    }

</div>