{% extends 'layout.html.twig' %}

{% set breadcrumb = buildBreadcrumb([{'route': 'app_loan_index', 'trans': 'menu.loans'}]) %}

{% block title %}
    {{ renderTitle(breadcrumb)  }}
{% endblock %}

{% block breadcrumb %}
    {{ renderBreadcrumb(breadcrumb)  }}
{% endblock %}

{% block content %}
    <div class="title-block">
        <h1>{{ 'menu.loans'|trans }}</h1>
        <ul class="nav nav-pills">
            <li>{{ 'counter.loan'|trans({'%count%': loans|length}) }}</li>
            <li>{{ 'counter.returned'|trans({'%count%': returnedItems|length}) }}</li>
        </ul>
    </div>

    <div class="content-block">
        <div class="row">
            <div class="tabs-block col s12 l10 offset-l1 xl6 offset-xl3">
                <ul class="nav nav-pills">
                    <li class="tab current" for="loans">
                        <span>{{ 'tab.loans'|trans }}</span>
                    </li>
                    <li class="tab" for="returnedItems">
                        <span>{{ 'tab.returned_items'|trans }}</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="panel" id="loans">
            <table class="striped">
                <thead>
                <tr>
                    <th>{{ 'label.name'|trans }}</th>
                    <th>{{ 'label.loaned_to'|trans }}</th>
                    <th>{{ 'label.loaned_at'|trans }}</th>
                    <th class="hide-on-small-only">{{ 'label.loaned_ago'|trans }}</th>
                    <th>{{ 'label.actions'|trans }}</th>
                </tr>
                </thead>
                <tbody>
                {% for loan in loans %}
                    <tr class="list-element resize-element">
                        <td><a href="{{ path('app_item_show', {'id': loan.item.id}) }}">{{ loan.item.name }}</a></td>
                        <td>{{ loan.lentTo }}</td>
                        <td>{{ loan.lentAt|date(app.user.dateFormat|default('Y-m-d'), app.user.timezone|default('UTC')) }}</td>
                        <td class="hide-on-small-only">{{ loan.lentAt|timeAgo }}</td>
                        <td class="table-actions">
                            <a class="modal-trigger" href="#delete-{{ loan.id }}" title="{{ 'tooltip.delete'|trans }}"><i class="fa fa-trash fa-fw"></i></a>
                            <a href="{{ path('app_loan_returned', {'id' : loan.id}) }}" title="{{ 'tooltip.returned'|trans }}"><i class="fa fa-check fa-fw"></i></a>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

        <div class="panel hidden" id="returnedItems">
            <table class="striped">
                <thead>
                <tr>
                    <th>{{ 'label.name'|trans }}</th>
                    <th>{{ 'label.loaned_to'|trans }}</th>
                    <th class="hide-on-small-only">{{ 'label.loaned_at'|trans }}</th>
                    <th>{{ 'label.return_date'|trans }}</th>
                    <th class="hide-on-small-only">{{ 'label.loan_duration'|trans }}</th>
                    <th >{{ 'label.actions'|trans }}</th>
                </tr>
                </thead>
                <tbody>
                {% for returnedItem in returnedItems %}
                    <tr class="list-element resize-element">
                        <td><a href="{{ path('app_item_show', {'id': returnedItem.item.id}) }}">{{ returnedItem.item.name }}</a></td>
                        <td>{{ returnedItem.lentTo }}</td>
                        <td class="hide-on-small-only">{{ returnedItem.lentAt|date(app.user.dateFormat|default('Y-m-d'), app.user.timezone|default('UTC')) }}</td>
                        <td>{{ returnedItem.returnedAt|date(app.user.dateFormat|default('Y-m-d'), app.user.timezone|default('UTC')) }}</td>
                        <td class="hide-on-small-only">{{ returnedItem.lentAt|timeDiff(returnedItem.returnedAt) }}</td>
                        <td class="table-actions">
                            <a class="modal-trigger" href="#delete-{{ returnedItem.id }}" title="{{ 'tooltip.delete'|trans }}"><i class="fa fa-trash fa-fw"></i></a>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}

{% block modals %}
    {% if context == 'default' %}
        {% for loan in loans %}
            {{ include('App/_partials/_modal/_delete.html.twig', {'id': 'delete-' ~ loan.id , 'route': url('app_loan_delete', {id: loan.id}), transKey: 'message.delete.loan'}) }}
        {% endfor %}
        {% for returnedItem in returnedItems %}
            {{ include('App/_partials/_modal/_delete.html.twig', {'id': 'delete-' ~ returnedItem.id , 'route': url('app_loan_delete', {id: returnedItem.id}), transKey: 'message.delete.loan'}) }}
        {% endfor %}
    {% endif %}
{% endblock %}