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

<!-- Filter and Search Form -->
<div class="card mb-4">
    <div class="card-header">{{ trans('Filter and Search') }}</div>
    <div class="card-body">
        <form id="filterForm">
            <div class="row">
                <div class="col-md-6">
                    <label for="search" class="form-label">{{ trans('Search') }}</label>
                    <input type="text" class="form-control" id="search" name="search" value="{{ search }}" placeholder="{{ trans('Search by name') }}">
                </div>
                <div class="col-md-4">
                    <label for="category_filter" class="form-label">{{ trans('Category') }}</label>
                    <select class="form-select" id="category_filter" name="category_id">
                        <option value="">{{ trans('-- All Categories --') }}</option>
                        {% for category in categories %}
                        <option value="{{ category.id }}" {% if selected_category == category.id %}selected{% endif %}>{{ category.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary">{{ trans('Filter') }}</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Items List -->
<h2>{{ trans('All Parts') }}</h2>
<ul id="itemsList" class="list-group mb-4">
    {% if items %}
        {% for item in items %}
            <li class="list-group-item d-flex justify-content-between align-items-center">
                <div>
                    <h5>{{ item.name }}</h5>
                    <p class="text-muted">{{ trans('Category') }}: {{ item.category_name ?: trans('Uncategorized') }}</p>
                    <p>{{ item.description }}</p>
                </div>
                <div>
                    <button class="btn btn-sm btn-warning me-2 edit-btn" data-id="{{ item.id }}">Edit</button>
                    <button class="btn btn-sm btn-danger delete-btn" data-id="{{ item.id }}">Delete</button>
                </div>
            </li>
        {% endfor %}
    {% else %}
        <li class="list-group-item">{{ trans('No items found.') }}</li>
    {% endif %}
</ul>

{% endautoescape %}