<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSV Preview</title>
    <script src="{{ url_for('static', filename='edited_csv.js') }}"></script>
</head>
<body>
    <h1>CSV Preview</h1>

    <!-- Display CSV data in a table -->
    {% if new_assets %}
    <p>New assets:</p>
    <table border="1" class="table-new-assets">
        <thead>
            <tr>
                {% for attrib, config in item_attributes.items() %}
                    <th data-attrib="{{ attrib }}">{{ config.display_name }}</th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for asset in new_assets %}
                <tr>
                    {% for attrib, config in item_attributes.items() %}
                        <td contenteditable="true">{{ asset[attrib] }}</td>
                    {% endfor %}
                </tr>
            {% endfor %}
        </tbody>
    </table>
    {% endif %}

    {% if existing %}
    <p>These assets are already in the database:</p>
    <table border="1" class="table-existing-assets">
        <thead>
            <tr>
                {% for attrib, config in item_attributes.items() %}
                    <th >{{ config.display_name }}</th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for asset in existing %}
                <tr>
                    {% for attrib, config in item_attributes.items() %}
                        <td>{{ asset[attrib] }}</td>
                    {% endfor %}
                </tr>
            {% endfor %}
        </tbody>
    </table>
    {% endif %}

    <!-- Form button to confirm and save data -->
    {% if new_assets %}
    <form action="/confirm_save" method="POST" onsubmit="return collectEditedData(event)">
        <button type="submit">Confirm and Save to Database</button>
    </form>
    {% endif %}

    <!-- Cancel button that redirects to the home page -->
    <button type="button" onclick="window.location.href='/'">Cancel</button>
</body>
</html>