{% extends "base.html" %}
{% load crispy_forms_filters %}
{% load crispy_forms_tags %}
{% load static %}
{% load custom_tags %}


{% block content %}
<div class="row">
  <h3>Управління категоріями</h3>
</div>
<div class="row">
  <a href="{% url 'management' %}" style="margin-top: 20px;">
    <button class="btn waves-effect waves-light">
        Повернутися
    </button>
  </a>
</div>
<div class="row">
    <div class="col xl6 s6 m1">
      <p class="form-title">Додати категорію</p>
      {% crispy form %} 
    </div>
    <div class="col xl6 s6 m1">

      <div class="row">
        <p class="form-title">Пошук категорії</p>
        <form id="category_search_form" autocomplete="off">
          {% csrf_token %}
          <div class="row">
            {% get_all_categories_names as categories_names %}
            <div class="input-field col m5 s12">
              <input type=text name="category_name_for_search" id="category_name_for_search" list="category_name_for_search-list" class="validate">
              <label for="category_name_for_search">Назва категорії</label>
              <datalist id="category_name_for_search-list">
                {% for category_name in categories_names %}
                <option>{{category_name.name}}</option>
                {% endfor %}
              </datalist>
            </div>
          </div>
          <button class="btn waves-effect waves-light" type="submit" name="action">Пошук
            <i class="material-icons right">send</i>
          </button>
        </form>
      </div>




      {% if categories %}
      <div class="table-responsive">
        <table class="table table-striped" id="category_list_table">
          <tr>
            <th>Назва</th>
            <th></th>
            <th></th>
          </tr>
          <tbody id="category_items_body">
            {% for category in categories %}
            <tr>
              <td>{{category.name}}</td>
              <td> <a href="{% url 'good_category_update' id=category.pk %}" class="btn-floating btn-smal"><i class="lni lni-pencil"></i></a></td>
              <td><a href="#" id = "{{category.id}}" class="btn-floating btn-smal waves-effect waves-light red delete_vendor"><i id = "{{category.id}}" class="lni lni-cross-circle delete_category"></i></a></td>
            </tr>
              {% endfor %}
          </tbody>
        </table>
      </div>
      {% endif %}
    </div>
</div>
<div class="row">
  <a href="{% url 'management' %}" style="margin-top: 20px;">
    <button class="btn waves-effect waves-light">
        Повернутися
    </button>
  </a>
</div>
{% endblock %}
{% block scripts %}
<script type="module" src="{% static 'js/category.js' %}"></script>
{% endblock %}