{% extends 'base.html' %}
{% block content %}
<div class="container">
<p>Inventory item.</p>

<table>
  <thead>
    <tr>
      <th>Key</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
  
      <tr>
        <td>Type</td>
        <td>{{ item["type"] }}</td>
      </tr>

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

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

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

      {% if item.mac %}
      <tr>
        <td>MAC address</td>
        <td>
          <span class="tooltipped" data-tooltip="Show in machines view">
            <a href="/m/machine?mac={{ item.mac | quote_plus }}">
              {{ 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.inventory.get("owner").username | display_name }}</td>
      </tr>
      
      <tr>
        <td>Current user</td>
        <td>{{ item.inventory.get("user").username | display_name }}</td>
      </tr>

      <tr>
        <td>URL slug</td>
        <td>
        {% if item.get("shortener").slug %}
          <a href="http://k6.ee/{{ item.get("shortener").slug }}">
            k6.ee/{{ item.get("shortener").slug }}
          </a>
        {% endif %}
        </td>
      </tr>
      
      <tr>
	 <td>Issue tracker</td>
	 <td><a href="{{ item.issue_tracker }}">Issue tracker</a></td>
      </tr>

      <tr>
        <td class="tooltip" data-tooltip="Unauthenticated user can see this in public list">Public</td>
        <td>{% if item.inventory.public %}<i class="material-icons">check_circle</i>{% endif %}</td>
      </tr>

      <tr>
        <td class="tooltip" data-tooltip="Other members can make use of this inventory item">Usable</td>
        <td>{% if item.inventory.usable %}<i class="material-icons">check_circle</i>{% endif %}</td>
      </tr>

  </tbody>
</table>

<h3>Tags</h3>
{% for tag in item.tags %}
  <div class="chip"> {{ tag }} </div>
{% endfor %}
<h3>Description</h3>
<p class="auto-height">
  {{ item.description | markdown }}
</p>

<h3>Photo</h3>
{% if item.has_photo %}
<img src="{{ photo_url }}" alt="" style="max-width: 800px; width: 100%;">
{% endif %}
<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>
<h3>Actions</h3>
{% if not item.inventory.user and item.inventory.usable %}
<div class="row">
  <div class="col s12">
    <form action="/m/inventory/{{ item._id }}/use" method="post" style="display: inline;">
      <button class="waves-effect waves-light btn" type="submit">Use</button>
    </form>
  </div>
</div>
{% endif %}

<div class="row">
  <div class="col s12">
    <a href="/m/inventory/{{ item._id }}/edit" class="waves-effect waves-light btn">Edit</a>
  </div>
</div>

<div class="row">
  <div class="col s12">
    <a href="/m/inventory/{{ item._id }}/clone" class="waves-effect waves-light btn">Clone</a>
  </div>
</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();
});
</script>
{% endblock %}