{% load i18n %}
{% load django_ledger %}

<div class="box">
    <div class="table-container">
        <table class="table is-fullwidth is-striped is-hoverable is-narrow">
            <thead>
            <tr>
                <th>{% trans 'Item' %}</th>
                <th class="has-text-right">{% trans 'Unit Cost' %}</th>
                <th class="has-text-right">{% trans 'PO Qty' %}</th>
                <th class="has-text-right">{% trans 'Amount' %}</th>
                <th class="has-text-centered">{% trans 'Status' %}</th>
                <th class="has-text-centered">{% trans 'Billed' %}</th>
            </tr>
            </thead>
            <tbody>
            {% for item in po_item_list %}
                <tr>
                    <td><span class="has-text-weight-bold">{{ item.item_model }}</span></td>
                    <td class="has-text-right">{{ item.po_unit_cost }}</td>
                    <td class="has-text-right">{{ item.po_quantity }}</td>
                    <td class="has-text-right {% if item.is_cancelled %}djl-is-strikethrough{% endif %}">
                        {% currency_symbol %}{{ item.po_total_amount | currency_format }}
                    </td>
                    <td class="has-text-centered">
                        {% if item.po_item_status %}
                            <span class="tag is-light {% if item.is_cancelled %}is-danger{% elif item.po_item_status == 'received' %}is-success{% endif %}">
                                {{ item.get_po_item_status_display }}
                            </span>
                        {% endif %}
                    </td>
                    <td class="has-text-centered">
                        {% if item.bill_model_id %}
                            <a class="button is-small is-info is-rounded"
                               href="{% url 'django_ledger:bill-detail' entity_slug=entity_slug bill_pk=item.bill_model_id %}">
                                <span class="icon">{% icon 'bi:receipt' 16 %}</span>
                                <span>{% trans 'View Bill' %}</span>
                            </a>
                        {% endif %}
                    </td>
                </tr>
            {% endfor %}
            </tbody>
            <tfoot>
            <tr class="has-text-weight-bold has-background-light">
                <td colspan="3" class="has-text-right">{% trans 'Total PO Amount' %}</td>
                <td class="has-text-right">
                    {% currency_symbol %}{{ po_model.po_amount | currency_format }}
                </td>
                <td colspan="2"></td>
            </tr>
            </tfoot>
        </table>
    </div>
</div>