{% load i18n %}
{% load humanize %}
{% load price_formats %}

<div id="tab-outstanding" class="tab-pane fade show active" role="tabpanel">
    {% if contracts %}
    <table class="table table-striped table-hover w-100">
        <thead>
            <tr>
                <th>{% trans "Issuer" %}</th>
                <th>{% trans "Location" %}</th>
                <th>{% trans "Date issued" %}</th>
                <th>{% trans "Pending" %}</th>
                <th>{% trans "Status" %}</th>
                <th>{% trans "Tracking #" %}</th>
                <th>{% trans "Price" %}</th>
                <th>{% trans "Notes" %}</th>
            </tr>
        </thead>
        <tbody>
            {% for tracking in contracts %}
            {% if tracking.contract.status == 'outstanding' %}
            <tr>
                <td>{{ tracking.contract.issuer_name }}</td>
                <td>{{ tracking.contract.location_name }}</td>
                <td>{{ tracking.contract.date_issued|date:"Y-m-d" }}</td>
                <td>{{ tracking.contract.date_issued|timesince }}</td>
                <td><span class="badge bg-warning text-dark">{{ tracking.contract.status }}</span></td>
                <td>
                    <a href="{% url 'buybackprogram:contract_details' contract_title=tracking.tracking_number %}">
                        <code>{{ tracking.tracking_number }}</code>
                    </a>
                </td>
                <td>{{ tracking.contract.price|custom_number_format:2|price }}</td>
                <td>
                    {% for note in tracking.contract.notes %}
                        <i style="color:{{ note.color }};" class="fas {{ note.icon }}" title="{{ note.message }}"></i>
                    {% endfor %}
                </td>
            </tr>
            {% endif %}
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p class="text-muted text-center py-3">{% trans "No outstanding contracts." %}</p>
    {% endif %}
</div>