{% extends "template/index.html" %} 

{% block title %} List Products {% endblock %} 

{% block content %}



<div class="container mt-3">
  <div class="row">
    <div class="col">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Product List</h3>
        </div>
        <div class="card-body">

          {% if messages %}
          <ul>
            {% for message in messages %}
            <li>{{ message }}</li>
            {% endfor %}
          </ul>
          {% endif %} {% if products %}
          <p>Total Products: {{ products|length }}</p>
          {% else %}
          <p>No products available.</p>
          {% endif %}

          <a class="btn btn-sm btn-primary mb-2" href="{% url 'product_create' %}">New Product</a>
          <table class="table">
            <thead>
              <tr>
                <th>No</th>
                <th>Name</th>
                <th>Price</th>
                <th>Image</th>
                <th>Description</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              {% for product in products %}
              <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ product.name }}</td>
                <td>{{ product.price }}</td>
                <td>
                  <img
                  src="{{ product.image.url }}"
                  width="100px"
                  alt="{{ product.name }}"
                  />
                </td>
                <td>{{ product.description }}</td>
                <td>
                  <a
                    class="btn mb-2 btn-sm btn-warning"
                    href="{% url 'product_update' product.pk %}"
                    >Edit</a
                  >
                  <form
                    action="{% url 'product_delete' product.pk %}"
                    method="post"
                    style="display: inline"
                  >
                    {% csrf_token %}
                    <button type="submit" class="btn mb-2 btn-sm btn-danger">
                      Delete
                    </button>
                  </form>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}