{% autoescape %}
<h1>{{ trans('Parts 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.path }}</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 -->
<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 }} <small class="text-muted">({{ item.id_code }})</small></h5>
                     <p class="text-muted">{{ trans('Category') }}: {{ item.category_path ?: trans('Uncategorized') }}</p>
                     <p>{{ item.description }}</p>
                     {% if item.image %}
                         <img src="{{ item.image }}" alt="Image" style="max-width: 100px; max-height: 100px;">
                     {% endif %}
                     {% if item.location %}
                         <p><strong>{{ trans('Location') }}:</strong> {{ item.location }}</p>
                     {% endif %}
                 </div>
                 <div>
                     <button class="btn btn-sm btn-warning me-2 edit-btn" data-id="{{ item.id }}">{{ trans('Edit') }}</button>
                     <button class="btn btn-sm btn-info me-2" onclick="window.open('/print/{{ item.id }}', '_blank')">{{ trans('Print QR') }}</button>
                     <button class="btn btn-sm btn-danger delete-btn" data-id="{{ item.id }}">{{ trans('Delete') }}</button>
                 </div>
            </li>
        {% endfor %}
    {% else %}
        <li class="list-group-item">{{ trans('No items found.') }}</li>
    {% endif %}
</ul>

<!-- Edit Item Modal -->
<div class="modal fade" id="editItemModal" tabindex="-1" aria-labelledby="editItemModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editItemModalLabel">{{ trans('Edit Part') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
             <div class="modal-body">
                 <form id="editItemForm" enctype="multipart/form-data">
                    <input type="hidden" id="edit_item_id" name="id">
                    <div class="mb-3">
                        <label for="edit_item_name" class="form-label">{{ trans('Part Name') }}</label>
                        <input type="text" class="form-control" id="edit_item_name" name="item_name" required>
                    </div>
                    <div class="mb-3">
                        <label for="edit_item_description" class="form-label">{{ trans('Description') }}</label>
                        <textarea class="form-control" id="edit_item_description" name="item_description" rows="3"></textarea>
                    </div>
                     <div class="mb-3">
                         <label for="edit_item_category_id" class="form-label">{{ trans('Category') }}</label>
                         <select class="form-select" id="edit_item_category_id" name="category_id">
                             <option value="">{{ trans('-- Select Category --') }}</option>
                             {% for category in categories %}
                                 <option value="{{ category.id }}">{{ category.path }}</option>
                             {% endfor %}
                         </select>
                     </div>
                     <div class="mb-3">
                         <label for="edit_image" class="form-label">{{ trans('Image') }}</label>
                         <input type="file" class="form-control" id="edit_image" name="image" accept="image/*">
                         <div id="current_image" style="margin-top: 10px;"></div>
                     </div>
                     <div class="mb-3">
                         <label for="edit_location" class="form-label">{{ trans('Location') }}</label>
                         <input type="text" class="form-control" id="edit_location" name="location">
                     </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="saveEditItemBtn">{{ trans('Save Changes') }}</button>
            </div>
        </div>
    </div>
</div>

{% endautoescape %}