@page "/cocktails"
@using CocktailWeb.Data
@using Microsoft.AspNetCore.Components.Sections
@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<DbDataContext> DataContextFactory;
@inject IWebHostEnvironment env;
<!--layout SideScrollLayout-->
<!--<h3>Cocktails</h3>-->

<SectionContent SectionId="TopRow.Title">
    <label>Cocktails</label>
</SectionContent>
<!--
<p>
    <a href="/cocktails/add">Cocktail hinzufügen</a>
</p>
-->
<!-- Flex Container für Horizontalen Scroll - klappt aber nicht so richtig->
<!--<div class="container py-2 border border-5 overflow-auto d-inline-block">
    <div class="row flex-nowrap">-->

<div class="card-group gap-3 flex-nowrap">
    @foreach (Cocktail c in CocktailListe)
    {
        <div class="col">
            <a class="text-decoration-none text-black;" href="/cocktails/@c.Id">
                <div class="card" style="width: 20vw; min-width:15rem; max-height:350px; ">
                    
                @if (c.ImageURL != null && File.Exists(Path.Join(env.WebRootPath, c.ImageURL)))
                {
                        <img class="card-img-top" style="width:100%; min-height:70vh; object-fit:cover;" src="@($"/{c.ImageURL}")" alt="@c.Name">
                }
                else
                {
                
                        <img class="card-img-top" style="width:100%; min-height:70vh; object-fit:cover;" src="@($"/img/cocktail-default.jpg")" alt="@c.Name">
                    }
                    <div class="card-footer">
                        <h5 class="card-title">@c.Name</h5>
                        <!--<p class="card-text">
                            Testy
                        </p>-->
                    </div>
                </div>
            </a>
        </div>
    }

</div>