{% extends 'base.html' %}

{% block content %}
<div class="container">
<title>{% if item.get("shortener").slug %}/{{ item.get("shortener").slug }}{% else %}k6{% endif %}: {{ item.name }}</title>

<div class="horizontalRow">
  <div class="col s12"><a {% if not can_edit %} disabled="" {% endif %} href="/m/inventory/{{ item._id }}/edit" class="waves-effect waves-light btn">Edit</a></div>
  <div class="col s12"><a href="/m/inventory/{{ item._id }}/clone" class="waves-effect waves-light btn">Clone</a></div>
</div>

<table>
  <thead>
    <tr>
      <th>Key</th>
      <th>Value</th>
      <th>Key</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>

      <tr>
        <td>Location</td>
        <td>{% if item.location and (item.location | location_link) %}<a href="https://{{ item.location | location_link }}">🡼</a>{% else %}🮰{% endif %} {{ item.location }}</td>

        <td>Last audited</td>
        <td><div>
    <form onsubmit="return false;">
      <button
        data-item-id="{{ item._id }}"
        class="audit-button {{ item.inventory | audit_color }} waves-effect waves-light btn"
        {% if not can_audit %}disabled=""{% endif %}
      >
        {{item.inventory | audit_text}}
          </button>
        </form>{% if item.inventory.get("audit") %} by {{ item.inventory.audit.username }}{% endif %}
        </div>
      </tr>

      <tr>
        <td>Sticker</td>
        <td>
        {% if item.get("shortener").slug %}
          {{ item.get("shortener", {}).get("slug") | qr_code }}
          <a href="https://k6.ee/{{ item.get("shortener").slug }}">
            k6.ee/{{ item.get("shortener").slug }}
          </a>
        {% endif %}
        </td>
      </tr>

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

        <td class="tooltip" data-tooltip="Who can see the item">Visibility</td>
        <td>{{ item.inventory.visibility }}</td>
      </tr>

      <tr>
        <td>Vendor</td>
        <td>{{ item.get("hardware").vendor }}</td>

        <td>Serial number</td>
        <td>{{ item.get("hardware").serial }}</td>
      </tr>

      <tr>
        <td>Product</td>
        <td>{{ item.get("hardware").product }}</td>
      </tr>

      {% if item.mac %}
      <tr>
        <td>MAC address</td>
        <td>
          <span class="tooltipped" data-tooltip="Show IP usage in Grafana">
            <a href="{{ constants.MACADDRESS_OUTLINK_BASEURL }}{{ item.mac }}">
              {{ item.mac }}
            </a>
          </span>
        </td>
      </tr>
      {% endif %}

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

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

      <tr>
        <td>Owner</td>
        <td>{{ item | owner_link }}</td>

        <td>User</td>
        <td>{{ item | user_link }}</td>
      </tr>

<tr>
<td>Tags</td>
        <td>{% for tag in item.tags %}<div class="chip">{{ tag }}</div>{% endfor %}</td>
</tr>

  </tbody>
</table>

<div>
<h3>Photo</h3>
<form id="photo-form" action="/inventory/{{ item._id }}/upload-photo" method="post" enctype="multipart/form-data">
<div class="row placeholder-dark">
  <div class="file-field input-field col s6">
    <div class="btn">
      <span>Select</span>
      <input type="file" name="file" accept="image/jpeg" />
    </div>

    <div class="file-path-wrapper">
      <input class="file-path validate" type="text" placeholder="Upload file" />
    </div>
  </div>
  <div class="file-field input-field col s6">
    <button class="btn waves-effect waves-light" type="submit" name="action">Upload
      <i class="material-icons right">add_a_photo</i>
    </button>
  </div>
</div>
</form>
{% if item.has_photo %}
<img src="{{ photo_url }}" alt="" style="max-width: 800px; width: 100%;">
{% endif %}
</div>

</div>

<script>
$(function() {
  var photoInput = $("#photo-form input[type=file]");
  photoInput.change(function () {
    var fileName = $.trim($(this).val());
    var button = $("#photo-form button[type=submit]");
    if (fileName === "") {
      button.prop("disabled", true);
    } else {
      button.prop("disabled", false);
    }
  });
  photoInput.change();

{% if can_audit %}
  var auditModal = $("div#audit-modal");
  var auditButton = $("button#audit-modal-send");
  var auditChecks = $("input.audit-check");
  auditModal.modal({
    onOpenStart() {
      auditChecks.prop('checked', false);
      auditButton.prop("disabled", true);
    }
  });
  auditChecks.on("change", function() {
    if (auditChecks.not(":checked").length == 0) {
      auditButton.prop("disabled", false);
    } else {
      auditButton.prop("disabled", true);
    }
  });
{% endif %}
});
</script>
{% endblock %}