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


{% block content %}
<div class="row">
  <h3 style="text-align: center;"> Оновлення, {{tmc.name}}</h3>
</div>
<div class="row">
  <a href="{% url 'tmc' %}" style="margin-top: 20px;">
    <button class="btn waves-effect waves-light">
        Повернутися
    </button>
  </a>
</div>


<form class="row" method="post" enctype="multipart/form-data"><!--use for enctype data image-->
    {% csrf_token %}
    <div class="row">
        <div class="col m3 s12 show-photo">
            {% if tmc.photo %}
                <img src="{% get_media_prefix %}{{tmc.photo}}" alt="">
            {% else %}
            <img src="{% static 'img/no_image.png' %}" alt="">
            {%  endif %}
        </div>
    </div>
    <div class="row">
        <div class="file-field input-field col m3 s12">
            <div class="btn">
                <span>Фото</span>
                <input name="photo" type="file" multiple>
            </div>
            <div class="file-path-wrapper">
                <input class="file-path validate" type="text" placeholder="Оберіть фото">
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col m3 s12">
            <label for="name" class="form-label">Назва</label>
            <input type="text" name='name' value="{{tmc.name}}" class="form-control" id="name">
        </div>
    </div>
    <div class="row">
        {% get_all_categories_names as categories_names %}
        <div class="input-field col m3 s12">
            <input type=text name="category" id="category" list="category-list" class="validate" value="{% if tmc.category  %}{{tmc.category}}{% endif %}">
            <label for="category">Назва категорії</label>
            <datalist id="category-list">
              {% for category_name in categories_names %}
              <option>{{category_name.name}}</option>
              {% endfor %}
            </datalist>
          </div>

    </div>
    <div class="row">
        <div class="col m3 s12">
            <label for="unit_of_measurement" class="form-label">Одиниця виміру</label>
            <input type="text" name='unit_of_measurement' value="{{tmc.unit_of_measurement}}" class="form-control" id="unit_of_measurement">
        </div>
    </div>
    <div class="row">
        <div class="col m3 s12">
            <label for="article" class="form-label">Артикул</label>
            <input type="text" name='article' value="{% if tmc.article  %} {{tmc.article}}{% endif %}" class="form-control" id="article">
        </div>
    </div>
    <div class="row">
        <div class="col m3 s12">
            <label for="description" class="form-label">Опис</label>
            <input type="text" name='description' value="{% if tmc.description  %} {{tmc.description}}{% endif %}" class="form-control" id="description">
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Зберегти</button>
  </form>
{% endblock %}