{% extends 'buybackprogram/page.html' %}
{% load i18n %}
{% load humanize %}
{% load price_formats %}

{% block body %}
<div class="panel-heading">
  <h3 class="panel-title">All program statistics</h3>
</div>
<div class="panel-body" style="min-height: 100px;">
        <div class="table-responsive">
            <table style="width: 50%" class="table table-condensed">
                <tbody>
                    <tr>
                        <th>Outstanding count:</th>
                        <td>{{values.outstanding_count}}</td>
                        <th>Outstanding value:</th>
                        <td>{{values.outstanding|floatformat:0|intcomma|price}}</td>
                    </tr>
                    <tr>
                        <th>Total bought count:</th>
                        <td>{{values.finished_count}}</td>
                        <th>Total bought:</th>
                        <td>{{values.finished|floatformat:0|intcomma|price}}</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Outstanding</a></li>
            <li role="presentation"><a href="#finished" aria-controls="finished" role="tab" data-toggle="tab">Finished</a></li>
        </ul>

        <div class="panel panel-default panel-tabs">
            <div class="panel-body">
                <div class="tab-content">
                    <!-- outstanding contracts tab -->
                    <div role="tabpanel" class="tab-pane active" id="home">
                        <table class="table table-striped table-condensed">
                            <thead>
                                <tr>
                                    <th >{% trans "Issuer" %}</th>
                                    <th >{% trans "Assignee" %}</th>
                                    <th >{% trans "Date issued" %}</th>
                                    <th >{% trans "Time pending" %}</th>
                                    <th >{% trans "Status" %}</th>
                                    <th >{% trans "Tracking #" %}</th>
                                    <th >{% trans "Price" %}</th>
                                    <th>{% trans "Notes" %}</th>
                                    <th>{% trans "Action" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for contract in contracts %}
                                    {% if contract.status == 'outstanding' %}
                                        <tr>
                                            <td>{{contract.issuer_name}}</td>
                                            <td>{{contract.assignee_name}}</td>
                                            <td>{{contract.date_issued}}</td>
                                            <td>{{ contract.date_issued|timesince }}</td>
                                            <td>{{contract.status}}</td>
                                            <td>{{contract.title}}</td>
                                            <td>{{contract.price|floatformat:0|intcomma|price}}</td>

                                            <td>
                                                {% for note in contract.notes %}
                                                <i style="color: {{note.color}};" class="fas {{note.icon}}" title="{{note.message}}"></i>
                                                {% endfor %}
                                            </td>

                                            <td><a class="btn btn-info btn-sm" href="{% url 'buybackprogram:contract_details' contract_title=contract.tracking.tracking_number%}">
                                            Details
                                        </a></td>
                                        </tr>
                                    {% endif %}
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>

                    <!-- finished contracts tab -->
                    <div role="tabpanel" class="tab-pane" id="finished">
                        <table class="table table-striped table-condensed">
                            <thead>
                                <tr>
                                    <th >{% trans "Issuer" %}</th>
                                    <th >{% trans "Date issued" %}</th>
                                    <th >{% trans "Date accepted" %}</th>
                                    <th >{% trans "Time for accepted" %}</th>
                                    <th >{% trans "Status" %}</th>
                                    <th >{% trans "Tracking #" %}</th>
                                    <th >{% trans "Price" %}</th>
                                    <th >{% trans "Action" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for contract in contracts %}
                                    {% if contract.status == 'finished' %}
                                        <tr>
                                            <td>{{contract.issuer_name}}</td>
                                            <td>{{contract.date_issued}}</td>
                                            <td>{{contract.date_completed}}</td>
                                            <td>{{ contract.date_completed|timeuntil:contract.date_issued }}</td>
                                            <td>{{contract.status}}</td>
                                            <td>{{contract.title}}</td>
                                            <td>{{contract.price|floatformat:0|intcomma|price}}</td>
                                            <td><a class="btn btn-info btn-sm" href="{% url 'buybackprogram:contract_details' contract_title=contract.title %}">
                                            Details
                                        </a></td>
                                        </tr>
                                    {% endif %}
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_javascript %}
{% endblock %}

{% block extra_css %}
{% endblock %}

{% block extra_script %}
{% endblock %}
