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

{% block title %}Transactions{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{{ asset('css') }}">
{% endblock %}

{% block body %}


    {{ form_start(filters) }}

    <div class="d-flex mb-3 mt-5">


        <div class="mr-2 form-group">

            {{ form_label(filters.trnType) }}

            {{ form_widget(filters.trnType) }}

        </div>

        <div class="mr-2 form-group">

            {{ form_label(filters.startDate) }}

            {{ form_widget(filters.startDate) }}

        </div>

        <div class="mr-2 form-group">

            {{ form_label(filters.endDate) }}

            {{ form_widget(filters.endDate) }}

        </div>

        <div class="ml-auto  mt-4 form-group d-flex align-items-center">

            <button class="btn btn-primary mr-3">Filter</button>


            <a href="{{ path(app.request.get('_route'),app.request.attributes.get('_route_params')) }}"
               class="btn btn-warning">Clear</a>

            <div class="ml-5">

                {#                    <a class="btn btn-outline-info" data-toggle="tooltip" title="Export Excel"#}
                {#                       href="{{ path('transactions_export',app.request.query.all()) }}">#}

                {#                        <i class="fas fa-file-excel"></i>#}

                {#                    </a>#}

            </div>

        </div>

    </div>

    {{ form_end(filters) }}

    {% include 'transactions/_partials/trn-table.html.twig' %}



{% endblock %}

{% block javascripts %}

    <script src="{{ asset('js/pages/crud/forms/widgets/bootstrap-datepicker.min.js') }}"></script>

    <script>
        $('#trn_filter_startDate').datepicker();
        $('#trn_filter_endDate').datepicker();
    </script>
{% endblock %}