@model Recepie.ViewModels.DayPlanConfigViewModel

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Configure Day - Week Planner</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body class="container mt-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/WeekPlanner">Week Planner</a></li>
            <li class="breadcrumb-item active">Configure Day</li>
        </ol>
    </nav>

    <h1 class="mb-4">🍽️ Configure Day Plan</h1>

    <div class="row">
        <div class="col-lg-8">
            <form action="/WeekPlanner/UpdateDayPlan" method="post">
                <input type="hidden" name="DayPlanId" value="0" />

                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">🥘 Meal Preferences</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="SelectedMainIngredient" class="form-label">Main Ingredient</label>
                            <select name="SelectedMainIngredient" class="form-select">
                                <option value="">No preference</option>
                                <option value="Potatis">Potatis</option>
                                <option value="Ris">Ris</option>
                                <option value="Pasta">Pasta</option>
                                <option value="Kött">Kött</option>
                                <option value="Kyckling">Kyckling</option>
                                <option value="Fisk">Fisk</option>
                            </select>
                            <div class="form-text">Choose a main ingredient to focus the meal around</div>
                        </div>

                        <div class="mb-3">
                            <label for="RequiredIngredients" class="form-label">Required Ingredients</label>
                            <input name="RequiredIngredients" class="form-control"
                                placeholder="e.g., tomatoes, cheese, basil">
                            <div class="form-text">Comma-separated list of ingredients that must be included</div>
                        </div>

                        <div class="mb-3">
                            <label for="BannedIngredients" class="form-label">Avoid Ingredients</label>
                            <input name="BannedIngredients" class="form-control"
                                placeholder="e.g., nuts, dairy, shellfish">
                            <div class="form-text">Comma-separated list of ingredients to avoid</div>
                        </div>
                    </div>
                </div>

                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-primary">💾 Save Configuration</button>
                    <a href="/WeekPlanner" class="btn btn-outline-secondary">↩️ Back to Week Plan</a>
                </div>
            </form>
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-body text-center text-muted">
                    <p>Configure meal preferences</p>
                    <p class="small">Choose ingredients and select from suggested recipes</p>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>