<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Delete Item</title>
    {% include 'favicon.html' %}
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/bootstrap-icons.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/delete_page.css') }}" rel="stylesheet">
</head>
<body>
    {% include 'header.html' %}
    
    <main class="container mt-5">
        <div class="delete-container">
            <h2 class="mb-4 text-center">Confirm Deletion</h2>
            <p class="lead text-center text-danger mb-4">
                <i class="bi bi-exclamation-triangle-fill"></i> Are you sure you want to delete this item?
            </p>

            <!-- Item Preview -->
            <div class="preview-card p-4 mb-4">
                <h3 class="h5 mb-3">Item Details</h3>
                <div class="attribute-grid">
                    {% for attrib in item_attributes %}
                    <div class="attribute-item">
                        <div class="attribute-label">{{ attrib.display_name }}</div>
                        <div class="attribute-value">{{ item[attrib.attrib_name] }}</div>
                    </div>
                    {% endfor %}
                </div>
            </div>

            <!-- Sticky action buttons -->
            <div class="sticky-actions">
                <div class="d-flex justify-content-center gap-3">
                    <button type="button" 
                            onclick="window.location.href='/'" 
                            class="btn btn-outline-secondary px-4">
                        <i class="bi bi-x-lg me-1"></i>Cancel
                    </button>
                    <form action="" method="post" class="mb-0">
                        <button type="submit" class="btn btn-danger px-4">
                            <i class="bi bi-trash3 me-1"></i>Confirm Delete
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </main>
    {% include 'footer.html' %}
    <!-- Bootstrap JS -->
    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
</body>
</html>