<table class="table table-striped table-condensed">
    <thead>
    <tr class="ignore">
        <th class="hidden-xs" colspan="2">&nbsp;</th>
        <th>{{ trans('list.description') }}</th>
        <th style="text-align:right;">{{ trans('list.amount') }}</th>
        <th class="hidden-xs hidden-sm hidden-md">{{ trans('list.reconcile') }}</th>
        <th class="hidden-xs hidden-sm">{{ trans('list.date') }}</th>
        <th class="hidden-xs hidden-sm hidden-md">{{ trans('list.from') }}</th>
        <th class="hidden-xs hidden-sm hidden-md">{{ trans('list.to') }}</th>
        <th class="hidden-xs"><span class="fa fa-pie-chart fa-fw" title="{{ trans('list.budget') }}"></span></th>
        <th class="hidden-xs"><span class="fa fa-bookmark fa-fw" title="{{ trans('list.category') }}"></span></th>
    </tr>
    </thead>
    <tbody>
    {# data for previous/next markers #}
    {% set endSet = false %}
    {% set startSet = false %}
    {% for journal in journals %}
        {# start marker #}
        {% if journal.date < start and startSet == false %}
            <tr>
                <td colspan="4">
                    &nbsp;
                </td>
                <td>
                    <input type="checkbox" class="check_all_btn">
                </td>
                <td colspan="3">
                    <span class="label label-default">
                        {{ trans('firefly.start_of_reconcile_period', {period: start.isoFormat(monthAndDayFormat) }) }}
                    </span>
                </td>
                <td colspan="2">
                    &nbsp;
                </td>
            </tr>
            {% set startSet = true %}
        {% endif %}

        {# end marker #}
        {% if journal.date <= end and endSet == false %}
            <tr>
                <td colspan="4">
                    &nbsp;
                </td>
                <td>
                    <input type="checkbox" class="check_all_btn">
                </td>
                <td colspan="3">
                    <span class="label label-default">
                        {{ trans('firefly.end_of_reconcile_period', {period: end.isoFormat(monthAndDayFormat) }) }}
                    </span>
                </td>
                <td colspan="2">
                    &nbsp;
                </td>
            </tr>
            {% set endSet = true %}
        {% endif %}
        <tr data-date="{{ journal.date.format('Y-m-d') }}" data-id="{{ journal.transaction_journal_id }}">
            <td class="hidden-xs">
                <div class="btn-group btn-group-xs">
                    <a href="{{ route('transactions.edit', [journal.transaction_group_id]) }}" class="btn btn-xs btn-default"><span
                                class="fa fa-fw fa-pencil"></span></a>
                    <a href="{{ route('transactions.delete', [journal.transaction_group_id]) }}" class="btn btn-danger"><span
                                class="fa fa-trash"></span></a>
                </div>

            </td>

            <!-- icon -->
            <td class="hidden-xs">
                {% if journal.transaction_type_type == 'Withdrawal' %}
                    <span class="fa fa-long-arrow-left fa-fw" title="{{ trans('firefly.Withdrawal') }}"></span>
                {% endif %}

                {% if journal.transaction_type_type == 'Deposit' %}
                    <span class="fa fa-long-arrow-right fa-fw" title="{{ trans('firefly.Deposit') }}"></span>
                {% endif %}

                {% if journal.transaction_type_type == 'Transfer' %}
                    <span class="fa fa-exchange fa-fw" title="{{ trans('firefly.Transfer') }}"></span>
                {% endif %}

                {% if journal.transaction_type_type == 'Reconciliation' %}
                    <span class="fa-fw fa fa-calculator" title="{{ trans('firefly.reconciliation_transaction') }}"></span>
                {% endif %}
                {% if journal.transaction_type_type == 'Opening balance' %}
                    <span class="fa-fw fa fa-star-o" title="{{ trans('firefly.Opening balance') }}"></span>
                {% endif %}
            </td>

            <!-- description -->
            <td>
                <a href="{{ route('transactions.show', [journal.transaction_group_id]) }}" title="{{ journal.description }}">
                    {% if journal.group_title %}
                        <span class="text-muted"><span class="fa fa-fw fa-share-alt" aria-hidden="true"></span></span> {{ journal.group_title }}:
                    {% endif %}
                    {{ journal.description }}</a>
            </td>

            <td style="text-align: right;">
                <span style="margin-right:5px;">
                    {{ formatAmountBySymbol(journal.amount, journal.currency_symbol, journal.currency_decimal_places) }}
                {% if null != journal.foreign_amount %}
                    ({{ formatAmountBySymbol(journal.foreign_amount, journal.foreign_currency_symbol, journal.foreign_currency_decimal_places) }})
                {% endif %}
                </span>
            </td>

            <td>
                {% if journal.date >= start and journal.date <= end  %}
                    {% if journal.reconciled %}
                        <span class="fa fa-check" aria-hidden="true"></span>
                        <input type="hidden" name="cleared[]" data-younger="{% if journal.date < start %}true{% else %}false{% endif %}"
                        data-inrange="{% if journal.date >= start and journal.date <= end  %}true{% else %}false"{% endif %}"
                        class="cleared" data-id="{{ journal.transaction_journal_id }}" value="{{ journal.amount }}">
                    {% else %}
                        <input type="checkbox" name="reconciled[]"
                               data-younger="{% if journal.date < start %}true{% else %}false{% endif %}"
                        data-inrange="{% if journal.date >= start and journal.date <= end  %}true{% else %}false"{% endif %}"
                        {% if currency.id == journal.currency_id %}value="{{ journal.amount }}"{% endif %}
                        {% if currency.id == journal.foreign_currency_id %}value="{{ journal.foreign_amount }}"{% endif %}
                         data-id="{{ journal.transaction_journal_id }}" disabled class="reconcile_checkbox">
                    {% endif %}
                {% else %}
                    <!-- if not in range, just show reconciliation status -->
                    {% if journal.reconciled %}
                        <span class="fa fa-check" aria-hidden="true"></span>
                    {% else %}
                        <!--TODO include icon -->
                    {% endif %}

                {% endif %}

            </td>

            <td class="hidden-sm hidden-xs">
                {{ journal.date.isoFormat(monthAndDayFormat) }}
            </td>

            <td class="hidden-xs hidden-sm hidden-md">
                <a href="{{ route('accounts.show', [journal.source_account_id]) }}" title="{{ journal.source_account_iban|default(journal.source_account_name) }}">{{ journal.source_account_name }}</a>
            </td>

            <td class="hidden-xs hidden-sm hidden-md">
                <a href="{{ route('accounts.show', [journal.destination_account_id]) }}" title="{{ journal.destination_account_iban|default(journal.destination_account_name) }}">{{ journal.destination_account_name }}</a>
            </td>
            {#
            <td class="hidden-xs">
                {{ transaction|transactionBudgets }}
            </td>
            <td class="hidden-xs">
                {{ transaction|transactionCategories }}
            </td>
            #}
        </tr>

    {% endfor %}

    {# if the start marker has not been generated yet, do it now, at the end of the loop. #}
    {% if startSet == false %}
        <tr>
            <td colspan="5">
                &nbsp;
            </td>
            <td colspan="3">
                <span class="label label-default">
                    {{ trans('firefly.start_of_reconcile_period', {period: start.isoFormat(monthAndDayFormat) }) }}
                </span>
            </td>
            <td colspan="2">
                &nbsp;
            </td>
        </tr>
        {% set startSet = true %}
    {% endif %}
    </tbody>
</table>
