{% 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>

      {% macro auditLine(timestamp, user) -%}
          {{ timestamp | timeago }}
          by
          {{ user | display_name }}
      {%- endmacro %}
      <tr>
        <td>Last audited</td>
        <td>
          {% if item.inventory.get("audit") %}
            {% if item.inventory.get("audit", {}).get("log") %}
              <details>
                <summary>
                  {{ auditLine(item.inventory.audit.timestamp, item.inventory.audit.username) }}
                </summary>
                  <ul class="browser-default">
                    {% for audit in item.inventory.audit.log | reverse %}
                      <li>{{ auditLine(audit.timestamp, audit.username) }}</li>
                    {% endfor %}
                  </ul>
              </details>
            {% else %}
              {{ auditLine(item.inventory.audit.timestamp, item.inventory.audit.username) }}
            {% endif %}
          {% else %}
            Never
          {% endif %}
        </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>QR Code (WIP)</td>
        <td>
        {% if item.get("shortener").slug %}
          {{ item.get("shortener", {}).get("slug") | qr_code }}
        {% endif %}
        </td>
      </tr>
      
      <tr>
	 <td>External link</td>
	 <td><a href="{{ item.external_link }}">External link</a></td>
      </tr>

      <tr>
        <td>Location</td>
        <td>{{ item.location }}</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 %}

{% if is_using %}
<div class="row">
  <div class="col s12">
    <form action="/m/inventory/{{ item._id }}/vacate" method="post" style="display: inline;">
      <button class="waves-effect waves-light btn" type="submit">Vacate</button>
    </form>
  </div>
</div>
{% endif %}

<div class="row">
  <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>

<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 class="row">
  <div class="col s12">
    <button {% if can_audit %} data-target="audit-modal" {% else %} disabled="" {% endif %} class="modal-trigger orange waves-effect waves-light btn">
      <i class="material-icons left">done</i>Audit
    </button>
  </div>
</div>

<div class="row">
  <div class="col s12">
    <form action="/m/inventory/{{ item._id }}/archive" method="post" style="display: inline;">
      <button {% if not can_edit %} disabled="" {% endif %} class="red lighten-1 waves-effect waves-light btn" type="submit">
        <i class="material-icons left">archive</i>Archive
      </button>
    </form>
  </div>
</div>

{% if can_audit %}
<div id="audit-modal" class="modal">
  <div class="modal-content">
    <h4>Check that:</h4>
    <p>
      <label>
        <input class="audit-check" type="checkbox"/>
        <span>Object is present at the space</span>
      </label>
    </p>
    <p>
      <label>
        <input class="audit-check" type="checkbox"/>
        <span>There is no obvious issues and it does not present danger</span>
      </label>
    </p>
    <p>
      <label>
        <input class="audit-check" type="checkbox"/>
        <span>Object has QR code attached to it and it's up to date</span>
      </label>
    </p>
    <p>
      <label>
        <input class="audit-check" type="checkbox"/>
        <span>Picture is up to date</span>
      </label>
    </p>
  </div>
  <div class="modal-footer">
    <form action="/m/inventory/{{ item._id }}/audit" method="post" style="display: inline;">
      <button id="audit-modal-send" disabled="" type="submit" class="orange waves-effect waves-light btn"><i class="material-icons left">done</i>Confirm</button>
    </form>
  </div>
</div>
{% endif %}

</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 %}