@model List<Aberwyn.Models.MealCategory>
@{
    ViewData["Title"] = "Måltidskategorier";
}

<h1 class="page-title">Måltidskategorier</h1>

<div class="category-list">
    @foreach (var cat in Model)
    {
        <form method="post" action="/meal/categories/save" class="category-row">
            <input type="hidden" name="Id" value="@cat.Id" />

            <div class="name-with-preview">
                <div class="icon-preview" style="background-color: @cat.Color">
                    @if (!string.IsNullOrWhiteSpace(cat.Icon))
                    {
                        <span>@cat.Icon</span>
                    }
                    else
                    {
                        <span>🍽️</span>
                    }
                </div>
                <input name="Name" value="@cat.Name" placeholder="Namn" />
            </div>

            <input name="Icon" value="@cat.Icon" placeholder="Ikon (emoji eller klass)" />
            <input name="Slug" value="@cat.Slug" placeholder="Slug" />
            <input name="Color" value="@cat.Color" type="color" title="Färg" />

            <label class="checkbox-label">
                <input type="checkbox" name="IsActive" @(cat.IsActive ? "checked" : "") />
                Aktiv
            </label>

            <span class="meal-count">@cat.MealCount st</span>

            <div class="row-actions">
                <button type="submit" title="Spara"><i class="fas fa-save"></i></button>
                <form method="post" action="/meal/categories/delete" style="display:inline;">
                    <input type="hidden" name="id" value="@cat.Id" />
                    <button type="submit" class="delete" title="Ta bort"><i class="fas fa-trash"></i></button>
                </form>
            </div>
        </form>
    }

    <!-- Ny kategori -->
    <form method="post" action="/meal/categories/save" class="category-row new">
        <div class="name-with-preview">
            <div class="icon-preview" style="background-color: #6a0dad">➕</div>
            <input name="Name" placeholder="Ny kategori" autofocus />
        </div>

        <input name="Icon" placeholder="Ikon" />
        <input name="Slug" placeholder="Slug" />
        <input name="Color" type="color" value="#6a0dad" />

        <label class="checkbox-label">
            <input type="checkbox" name="IsActive" checked />
            Aktiv
        </label>

        <span></span>

        <div class="row-actions">
            <button type="submit" title="Lägg till"><i class="fas fa-plus"></i></button>
        </div>
    </form>
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
<link rel="stylesheet" href="/css/meal-categories.css">
