<!-- create category modal -->
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="addCategoryModalLabel">Add New Category</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <form action="/dictionary/category/create" method="post" enctype="multipart/form-data">
            <div class="modal-body">
                <div class="row g-3">
                    <!-- Category Name -->
                    <div class="col-12 mb-3">
                        <label for="name" class="form-label">Category Name <span class="text-danger"><sup>*</sup></span></label>
                        <input type="text" class="form-control" id="name" name="name"
                            placeholder="Enter category name" required
                            minlength="2" maxlength="100">
                        <div class="invalid-feedback">
                            Please enter a category name (2-100 characters).
                        </div>
                    </div>

                    <!-- Slug -->
                    <div class="col-md-6 mb-3">
                        <label for="slug" class="form-label">Slug <span class="text-danger"><sup>*</sup></span></label>
                        <div class="input-group">
                            <input readonly type="text" class="form-control" id="slug" name="slug"
                                placeholder="category-slug" required
                                pattern="^[a-z0-9]+(?:-[a-z0-9]+)*$"
                                minlength="2" maxlength="100">
                            <button class="btn btn-outline-secondary" type="button" id="generateSlug">
                                Generate
                            </button>
                        </div>
                        <div class="form-text">Use lowercase letters, numbers, and hyphens only</div>
                        <div class="invalid-feedback">
                            Please enter a valid slug (lowercase letters, numbers, hyphens only).
                        </div>
                    </div>

                    <!-- Status -->
                    <div class="col-md-6 mb-3" id="statusField">
                        <label for="status" class="form-label">Status</label>
                        <select class="form-select searchSelect" id="status" name="status" required>
                            <option value="active" selected>Active</option>
                            <option value="inactive">Inactive</option>
                            <option value="draft">Draft</option>
                        </select>
                        <div class="invalid-feedback">Please select a status.</div>
                    </div>

                    <!-- Description -->
                    <div class="col-12 mb-3">
                        <label for="description" class="form-label">Description</label>
                        <textarea class="form-control" id="description" name="description"
                            rows="3" placeholder="Enter category description"
                            maxlength="500"></textarea>
                        <div class="form-text">Maximum 500 characters</div>
                    </div>

                    <!-- Toggle for Parent Category -->
                    <div class="col-12 mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="hasParentCategory" name="has_parent_category">
                            <label class="form-check-label" for="hasParentCategory">
                                This is a sub-category (has parent category)
                            </label>
                        </div>
                    </div>

                    <!-- Parent Category (initially hidden) -->
                    <div class="col-md-12 mb-3 d-none" id="parentCategoryField">
                        <label for="parentId" class="form-label">Parent Category *</label>
                        <select class="form-select searchSelect" id="parentId" name="parent_id">
                            <option value="">Select Parent Category</option> 
                        </select>
                        <div class="invalid-feedback">Please select a parent category.</div>
                    </div> 
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary create-category-submit-btn" id="saveCategory"><i class="fa fa-plus-square me-2" aria-hidden="true"></i>Save Category</button>
            </div>
        </form>
    </div>
</div>