<h4>Required Parts</h4>
<hr>

<div id='build-item-toolbar'>
    <div class='btn-group'>
        <button class='btn btn-primary' type='button' id='btn-allocate' title='Allocate Stock'>Allocate</button>
        <button class='btn btn-primary' type='button' id='btn-order-parts' title='Order Parts'>Order Parts</button>
    </div>
</div>

<table class='table table-striped table-condensed' id='build-list' data-sorting='true' data-toolbar='#build-item-toolbar'>
<thead>
<tr>
    <th data-sortable='true'>Part</th>
    <th>Description</th>
    <th data-sortable='true'>Available</th>
    <th data-sortable='true'>Required</th>
    <th data-sortable='true'>Allocated</th>
    <th data-sortable='true'>On Order</th>
</tr>
</thead>
<tbody>
    {% for item in build.required_parts %}
    <tr>
        <td>
            {% include "hover_image.html" with image=item.part.image hover=True %}
            <a class='hover-icon'a href="{% url 'part-detail' item.part.id %}">{{ item.part.full_name }}</a>
        </td>
        <td>{{ item.part.description }}</td>
        <td>{{ item.part.total_stock }}</td>
        <td>{{ item.quantity }}</td>
        <td>{{ item.allocated }}</td>
        <td>{{ item.part.on_order }}</td>
    </tr>
    {% endfor %}
</tbody>
</table>