{% extends 'base.html' %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <h3>Products</h3>
  <a href="{{ url_for('products_new') }}" class="btn btn-primary">New Product</a>
</div>
<div class="table-responsive">
<table class="table table-striped align-middle">
  <thead>
    <tr>
      <th>ID</th><th>Image</th><th>Name</th><th>Price</th><th>Active</th><th>Created</th><th>Actions</th>
    </tr>
  </thead>
  <tbody>
    {% for r in rows %}
    <tr>
      <td>{{ r.id }}</td>
      <td>
        {% if r.image_path %}
        <img src="{{ url_for('static', filename=r.image_path) }}" alt="img" width="60">
        {% else %}-{% endif %}
      </td>
      <td>{{ r.name }}</td>
      <td>${{ '%.2f'|format(r.price) }}</td>
      <td>{{ 'Yes' if r.is_active else 'No' }}</td>
      <td>{{ r.created_at }}</td>
      <td>
        <a href="{{ url_for('products_edit', product_id=r.id) }}" class="btn btn-sm btn-outline-primary">Edit</a>
        <form action="{{ url_for('products_delete', product_id=r.id) }}" method="post" class="d-inline" onsubmit="return confirm('Delete this product?')">
          <button class="btn btn-sm btn-outline-danger">Delete</button>
        </form>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
</div>
{% endblock %}