{% if not qs.ajax %}
{% extends "starter-template.html" %}
{% endif %}

{% block content %}

{% if not qs.ajax %}

{% include "trx.index.activeconditions.html" %}

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseFilterForm" aria-expanded="false" aria-controls="collapseFilterForm">
    Change Filters
</a>

<br>
<br>

<div class="collapse panel panel-default" id="collapseFilterForm">
    <div class="panel-body">
        {% include "trx.index.filterform.html" %}
    </div>
</div>

<br>
<a id="btnAutoRefresh" href="{{ autorefreshLink }}" class="btn btn-default btn-xs pull-right {% if qs.autorefresh == "1" %} btn-primary {% endif %}" role="button">
    AUTO REFRESH
</a>
<br>
<br>

<div id="transactions">
{% endif %}

<table class="table table-striped table-hover">

    <tr>
        <th class="hidden-xs shrink">Time</th>
        <th class="hidden-xs shrink">Member</th>
        <th>Destination</th>
        <th>Product</th>
        <th class="hidden-xs shrink">Supplier</th>
        <th class="shrink">RC</th>
        <th class="message hidden-xs">
            Message
        </th>
    </tr>

    {% for trx in trxs %}
    {% if trx.responses %}
    {% endif %}

    <tr>
        <td class="hidden-xs shrink">
            {{ trx.ts | replace('-', '/') | replace(' ', '<br>') | safe }}

            {% if trx.lastResponse %}
            <br>
            ({{ trx.lastResponse.ts | replace(r/.* /, '') }})
            {% endif %}
        </td>

        <td class="hidden-xs shrink">{{ trx.member }}</td>

        <td>
            <a href="/trx/view/{{ trx.requestId }}">
                <strong>{{ trx.destination }}</strong>
            </a>

            <div class="visible-xs small">
                by
                {{ trx.member }}
                on
                {{ trx.ts | replace(r/.* /, '') }}

                {% if trx.lastResponse %}
                ({{ trx.lastResponse.ts | replace(r/.* /, '') }})
                {% endif %}
            </div>
        </td>

        <td>
            <strong>{{ trx.product }}</strong>
            <div class="visible-xs small">
                ({{ trx.supplier }})
            </div>
        </td>

        <td class="supplier hidden-xs shrink">
            {% if trx.supplier %}
            {{ trx.supplier }}
            {% else %}
            -
            {% endif %}
        </td>

        <td class="rc shrink">
            {% set rcClass = "label label-danger" %}
            {% if trx.rc == "00" %}
                {% set rcClass = "label label-success" %}
            {% elif trx.rc == "68" %}
                {% set rcClass = "label label-default" %}
            {% endif %}

            <span class="{{ rcClass }}">
                {{ trx.rc }}
            </span>
        </td>

        <td class="message hidden-xs">
            {% if (trx.lastResponse.parsed.ciwaru.msg) %}
                {{ trx.lastResponse.parsed.ciwaru.msg }}
            {% elif (trx.lastResponse.parsed.MESSAGE)  %}
                {{ trx.lastResponse.parsed.MESSAGE }}
            {% else %}
                <img src="/loading-fb.gif" height=14 alt="-">
            {% endif %}

        </td>


    </tr>
    {% endfor %}

</table>

<p>
    <ul class="pagination">
        {% for page in paginator %}
        <li
            {% if page.active %}
                class="active"
            {% endif %}
        >
            <a href="{{ page.link | safe }}">
                {{ page.number }}
            </a>
        </li>
        {% endfor %}
    </ul>
</p>

<p>
    Total {{ trxcount }} transactions available in {{ pagecount }} pages.
</p>

{% if not qs.ajax %}
</div>

    {% if qs.autorefresh == "1" %}
    <script>
        function loadTransactions() {
            $("#transactions").load("{{ url | safe }}" + "&ajax=1" );
        }
        setInterval(function(){loadTransactions()}, 2000);
    </script>
    {% endif %}

{% endif %}

{% endblock %}