<h4>{{ page_title }}</h4>
<div class="row max-width-initial medium-up-3">
    <div class="column">
        <h5 class="subheader">PO Number: <strong>{{ purchaseOrderBreakdown.poNo }}</strong></h5>
    </div>
    <div class="column">
        <h5 class="subheader">Status: <strong>{{ purchaseOrderBreakdown.status }}</strong></h5>
    </div>
    <div class="column">
        <h5 class="subheader">Payment Method: <strong>{{ purchaseOrderBreakdown.paymentmethod }}</strong></h5>
    </div>
</div>
<table class="display response" id="purchaseOrderBreakdownItem-datalist" width="100%">
    <thead>
    <tr>
        <th>Item</th>
        <th>Required Quantity</th>
        <th>Quantity With PO</th>
        <th>Quantity</th>
    </tr>
    </thead>
    <tbody>
    {% for purchaseOrderBreakdownItem in purchaseOrderBreakdown.purchaseorderbreakdownitems %}
        <tr>
            <td>{{ purchaseOrderBreakdownItem.purchaseorderitem.materialrequisitionitem.item.description }}</td>
            <td>{{ purchaseOrderBreakdownItem.purchaseorderitem.quantity }}</td>
            <td>{{ purchaseOrderBreakdownItem.purchaseorderitem.quantitywithpo }}</td>
            <td>{{ purchaseOrderBreakdownItem.quantity }}</td>
        </tr>
    {% endfor %}
    </tbody>
</table>