{% extends "base.html" %}

{% block content %}
<h1 class="mb-4">Products</h1>
<a href="{{ url_for('backoffice.add_product') }}" class="btn btn-primary mb-3">Add New Product</a>
<table class="table table-striped">
    <thead>
        <tr>
            <th>Index</th>
            <th>Name</th>
            <th>Category</th>
            <th>Image</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        {% for product in products %}
        <tr>
            <td>{{ product.id }}</td>
            <td>{{ product.name }}</td>
            <td>{{ product.category.name }}</td>
            <td>
                {% if product.photo_back %}
                <a href="{{ url_for('static', filename=product.photo_url) }}" target="_blanc">
                    <img src="{{ url_for('static', filename=product.photo_back) }}" alt="{{ product.name }}" width="50">
                </a>
                {% else %}
                    No Image
                {% endif %}
            </td>
            <td>
                <a href="{{ url_for('backoffice.edit_product', id=product.id) }}" class="btn btn-sm btn-warning">Edit</a>
                <a href="{{ url_for('backoffice.delete_product', id=product.id) }}" class="btn btn-sm btn-danger">Delete</a>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog modal-fullscreen">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>
{% endblock %}