{% 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 m6 s12">
    <p class="form-title">Додати склад</p>
    <form id="form_add_storage" method="POST">
      {% csrf_token %}
      <div class="row">
          <div class="input-field col m6 s12">
            <i class="material-icons prefix">mode_edit</i>
            <input id="name" name="name" type="text" class="validate">
            <label for="name">Назва складу</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col m6 s12">
          <i class="material-icons prefix">mode_edit</i>
          <textarea id="location" class="materialize-textarea"></textarea>
          <label for="location">Розташування</label>
        </div>
      </div>

      <div class="row">
        <button id="btn_add_storage"  class="btn waves-effect waves-light">
          Зберегти
      </button>
      </div>
    </form>
  </div>
  <div class="col m6 s12">

    <div class="row">
      <p class="form-title">Пошук  складу</p>
      <form id="storage_search_form" autocomplete="off">
        {% csrf_token %}
        <div class="row">
          {% get_all_storages_names as storages_names %}
          <div class="input-field col m5 s12">
            <input type=text name="storage_name_for_search" id="storage_name_for_search" list="storage_name_for_search-list" class="validate">
            <label for="storage_name_for_search">Назва складу</label>
            <datalist id="storage_name_for_search-list">
              {% for storage_name in storages_names %}
              <option>{{storage_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 storages %}
      <div class="table-responsive">
        <table class="table table-striped" id="example">
          <tr>
            <th>Назва</th>
            <th></th>
            <th></th>
          </tr>
          <tbody id="storage_items_body">
            {% for storage in storages %}
            <tr>
              <td>{{storage.name}}</td>
              <td><a href="{% url 'storage_update' id=storage.pk %}" id="update_storage" class="btn-floating btn-smal  "><i class="lni lni-pencil"></i></a></td>
              <td> <a href="#" id="{{storage.id}}" class="btn-floating btn-smal red delete_storage"><i class="lni lni-cross-circle "></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/storage.js' %}"></script>
{% endblock %}