{% extends 'layout.twig' %}

{% block title %}{{ item.name }}{% endblock %}

{% block content %}

<!-- page header -->
<header id="item-header" class="row">
  <div class="columns twelve">
    <span>
      <h1>{{ item.name }}</h1>
      <p><a href="/item/{{ item.id }}/edit"><i class="fa-solid fa-pen-to-square"></i> Edit</a></p>
    </span>
    <h4 class="item-added-date">Item added at: {{ item.createdAt }}</h4>
    <h4 class="item-updated-date">Last updated at: {{ item.updatedAt }}</h4>
  </div>
</header>

<!-- item information -->
<section class="row">
  <table class="columns twelve">
    <thead>
      <tr>
        <th>Product name</th>
        <th>Serial number</th>
        <th>SKU Number</th>
        <th>Manufacturer</th>
        <th>Type</th>
        <th>Seller</th>
        <th>Purchase date</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>{{ item.name }}</td>
        <td>{{ item.serialNumber ? item.serialNumber : 'N/a' }}</td>
        <td>{{ item.skuNumber ? item.skuNumber : 'N/a' }}</td>
        <td>{{ item.manufacturer ? item.manufacturer : 'N/a' }}</td>
        <td>{{ item.type }}</td>
        <td>{{ item.purchasedFrom ? item.purchasedFrom : 'N/a' }}</td>
        <td>{{ item.purchasedAt | date("m/d/Y h:i:s A") }}</td>
      </tr>
    </tbody>
  </table>
</section>

<hr>

<section id="item-activity" class="row">
  <h2>Recorded activity</h2>
  {% if item.activities | length > 0 %}
    <ul class="twelve columns">
      {% for a in item.activities %}
        <li><p>{{ a.render() }}</p></li>
      {% endfor %}
    </ul>
  {% else %}
    <p>There hasn't been any activity recorded for this item.</p>
  {% endif %}
</section>

{% endblock %}