<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>View Inventory</title>
    {% include 'favicon.html' %}
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <style>
        /* Minimal custom CSS for table responsiveness */
        .table-container {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            margin-bottom: 1rem;
        }
        .action-buttons {
            white-space: nowrap;
        }
    </style>
</head>
<body>
    {% include 'header.html' %}
    
    <main class="container-fluid mt-5 pt-3 px-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>Item Inventory</h2>
        </div>
        
        <div class="table-container">
            <table class="table table-striped table-hover table-bordered">
                <thead class="table-light">
                    <tr>
                        {% for attrib in item_attributes %}
                            <th>{{ attrib.display_name }}</th>
                        {% endfor %}
                        <th class="action-buttons">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in items %}
                    <tr>
                        {% for attrib in item_attributes %}
                            <td>{{ item[attrib.attrib_name] }}</td>
                        {% endfor %}
                        <td class="action-buttons">
                            <div class="d-flex gap-2">
                                <a href="/update/{{ item[primary_attrib] }}" 
                                   class="btn btn-sm btn-outline-primary">
                                    Edit
                                </a>
                                <form action="/delete/{{ item[primary_attrib] }}" method="get" class="d-inline">
                                    <button type="submit" 
                                            class="btn btn-sm btn-outline-danger">
                                        Delete
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </main>

    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
</body>
</html>