@model SkyArtShop.Models.MenuItem
@{
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
    ViewData["Title"] = "Create 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">Create Menu Item</h5>
    </div>
    <div class="card-body">
        <form method="post" action="/admin/menu/create">
            <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 class="form-check-input" type="checkbox" id="IsActive" name="IsActive" value="true" checked>
                <input type="hidden" name="IsActive" value="false">
                <label class="form-check-label" for="IsActive">
                    Active (Globally enable this menu item)
                </label>
            </div>

            <div class="form-check mb-3">
                <input class="form-check-input" type="checkbox" id="ShowInNavbar" name="ShowInNavbar" value="true" checked>
                <input type="hidden" name="ShowInNavbar" value="false">
                <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 class="form-check-input" type="checkbox" id="ShowInDropdown" name="ShowInDropdown" value="true" checked>
                <input type="hidden" name="ShowInDropdown" value="false">
                <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 class="form-check-input" type="checkbox" id="OpenInNewTab" name="OpenInNewTab" value="true">
                <input type="hidden" name="OpenInNewTab" value="false">
                <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> Create Menu Item
                </button>
                <a href="/admin/menu" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>