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

{% block content %}
<div class="row">
  <h3>Управління постачальниками</h3>
</div>
<div class="row">
  <a href="{% url 'vendor' %}" 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">Редагувати постачальника {{vendor.name}}</p> 
      <form id="update_vendor_form" autocomplete="off">
        <input  id="vendor_id" type="hidden" name="vendor_id"   value="{{vendor.id}}">
      <div class="row">
        <div class="input-field col m10 s12">
          <input id="vendor_name" name="vendor_name" type="text" class="validate" value="{{vendor.name}}" required>
          <label for="vendor_name">Назва</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col m6 s12">
          <input id="location" name="location" type="text" class="validate"  value="{{vendor.location}}">
          <label for="location">Адреса</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col m2 s12">
          <input id="contact_email" name="contact_email" type="text" class="validate" >
          <label for="contact_email">Email</label>
        </div>
        <div class="input-field col m2 s12">
          <input id="contact_phone" name="contact_phone" type="text" class="validate" >
          <label for="contact_phone">Телефон</label>
        </div>
        <div class="input-field col m2 s12">
          <input id="contact_name" name="contact_name" type="text" class="validate" >
          <label for="contact_name">Імя</label>
        </div>
        <div class="input-field col m2 s12">
          <input id="contact_position" name="contact_position" type="text" class="validate" >
          <label for="contact_position">Посада</label>
        </div>
        <div class="input-field col m2 s12">
          <a id="add_contact_to_table_vendor_contact" class="btn-floating btn-smal waves-effect waves-light green add"><i class="material-icons">add</i></a>
        </div>

      </div>
      
      <div class="row">
        <div class="sub-form col s10">
            <table id="vendor_contact_table">
                <thead>
                  <tr>
                      <th>Email</th>
                      <th>Телефон</th>
                      <th>Імя</th>
                      <th>Посада</th>
                  </tr>
                </thead>
                <tbody>
                    {% if contacts %}
                        {% for contact in contacts %}
                            <tr>
                                <td>{{contact.email}}</td>
                                <td>{{contact.phone}}</td>
                                <td>{{contact.manager}}</td>
                                <td>{{contact.position}}</td>
                                <td><a class="btn-floating btn-smal waves-effect waves-light red remove"><i id="btn_remove_contact_from_vendor_contact_table" class="material-icons">remove</i></a></td>
                            </tr>
                        {% endfor %}
                    {% endif %}
                </tbody>
              </table>
        </div>
      </div>
      <div class="row">
        <div class="input-field col m6 s12">
          <input id="config_name" name="config_name" type="text" class="validate" value="{{vendor.config_name}}">
          <label for="config_name">Назва для файлу конфігурації</label>
        </div>
      </div>
      <div class="row">
        <button id="btn_add_new_vendor_form" class="btn waves-effect waves-light" type="submit" name="action">Зберегти
          <i class="material-icons right">send</i>
      </button>
      </div>
      </form>
    </div>
</div>
{% endblock %}
{% block scripts %}
<script type="module" src="{% static 'js/vendor.js' %}"></script>
{% endblock %}