{% extends "base.html" %}
{% block content %}

<section class="dashboard">

    <div class="dashboard-content">
        <h2>My Products</h2>

        <a href="{{ url_for('new_product') }}" class="btn-primary" style="margin-bottom:20px;">
            + Add New Product
        </a>

        {% if products %}
        <table class="users-table" style="margin-top:25px;">
            <thead>
                <tr>
                    <th>Image</th>
                    <th>Name</th>
                    <th>Qty</th>
                    <th>Price</th>
                    <th>Unit</th>
                    <th>Actions</th>
                </tr>
            </thead>

            <tbody>
                {% for p in products %}
                <tr>
                    <td>
                        {% if p.image_filename %}
                            <img src="{{ url_for('static', filename='uploads/products/' ~ p.image_filename) }}"
                                 style="height:50px; border-radius:5px;">
                        {% else %}
                            <span>No Image</span>
                        {% endif %}
                    </td>

                    <td>{{ p.name }}</td>
                    <td>{{ p.quantity }}</td>
                    <td>£{{ '%.2f'|format(p.price) }}</td>
                    <td>{{ p.unit }}</td>

                    <td>

                        <!-- Edit -->
                        <a href="{{ url_for('edit_product', product_id=p.id) }}"
                           class="btn-primary" style="padding:6px 12px;">
                            Edit
                        </a>

                        <!-- Delete -->
                        <form action="{{ url_for('delete_product', product_id=p.id) }}"
                              method="POST" style="display:inline;">
                            <button onclick="return confirm('Delete this product?')"
                                    style="padding:6px 12px; background:#c0392b; color:white; border:none; border-radius:6px;">
                                Delete
                            </button>
                        </form>

                    </td>
                </tr>
                {% endfor %}
            </tbody>

        </table>

        {% else %}
            <p>You have not added any products yet.</p>
        {% endif %}

    </div>

</section>

{% endblock %}