@model LittleShop.DTOs.CreateVariantCollectionDto

@{
    ViewData["Title"] = "Create Variant Collection";
}

<div class="row mb-4">
    <div class="col">
        <h1><i class="fas fa-plus"></i> Create Variant Collection</h1>
    </div>
    <div class="col-auto">
        <a href="@Url.Action("Index")" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Back to Collections
        </a>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <form method="post">
            @Html.AntiForgeryToken()

            <div asp-validation-summary="All" class="alert alert-danger" role="alert"></div>

            <div class="mb-3">
                <label for="Name" class="form-label">Collection Name *</label>
                <input type="text" class="form-control" id="Name" name="Name" value="@Model.Name" required maxlength="100" placeholder="e.g., Mens Clothes, Jewelry Sizes">
                <span asp-validation-for="Name" class="text-danger"></span>
            </div>

            <div class="mb-3">
                <label for="PropertiesJson" class="form-label">Properties (JSON)</label>
                <textarea class="form-control font-monospace" id="PropertiesJson" name="PropertiesJson" rows="10" placeholder='[{"name":"Size","values":["S","M","L","XL"]},{"name":"Colour","values":null}]'>@Model.PropertiesJson</textarea>
                <div class="form-text">
                    Define properties as JSON array. Each property has a "name" and optional "values" array.
                    <br>If "values" is null, users can enter freeform text. If "values" is an array, users select from dropdown.
                    <br><strong>Example:</strong> <code>[{"name":"Size","values":["S","M","L"]},{"name":"Colour","values":null}]</code>
                </div>
                <span asp-validation-for="PropertiesJson" class="text-danger"></span>
            </div>

            <div class="border-top pt-3">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save"></i> Create Collection
                </button>
                <a href="@Url.Action("Index")" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}