source: KernelRecordsMVC.Web/Views/Artist/Index.cshtml@ d89d25b

@model IEnumerable<KernelRecordsMVC.Models.Artist>

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

<div class="artist-page">

    <div class="artist-page-header">

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

        <h1>Artists</h1>

        <p>
            Browse artists available in the Kernel Records catalog.
        </p>

    </div>


    @if (!Model.Any())
    {
        <div class="artist-empty">
            No artists are currently available.
        </div>
    }
    else
    {
        <div class="artist-grid">

            @foreach (var artist in Model)
            {
                <a asp-controller="Artist"
                   asp-action="Details"
                   asp-route-id="@artist.ArtistId"
                   class="artist-card">

                    <div class="artist-card-image">

                        @if (!string.IsNullOrWhiteSpace(
                            artist.ArtistPhoto))
                        {
                            <img src="@artist.ArtistPhoto"
                                 alt="@artist.ArtistName" />
                        }
                        else
                        {
                            <div class="artist-photo-placeholder">
                                ♪
                            </div>
                        }

                    </div>


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

                        <h2>
                            @artist.ArtistName
                        </h2>

                        @if (!string.IsNullOrWhiteSpace(
                            artist.ArtistDescription))
                        {
                            <p>
                                @artist.ArtistDescription
                            </p>
                        }

                        <span class="artist-card-link">
                            View Artist →
                        </span>

                    </div>

                </a>
            }

        </div>
    }

</div>