{% extends "base.html" %}

{% block content %}
  <table id="data" class="table table-striped">
    <thead>
      <tr>
        <th>img</th>
        <th>part.element_id</th>
        <th>part.part_num</th>
        <th>part.name</th>
        <th>color.id</th>
        <th>color.name</th>
        <th>part.quantity</th>
        <th>part.is_spare</th>
        <th>Missing?</th>
      </tr>
    </thead>
    <tbody>
      {% for brick in inventory_file.results %}
        <tr>
          <td><img src="{{ '/static/parts/'+brick.element_id+'.jpg' }}" style="height: 50px; width: auto;"></td>
          <td>{{ brick.element_id }}</td>
          <td>{{ brick.part.part_num }}</td>
          <td>{{ brick.part.name }}</td>
          <td>{{ brick.color.id }}</td>
          <td>{{ brick.color.name }}</td>
          <td>{{ brick.quantity }}</td>
          <td>{{ brick.is_spare }}</td>
          <td>
              <form action="/saveNumber" method="post">
                <input type="hidden" name="brick.part.part_num" value="{{ brick.part.part_num }}">
                <input type="hidden" name="brick.color.name" value="{{ brick.color.name }}">
                <label for="numberInput">Number:</label>
                <input type="text" id="numberInput" name="numberInput">
                <button type="submit">Save Number</button>
              </form>
          </td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
{% endblock %}