@model List<Sport>
@{
    ViewData["Title"] = "Detta finns på SportPalatset";
}

<h2 class="text-center mt-3 mb-4">@ViewData["Title"]</h2>
<p class="lead text-center font-weight-bold mt-1 mb-4">Hos oss hittar du allt för din träning. Det spelar ingen roll om du är elitsatsande eller motionär.</p>
<div class="container">
    @foreach (var sport in Model) {
        <a href="/Sport/Details/@sport.SportId">
            <div class="col-sm mt-3">
                <div class="card bg-dark text-white">
                    <img class="card-img" src="~/images/sport/@sport.Bakgrundsbild" alt="@sport.SportNamn">
                    <div class="card-img-overlay myCard">
                        <h3 class="card-title">@sport.SportNamn</h3>
                        <p class="card-text mt-5">@sport.Ingress</p>
                    </div>
                </div>
            </div>
        </a>
    }
</div>

<p class="lead mt-5 mb-5 text-center font-weight-bold">Kom du ända hit utan att hitta något? Scrolla tillbaka så hittar du något kul för dig!</p>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}