{% extends 'base.html' %}
{% block content %}
<div class="container">
<form method="POST" autocomplete="off">
{{ form.csrf_token }}

<div id="errors" style="background-color: red;">
{% for field, errors in form.errors.items() %}
<div>
    {{ form[field].label.text }} :
    {% if errors.items %}
        {% for error, msg in errors.items() %}
            {{ form[field][error].label.text }} :
            {{ ", ".join(msg) }}
        {% endfor %}
    {% else %}
            {{ ", ".join(errors) }}
    {% endif %}
</div>
{% endfor %}
{% if custom_errors %}
    {% for field, error in custom_errors.items() %}
        <div>{{ field }} : {{ error }}</div>
    {% endfor %}
{% endif %}
</div>
<table>
  <thead>
    <tr>
      <th>Key</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
      <tr>
        <td>Location</td>
        <td>{{ form.location }}</td>

        <td></td>
        <td><button class="btn waves-effect waves-light" type="submit" name="action">Submit
            <i class="material-icons right">send</i>
          </button>
        </td>
      </tr>

      <tr>
        <td>Sticker: k6.ee/</td>
        <td>{{ form.shortener.slug }}</td>
      </tr>

      <tr>
        <td>Type</td>
        <td>{{ form["type"] }}</td>

        <td>Visibility</td>
        <td>{{ form.inventory.visibility }}</td>
      </tr>

      <tr>
        <td>Vendor</td>
        <td>{{ form.hardware.vendor }}</td>

        <td>Serial number</td>
        <td>{{ form.hardware.serial }}</td>
      </tr>

      <tr>
        <td>Product</td>
        <td>{{ form.hardware.product }}</td>
      </tr>

      <tr>
        <td>Name</td>
        <td>{{ form.name }}</td>
      </tr>

      <tr>
        <td>Comment</td>
        <td>{{ form.comment }}</td>
      </tr>

      <tr>
        <td>
          <span
            {% if not has_edit_all %}
              class="tooltipped" data-position="right" data-tooltip="You can only edit items where you are the owner"
            {% endif %}
          >
            Owner
          <span>
        </td>
        <td>{{ form.inventory.owner.username }}</td>

        <td>Current user</td>
        <td>{{ form.inventory.user.username }}</td>
      </tr>
  </tbody>
</table>

<p>
  <label>
    {{ form.inventory.usable }}
    <span>Usable, if available other members can make use of this inventory item</span>
  </label>
</p>

<h5>Tags</h5>
  <div class="placeholder-dark chips">
    <input style="width: auto !important;">
  </div>

<button class="btn waves-effect waves-light" type="submit" name="action">Submit
  <i class="material-icons right">send</i>
</button>
{% for tag in item_tags %}
  <input class="tag" type="hidden" name="tags[]" value="{{ tag }}">
{% endfor %}
</form>

</div>
<script>
$(function() {
  $("input#hardware-vendor, input#hardware-product, input#hardware-serial").keyup(function(){
      updateName();
  });

  function updateName() {
    var names = [$("input#hardware-vendor").val(), $("input#hardware-product").val(), $("input#hardware-serial").val()];
    $("input#name").val(names.filter(x => x).join(" "));
  }
  {% if not has_errors %}
    {% if slug %}
    location.href="#shortener-slug";
    $("input#shortener-slug").focus();
    {% endif %}
    {% if clone_item_id %}
    updateName();
    {% endif %}
  {% else %}
  location.href="#errors";
  {% endif %}
  setupTags();

  $(document).click(function() {
    $('li[id^="select-options"]').on('touchend', function(e) {
      e.stopPropagation();
    });
  });

  function setupTags() {
    $('.chips').chips({
      placeholder: 'Enter a tag',
      secondaryPlaceholder: '+Tag',
      data: [
      {% for tag in item_tags %}
        { tag: '{{ tag }}', },
      {% endfor %}
      ],
      autocompleteOptions: {
        data: {
        {% for tag in all_tags %}
          '{{ tag }}': null,
        {% endfor %}
        },
        limit: Infinity,
        minLength: 0
      },
      onChipAdd: updateTags,
      onChipDelete: updateTags,
    });
  }

  function updateTags(e) {
    var form = $('form');
    var instance = M.Chips.getInstance($('.chips'));
    var tags = instance.chipsData;
    form.find('input.tag').remove();
    for (var i = 0; i < tags.length; i++) {
      var tag = tags[i]["tag"];
      $('<input>', {
        'type': 'hidden',
        'name': 'tags[]',
        'class': 'tag',
        'value': tag
      }).appendTo(form);
    }
  }
});
</script>
{% endblock %}