{% extends "base_generic.html" %}
{% load tags %}

{% block content %}

<div class="container-fluid">
    {% if user.is_superuser %}

<h3 style="margin-top: 10px">Products Overview </h3>

<form class="form-inline" method="POST"> {% csrf_token %}
 <table class="table table-sm table-hover">

     <thead class="">
    <tr>
        <th scope="col"></th>
        <th scope="col"> Product</th>
        <!-- <th scope="col"> Category</th> -->
        <th scope="col"> Public</th>
        <!-- <th scope="col"> Editable </th>
        <th scope="col"> submitted</th> -->

    </tr>
    </thead>
    {% for product in product_list %}
    <tr class="">
      <td scope="col"><img src="{{product.media_set.first.image_small.url}}" width="50" height="50" alt="{{ product.pk }}"> </td>
      <td scope="col"> <a href="{% url 'product-detail-type' type=product.type pk=product.pk  %}"> {{product.name|upper }} </a></td>
      <!-- <td scope="col">
        {% for category in product.category.all %}
        {{category.short_name}}{% if not forloop.last %} | {% endif %}
        {% endfor %}
      </td> -->
      <td scope="col">
        <input type="checkbox" class="form-check-input check" id="{{ product.pk }}.public_dummy" name="dummy_product_p.{{ product.pk }}.public" {% if product.public %}checked value="true" {% else %} value="false" {% endif %}
          onclick="if(this.checked){ this.nextElementSibling.setAttribute('value', 'true') }else{ this.nextElementSibling.setAttribute('value', 'false') }">
        <input type="hidden" class="hidden" id="{{ product.pk }}.public" name="product_p.{{ product.pk }}.public" {% if product.public %}value="true" {% else %} value="false" {% endif %}>
      </td>
      <!-- <td scope="col">
        <input type="checkbox" class="form-check-input check" id="{{ product.pk }}.edit_dummy" name="dummy_product_e.{{ product.pk }}.edit" {% if product.edit %}checked="checked" {% endif %}
          onclick="if(this.checked){ this.nextElementSibling.setAttribute('value', 'true') }else{ this.nextElementSibling.setAttribute('value', 'false') }">
        <input type="hidden" class="hidden" id="{{ product.pk }}.edit" name="product_e.{{ product.pk }}.edit" {% if product.edit %}value="true" {% else %} value="false" {% endif %}>
      </td> -->
      <!-- <td scope="col"> {{product.sumbitted}} </td> -->

    </tr>
    {% endfor %}



<script type="text/javascript">

/* for reference, eventually replace the call of onclick */

  function changeCheck(elem){
  if(elem.checked){
    elem.setAttribute('value', 'true')
  }else{
    elem.setAttribute('value', 'false')
}
}

</script>


 </table>
    <button  class="btn border-dark rounded-0 mybtn" type="submit">Submit </button>
</form>

    {% else %}
    <p>You are not authorized to view this page. </p>
{% endif %}
{% endblock %}
