<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>Edit Item: {{ item.name }}</h2>
    <button class="btn btn-secondary" onclick="fetchContent('/')">Back to Overview</button>
</div>

<form id="editItemForm">
    <input type="hidden" id="edit_item_id" value="{{ item.id }}">
    
    <div class="row">
        <div class="col-md-6">
            <div class="mb-3">
                <label for="edit_item_name" class="form-label">Name *</label>
                <input type="text" class="form-control" id="edit_item_name" value="{{ item.name }}" required>
            </div>
            
            <div class="mb-3">
                <label for="edit_item_category_id" class="form-label">Category</label>
                <select class="form-select" id="edit_item_category_id">
                    <option value="">-- Select Category --</option>
                    {% for category in categories %}
                        <option value="{{ category.id }}" {% if category.id == item.category_id %}selected{% endif %}>{{ category.path }}</option>
                    {% endfor %}
                </select>
            </div>
            
            <div class="mb-3">
                <label for="edit_location" class="form-label">Location</label>
                <input type="text" class="form-control" id="edit_location" value="{{ item.location }}">
            </div>
            
            <div class="mb-3">
                <label class="form-label">Created</label>
                <input type="text" class="form-control" value="{{ item.created_at|date('d-m-Y H:i') }}" readonly>
            </div>
            
            <div class="mb-3">
                <label class="form-label">Last Updated</label>
                <input type="text" class="form-control" value="{{ item.updated_at|date('d-m-Y H:i') }}" readonly>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="mb-3">
                <label for="edit_item_description" class="form-label">Description</label>
                <textarea class="form-control" id="edit_item_description" rows="4">{{ item.description }}</textarea>
            </div>
            
            <div class="mb-3">
                <label for="edit_image" class="form-label">Image</label>
                <input type="file" class="form-control" id="edit_image" accept="image/*">
                <div id="current_image" class="mt-2">
                    {% if item.image %}
                        <p>Current image:</p>
                        <img src="{{ item.image }}" style="max-width: 100px;">
                    {% else %}
                        <p>No image</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    
    <div class="d-flex gap-2">
        <button type="button" class="btn btn-primary" id="saveEditItemBtn">Save Changes</button>
        <button type="button" class="btn btn-danger" id="deleteItemBtn">Delete Item</button>
        <button type="button" class="btn btn-secondary" onclick="fetchContent('/')">Cancel</button>
    </div>
</form>