{% autoescape %}
<h1>{{ trans('Categories Overview') }}</h1>

<!-- Add Category Form -->
<div class="card mb-4">
    <div class="card-header">{{ trans('Manage Categories') }}</div>
    <div class="card-body">
        <form id="addCategoryForm">
            <div class="mb-3">
                <label for="new_category_name" class="form-label">{{ trans('Category Name') }}</label>
                <input type="text" class="form-control" id="new_category_name" name="new_category_name" required>
            </div>
            <div class="mb-3">
                <label for="parent_category_id" class="form-label">{{ trans('Parent Category') }} ({{ trans('Optional') }})</label>
                <select class="form-select" id="parent_category_id" name="parent_category_id">
                    <option value="">{{ trans('-- No Parent --') }}</option>
                            {% for category in categories %}
                                <option value="{{ category.id }}">{{ category.path }}</option>
                            {% endfor %}
                </select>
            </div>
            <button type="submit" class="btn btn-primary">{{ trans('Add Category') }}</button>
        </form>
    </div>
</div>

<!-- Categories List -->
<h2>{{ trans('All Categories') }}</h2>
<ul id="categoriesList" class="list-group">
    {% if categories %}
        {% for category in categories %}
            <li class="list-group-item d-flex justify-content-between align-items-center">
                <div>
                    <strong>{{ category.path }}</strong>
                </div>
                <div>
                    <button class="btn btn-sm btn-warning me-2 edit-category-btn" data-id="{{ category.id }}">Edit</button>
                    <button class="btn btn-sm btn-danger delete-category-btn" data-id="{{ category.id }}">Delete</button>
                </div>
            </li>
        {% endfor %}
    {% else %}
        <li class="list-group-item">{{ trans('No categories found.') }}</li>
    {% endif %}
</ul>

<!-- Edit Category Modal -->
<div class="modal fade" id="editCategoryModal" tabindex="-1" aria-labelledby="editCategoryModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editCategoryModalLabel">{{ trans('Edit Category') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editCategoryForm">
                    <input type="hidden" id="edit_category_id" name="id">
                    <div class="mb-3">
                        <label for="edit_category_name" class="form-label">{{ trans('Category Name') }}</label>
                        <input type="text" class="form-control" id="edit_category_name" name="category_name" required>
                    </div>
                    <div class="mb-3">
                        <label for="edit_parent_category_id" class="form-label">{{ trans('Parent Category') }} ({{ trans('Optional') }})</label>
                        <select class="form-select" id="edit_parent_category_id" name="parent_category_id">
                            <option value="">{{ trans('-- No Parent --') }}</option>
                            {% for category in categories %}
                                <option value="{{ category.id }}">{{ category.path }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ trans('Cancel') }}</button>
                <button type="button" class="btn btn-primary" id="saveEditCategoryBtn">{{ trans('Save Changes') }}</button>
            </div>
        </div>
    </div>
</div>

{% endautoescape %}