{% extends 'product_temp/base.html' %}

{% block content %}

<h1> <a href="{% url 'create_product'  %}" style="text-decoration: none; color: #007bff; padding: 5px 10px; border: 1px solid #007bff; border-radius: 5px; background-color: #f2f2f2;">Add Product </a></h1>
 

{% if messages %}
<div class="alert alert-danger" role="alert">
            {% for message in messages %}
              {{ message }}
            {% endfor %}
 </div>  

{% endif %}

<h1>Product List</h1>
  <table>
    <thead>
      <tr>
        <th>SKU</th>
        <th>Product Type</th>
        <th>Category</th>
        <th>Product Name</th>
        <th>Product Description</th>
        <th>Product Specification</th>
        <th>Product Price</th>
        <th>Specification PDF</th>
        <th>Product Image</th>
        <th>Other Images</th>
        <th>Actions 1</th>  
        <th>Actions 2</th>  

      </tr>
    </thead>
    <tbody>
      {% for product in products %}
        <tr>
          <td>{{ product.sku }}</td>
          <td>{{ product.get_product_type_display }}</td>
          <td>{{ product.category }}</td>
          <td>{{ product.product_name }}</td>
          <td>{{ product.product_description }}</td>
          <td>{{ product.product_specification_contents }}</td>
          <td>{{ product.product_price }}</td>
          <td>{{ product.specification_pdf }}</td>
          <td>
            {% if product.product_image_main %}
              <img src="{{ product.product_image_main.url }}" class="product-image" alt="Product Image">
            {% else %}
              No image available
            {% endif %}
          </td>
            <td>
              {% for other_image in product.otherimage_set.all %}
              <img src="{{ other_image.other_images.url }}" alt="{{ product.product_name }} Other Image">
             {% endfor %}
          </td>
          <td>
            <a href="{% url 'edit_product' product.id %}" style="text-decoration: none; color: #007bff; padding: 5px 10px; border: 1px solid #007bff; border-radius: 5px; background-color: #f2f2f2;">Edit</a>
          </td>
          <td>
            <a href="{% url 'delete_product' product.id %}" style="text-decoration: none; color: #dc3545; padding: 5px 10px; border: 1px solid #dc3545; border-radius: 5px; background-color: #f2f2f2;">Delete</a>
          </td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
  
{% endblock %}