{% load static %}


<tr>
    <th style="text-align: left;">Produto</th>
    <th style="text-align: left;width: 20%;">Preço</th>
    <th class="hide-on-mobile" style="text-align: left;">Quantidade</th>
    <th class="hide-on-mobile" style="text-align: left;">Categoria</th>
    <th style="text-align: left;width: 20%;">Ações</th>
  </tr>

{% for product in products %}

<tr>
<td id="name-{{product.id}}" >{{product.name}}</td>
<td id="price-{{product.id}}" >R$ {{product.price}}</td>
<td  class="hide-on-mobile" id="quantity-{{product.id}}" >{{product.quantity}}</td>
<td  class="hide-on-mobile" id="category-{{product.id}}" >{{product.category.name}}</td>
<td>
  <div class="grid-buttons">
    <img 
    src="{% static 'midia/icons/edit.svg' %}" 
    style=" width: 35px; height: 35px; cursor: pointer;" 
    onclick="editProduct({{product.id}})" >
  </img>  <input type="hidden" id="h-category-{{product.id}}" value="{{ product.category.id }}">
  <input type="hidden" id="description-{{product.id}}" value="{{ product.description }}">
  <input type="hidden" id="cuisine-{{product.id}}" value="{{ product.cuisine }}">


  <form hx-post="{% url 'onOffproduct' %}" hx-trigger="click"  hx-target="#product-list">
    {% csrf_token %}
    <input type="hidden"  name="id-product" id="id-{{product.id}}" value="{{ product.id }}">

  {% if product.active == True %}
  <button style="background-color: rgba(255, 0, 0, 0); padding: 0px;border: 0px;">
    <span data-tooltip="Ativar ou Desativar Produto" data-flow="top">
      <img 
      src="{% static 'midia/icons/toggle-on.svg' %}" 
      style=" width: 35px; height: 35px; cursor: pointer;" >
    </img>
  </span>
  </button>
  {% else %}
  <button style="background-color: rgba(0, 128, 0, 0); padding: 0px;border: 0px;" >
    <span data-tooltip="Ativar ou Desativar Produto" data-flow="top">
    <img 
      src="{% static 'midia/icons/toggle-off.svg' %}" 
      style=" width: 35px; height: 35px; cursor: pointer;" >
    </img>
    <span>
  </button>
  {% endif %}

</form>
</div>
</td>
</tr>


{% endfor %} 

</table>