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

@model IEnumerable<KernelRecordsMVC.Models.Release>

@{
    ViewData["Title"] = "Browse Releases";
}

<div class="releases-page">

    <!-- =====================================================
         HEADER
         ===================================================== -->

    <div class="releases-header">

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

            <h1>Browse Releases</h1>

            <p>
                Explore vinyl, CDs and cassettes from our collection.
            </p>
        </div>

        <div class="release-count">
            @Model.Count() releases
        </div>

    </div>


    <!-- =====================================================
         FILTERS
         ===================================================== -->

    <form asp-action="Index"
          method="get"
          class="release-filters">

        <div class="filter-search">

            <label>Search</label>

            <input type="text"
                   name="search"
                   value="@ViewBag.Search"
                   placeholder="Search by title or artist..." />

        </div>


        <div>

            <label>Genre</label>

            <select name="genre">

                <option value="">All Genres</option>

                @foreach (var item in ViewBag.Genres)
                {
                    <option value="@item"
                            selected="@(ViewBag.Genre == item ? "selected" : null)">
                        @item
                    </option>
                }

            </select>

        </div>


        <div>

            <label>Format</label>

            <select name="format">

                <option value="">All Formats</option>

                @foreach (var item in ViewBag.Formats)
                {
                    <option value="@item"
                            selected="@(ViewBag.Format == item ? "selected" : null)">
                        @item
                    </option>
                }

            </select>

        </div>


        <div>

            <label>Type</label>

            <select name="type">

                <option value="">All Types</option>

                <option value="Album"
                        selected="@(ViewBag.Type == "Album" ? "selected" : null)">
                    Album
                </option>

                <option value="Single"
                        selected="@(ViewBag.Type == "Single" ? "selected" : null)">
                    Single
                </option>

            </select>

        </div>


        <div>

            <label>Sort</label>

            <select name="sort">

                <option value="">Title A–Z</option>

                <option value="titleDesc"
                        selected="@(ViewBag.Sort == "titleDesc" ? "selected" : null)">
                    Title Z–A
                </option>

                <option value="newest"
                        selected="@(ViewBag.Sort == "newest" ? "selected" : null)">
                    Newest
                </option>

                <option value="oldest"
                        selected="@(ViewBag.Sort == "oldest" ? "selected" : null)">
                    Oldest
                </option>

                <option value="format"
                        selected="@(ViewBag.Sort == "format" ? "selected" : null)">
                    Format
                </option>

                <option value="priceAsc"
                        selected="@(ViewBag.Sort == "priceAsc" ? "selected" : null)">
                    Price: Low to High
                </option>

                <option value="priceDesc"
                        selected="@(ViewBag.Sort == "priceDesc" ? "selected" : null)">
                    Price: High to Low
                </option>

            </select>

        </div>


        <div class="filter-button">

            <button type="submit"
                    class="store-button primary">

                Apply Filters

            </button>

        </div>


        @if (!string.IsNullOrWhiteSpace(ViewBag.Search as string) ||
             !string.IsNullOrWhiteSpace(ViewBag.Genre as string) ||
             !string.IsNullOrWhiteSpace(ViewBag.Format as string) ||
             !string.IsNullOrWhiteSpace(ViewBag.Type as string) ||
             !string.IsNullOrWhiteSpace(ViewBag.Sort as string))
        {
            <div class="clear-filter">

                <a asp-action="Index">
                    Clear all filters
                </a>

            </div>
        }

    </form>


    <!-- =====================================================
         RELEASE GRID
         ===================================================== -->

    @if (!Model.Any())
    {
        <div class="empty-store">

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

            <h2>No releases found</h2>

            <p>
                Try changing your search or filters.
            </p>

            <a asp-action="Index"
               class="store-button primary">
                View All Releases
            </a>

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

            @foreach (var release in Model)
            {
                var isAlbum = release.Album != null;
                var isSingle = release.SingleRelease != null;

                var releaseType =
                    isAlbum ? "ALBUM" :
                    isSingle ? "SINGLE" :
                    "RELEASE";

                var artists = string.Join(
                    ", ",
                    release.ReleaseArtists
                        .OrderBy(x => x.ReleaseOrdinal)
                        .Select(x => x.Artist.ArtistName)
                );

                var lowestPrice = release.Products
                    .Select(x => (decimal?)x.Price)
                    .Min();

                <article class="release-card">

                    <a asp-action="Details"
                       asp-route-id="@release.ReleaseId"
                       class="release-card-cover">

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

                        <span class="release-type-badge">
                            @releaseType
                        </span>

                    </a>


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

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

                            <span>
                                @release.Genre
                            </span>

                            <span>
                                @release.ReleaseDate.ToString("yyyy")
                            </span>

                        </div>


                        <h2>

                            <a asp-action="Details"
                               asp-route-id="@release.ReleaseId">

                                @release.Title

                            </a>

                        </h2>


                        <p class="release-card-artist">

                            @artists

                        </p>


                        <div class="format-list">

                            @foreach (var product in release.Products
                                .GroupBy(x => x.Format)
                                .Select(x => x.First()))
                            {
                                <span class="format-pill">
                                    @product.Format
                                </span>
                            }

                        </div>


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

                            <div class="release-starting">

                                Starting at

                                <strong>
                                    @(lowestPrice?.ToString("C") ?? "Coming soon!")
                                </strong>

                            </div>


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

                                View

                            </a>

                        </div>

                    </div>

                </article>
            }

        </div>
    }

</div>