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

@{
    ViewData["Title"] = "Top Sellers";
}

<div class="top-sellers-page">

    <div class="top-sellers-header">

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

        <h1>Top Sellers</h1>

        <p>
            The records our customers are buying the most.
        </p>

    </div>


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

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

            <h2>No sales yet</h2>

            <p>
                Top sellers will appear here once orders are completed.
            </p>

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

            @{
                var position = 1;
            }

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

                    <a asp-controller="Release"
                       asp-action="Details"
                       asp-route-id="@item.ReleaseId"
                       class="release-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="release-type-badge">
                            #@position
                        </span>

                    </a>


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

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

                            <span>
                                @item.Format
                            </span>

                            <span>
                                @item.SoldQuantity sold
                            </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="release-card-bottom">

                            <div class="release-starting">

                                Price

                                <strong>
                                    @item.Price.ToString("C")
                                </strong>

                            </div>


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

                                View

                            </a>

                        </div>

                    </div>

                </article>

                position++;
            }

        </div>
    }

</div>