{% extends 'buybackprogram/page.html' %}
{% load i18n %}
{% load humanize %}
{% load bootstrap %}
{% load static %}

{% block body %}
<div>
  <form class="form" action="{% url 'buybackprogram:program_edit_item' program_pk=program.id %}" method="POST">
    {% csrf_token %}
    {{ form|bootstrap }}
    <button type="submit" class="btn btn-primary">Add item</button>
  </form>
</div>

<div class="table-responsive" style="margin: 20px 0;">
  <table id="program_items" style="margin: 20px auto;" class="table table-striped table-condensed">
    <thead>
      <th>Name</th>
      <th style="text-align: center;">Tax</th>
      <th style="text-align: center;">Is allowed</th>
      <th style="text-align: center;">Actions</th>
    </thead>
    <tbody>
      {% for item in program_items %}
        <tr>
          <td>{{item.item_type.name}}</td>
          <td style="text-align: center;">{{item.item_tax}} %</td>
          {% if not item.disallow_item %}
             <td style="text-align: center;"><i class="fas fa-check" style="color:green;"></i></td>
          {% else %}
            <td style="text-align: center;"><i class="fas fa-times" style="color:red;"></i></td>
          {% endif %}
          <td style="text-align: center;"><a class="btn btn-danger btn-sm" href="{% url 'buybackprogram:program_item_remove' item_pk=item.item_type.id program_pk=program.id %}">
                        Delete
                    </a></td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}

{% block extra_javascript %}
<script type="text/javascript" src="{% static 'buybackprogram/js/bootstrap-autocomplete.min.js' %}"></script>
<script type="text/javascript" src="{% static 'buybackprogram/js/autocomplete.js' %}"></script>
{% endblock %}

{% block extra_css %}
{% endblock %}

{% block extra_script %}
{% endblock %}
