{% extends 'base.html' %}

{% block content %}
<div class="container">
  {% include "inventory_filter.html" %}

  {% macro add_item_button() -%}
    <p>
      <a class="waves-effect waves-light btn" href="/m/inventory/add">Add item</a>
    </p>
  {%- endmacro %}

  {{ add_item_button() }}

  <table>
    <thead>
      <tr>
        <th>Slug</th>
        <th>Public</th>
        <th>Name</th>
        <th>Type</th>
        <th>Owner</th>
        <th>User</th>
        {% if can_audit %}
          <th>Audit</th>
        {% endif %}
      </tr>
    </thead>
    <tbody>
      {% for item in items %}
        <tr {% if item | check_foreign_key_format %}
            style="background-color: coral;"
            {% endif %}
        >
          <td>
            {% if item.shortener %}
              <a href="http://k6.ee/{{ item.shortener.slug }}">{{ item.shortener.slug }}</a>
            {% endif %}
          </td>
          <td>{% if item.inventory.public %}<i class="material-icons">check_circle</i>{% else %}&nbsp;{% endif %}</td>
          <td><a href="/m/inventory/{{ item._id }}/view">{{ item | format_name }} {{ item.comment }}</a></td>
          <td>{{ item.type }}</td>
          <td>{{ item | owner_link}}</td>
          <td>{{ item | user_link}}</td>
          {% if can_audit %}
            <td>
              <form onsubmit="return false;">
                <button
                  data-item-id="{{ item._id }}"
                  class="audit-button {{ item.inventory | audit_color }} waves-effect waves-light btn"
                >
                  {{item.inventory | audit_text}}
                </button>
              </form>
            </td>
          {% endif %}

        </tr>
      {% endfor %}
    </tbody>
  </table>
  {{ add_item_button() }}
</div>
<script>
$('button.audit-button').on('click', function() {
  let button = $(this);
  $.ajax({
    method: 'POST',
    url: "/m/inventory/" + button.data('itemId') + "/audit",
    data: { noRedirect: true },
    success: function() {
      button.unbind('click');
      button.removeClass(['orange', 'red', 'waves-effect', 'waves-light']);
      button.addClass(['unclickable', 'green']);
      button.text('Just now');
    }
  })
});
</script>
{% endblock %}