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

<div id="tab-untracked" class="tab-pane fade card card-default border-0" role="tabpanel">
    <div class="card-body p-0">
        {% if BUYBACKPROGRAM_TRACK_PREFILL_CONTRACTS %}
        <div class="table-responsive">
        <table class="table table-sm mb-0">
            <thead>
                <tr>
                    <th>{% trans "Issuer" %}</th>
                    <th class="d-none d-md-table-cell">{% trans "Assignee" %}</th>
                    <th class="d-none d-lg-table-cell">{% trans "Location" %}</th>
                    <th class="d-none d-md-table-cell">{% trans "Date issued" %}</th>
                    <th class="d-none d-lg-table-cell">{% trans "Time pending" %}</th>
                    <th>{% trans "Status" %}</th>
                    <th>{% trans "Tracking #" %}</th>
                    <th>{% trans "Price" %}</th>
                    <th>{% trans "Notes" %}</th>
                </tr>
            </thead>
            <tbody>
                {% for contract in untracked_contracts %}
                    {% if contract.status == 'outstanding' %}
                    <tr>
                        <td>{{ contract.issuer_name }}</td>
                        <td class="d-none d-md-table-cell">{{ contract.assignee_name }}</td>
                        <td class="d-none d-lg-table-cell">{{ contract.location_name }}</td>
                        <td class="d-none d-md-table-cell">{{ contract.date_issued|date:"Y-m-d" }}</td>
                        <td class="d-none d-lg-table-cell">{{ contract.date_issued|timesince }}</td>
                        <td>{{ contract.status }}</td>
                        <td><code>{{ contract.title }}</code></td>
                        <td>{{ contract.price|custom_number_format:2|price }}</td>
                        <td colspan="2">
                            {% for note in contract.notes %}
                            <i style="color: {{ note.color }};" class="fas {{ note.icon }}" title="{{ note.message }}"></i>
                            {% endfor %}
                        </td>
                    </tr>
                    {% endif %}
                {% endfor %}
            </tbody>
        </table>
        </div>
        {% endif %}
    </div>
</div>