<!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">
</head>
<body align="center">
    {% include 'header.html' %}
    <main class="container mt-5 pt-3">
        <h2>Are you sure you want to delete the item?</h2>
    
    <!-- Confirmation form -->
    <form action='' method="post">
        <br>
        <input type="submit" value="Delete">
        <button type="button" onclick="window.location.href='/'">Cancel</button>
    </form>

    <!-- Display a preview of the item -->
    <table border="1" align="center">
        <thead>
            <tr>
                <th>Attribute</th>
                <th>Value</th>
            </tr>
        </thead>
        <tbody>
            {% for attrib in item_attributes %}
                <tr>
                    <td>{{ attrib.display_name }}</td>
                    <td>{{ item[attrib.attrib_name] }}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    </main>
    <!-- Bootstrap JS (for dropdowns) -->
    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
</body>
</html>