{% extends "base.html" %}
{% load i18n %}
{% load static %}

{% block content %}
<div class="row">
    <h3>"Список КП"</h3>
</div>
<div class="row">
  <div class="col s12 m2">
    <div class="card">
        <div class="title">
            <span class="circle">
                <i class="material-icons">info_outline</i>
            </span>
            <p class="titleText">
                Усього КП в системі
            </p>
        </div>
        <div class="dataText">
            <p> {{count_all_commercial_offers}} шт.</p>            
            <div class="range">
                <div class="fill">
                  
                </div>
            </div>
        </div>
        </div>
</div>
</div>
<div class="row">
  {% if 'btn_new_commercial_offer' in config %}
    <a id="btn_new_commercial_offer" href="{% url 'commercial_offer' %}"><button type="button" class="btn btn-outline-success">Новий КП <i class="material-icons right">add</i></button></a>
  {% endif %}
  </div>
<div class="row">
  <form method="post" action="{% url 'commercial_offer_list' %}" id="commercial_offer" autocomplete="off">
    {% csrf_token %}
    <div class="row">
      <div class="input-field col m3 s12">
        <input type=text name="name" id="name" list="name-list" class="validate" >
        <label for="name">Назва КП</label>
        <datalist id="name-list">
            {% for offer in all_commercial_offers %}
                <option>{{offer.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>
      <a href="{{ request.get_full_path }}"><button type="button" class="btn btn-outline-success">Очистити</button></a>

  </form>
</div>
<div class="row">

    {% if commercial_offers %}
      <div class="table-responsive">
        <table class="table table-striped" id="commercial_offer_list_table">
          <tr>
            <th>Назва</th>
            <th></th>
            <th></th>
          </tr>

          {% for commercial_offer in commercial_offers %}
          <tr>
            <td>{{commercial_offer.name}}</td>
            <td>
              {% if 'btn_commercial_offer_detail' in config %}
                <a id="btn_commercial_offer_detail" href="{% url 'commercial_offer_detail' id=commercial_offer.id %}"  class="btn-floating btn-smal waves-effect waves-light "><i class="lni lni-pencil"></i></a>
              {% endif %}
              {% if 'btn_delete_commercial_offer' in config %}
                <a href="#" id = "{{commercial_offer.id}}" class="btn-floating btn-smal waves-effect waves-light red delete_commercial_offer"><i class="lni lni-cross-circle"></i></a>
              {% endif %}

            </td>
          </tr>
            {% endfor %}
        </table>
      </div>
      {% endif %}
</div>



{% endblock %}

{% block scripts %}
<script type="module" src="{% static 'js/commercial_offer.js' %}"></script>
{% endblock %}