@model SkyArtShop.Models.MenuItem
@{
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
    ViewData["Title"] = "Edit Menu Item";
}

<div class="mb-4">
    <a href="/admin/menu" class="btn btn-secondary">
        <i class="bi bi-arrow-left"></i> Back to Menu
    </a>
</div>

<div class="card">
    <div class="card-header">
        <h5 class="mb-0">Edit Menu Item</h5>
    </div>
    <div class="card-body">
        <form method="post" action="/admin/menu/edit/@Model.Id">
            <div asp-validation-summary="All" class="text-danger mb-3"></div>
            
            <div class="mb-3">
                <label for="Label" class="form-label">Label *</label>
                <input type="text" class="form-control" id="Label" name="Label" value="@Model.Label" required>
                <small class="form-text text-muted">The text that will appear in the navigation menu</small>
            </div>

            <div class="mb-3">
                <label for="Url" class="form-label">URL *</label>
                <input type="text" class="form-control" id="Url" name="Url" value="@Model.Url" required>
                <small class="form-text text-muted">Examples: /, /Shop, /About, /#promotion, #instagram</small>
            </div>

            <div class="mb-3">
                <label for="DisplayOrder" class="form-label">Display Order</label>
                <input type="number" class="form-control" id="DisplayOrder" name="DisplayOrder" value="@Model.DisplayOrder" min="0">
                <small class="form-text text-muted">Lower numbers appear first</small>
            </div>

            <div class="form-check mb-3">
                <input asp-for="IsActive" class="form-check-input" type="checkbox" id="IsActive">
                <label class="form-check-label" for="IsActive">
                    Active (Globally enable this menu item)
                </label>
            </div>

            <div class="form-check mb-3">
                <input asp-for="ShowInNavbar" class="form-check-input" type="checkbox" id="ShowInNavbar">
                <label class="form-check-label" for="ShowInNavbar">
                    Show in Desktop Navbar
                </label>
                <small class="form-text text-muted d-block">Display in the horizontal navigation bar at the top</small>
            </div>

            <div class="form-check mb-3">
                <input asp-for="ShowInDropdown" class="form-check-input" type="checkbox" id="ShowInDropdown">
                <label class="form-check-label" for="ShowInDropdown">
                    Show in Hamburger Dropdown
                </label>
                <small class="form-text text-muted d-block">Display in the mobile menu and desktop hamburger dropdown</small>
            </div>

            <div class="form-check mb-3">
                <input asp-for="OpenInNewTab" class="form-check-input" type="checkbox" id="OpenInNewTab">
                <label class="form-check-label" for="OpenInNewTab">
                    Open in new tab
                </label>
            </div>

            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-save"></i> Update Menu Item
                </button>
                <a href="/admin/menu" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>