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

{% block title %}Users list{% endblock %}

{% block body %}

    {{ form_start(filters) }}

<div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-end">


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

        {{ form_label(filters.name) }}

        {{ form_widget(filters.name) }}

    </div>

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

        {{ form_label(filters.email) }}

        {{ form_widget(filters.email) }}

    </div>

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

        {{ form_label(filters.phone) }}

        {{ form_widget(filters.phone) }}

    </div>

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

        {{ form_label(filters.registerDateFrom) }}

        {{ form_widget(filters.registerDateFrom) }}

    </div>

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

        {{ form_label(filters.registerDateTo) }}

        {{ form_widget(filters.registerDateTo) }}

    </div>

    <div class="form-group d-flex">

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

        <a data-toggle="tooltip" title="Clear"
           href="{{ path(app.request.get('_route'),app.request.attributes.get('_route_params')) }}"
           class="btn btn-icon btn-secondary"><i class="la la-trash"></i></a>

    </div>

</div>

{{ form_end(filters) }}

<div class="card card-custom card-border gutter-b">
    <div class="card-header border-0 py-5">
        <h3 class="card-title align-items-start flex-column">
            <span class="card-label font-weight-bolder text-dark">Users</span>
            <span class="text-muted mt-3 font-weight-bold font-size-sm">List of all users</span>
        </h3>
        <div class="card-toolbar">
            <a href="{{ path('users_create') }}" class="btn btn-info font-weight-bolder font-size-sm"><i class="flaticon2-user
 text-white"></i>Create</a>
        </div>
    </div>

    <div class="card-body py-0">
        <div class="table-responsive">
            <table class="table table-head-custom table-vertical-center" id="kt_advance_table_widget_2">
                <thead>
                    <tr>
                        <th style="max-width: 150px;">Name</th>
                        <th style="width: 300px;">Email</th>
                        <th>Country</th>
                        <th>City</th>
                        <th>Phone</th>
                        <th style="min-width: 110px;">Created On</th>
                        <th style="min-width: 100px;" class="text-right">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for user in users %}
                    <tr>
                        <td>
                            <a class="text-dark-75 font-weight-bolder text-hover-primary font-size-lg"
                               href="{{ path('users_show', {token: user.token}) }}">
                                {{ user.first_name|default }} {{ user.last_name|default }}
                            </a>
                        </td>
                        <td>
                            <a class="text-info font-weight-bolder font-size-sm"
                               href="{{ path('users_show', {token: user.token}) }}">
                                {{ user.email| default }}
                            </a>
                        </td>
                        <td class="text-uppercase">{{ user.country| default }}</td>
                        <td>{{ user.city| default }}</td>
                        <td>{{ user.phone ?? user.mobile_phone | default }}</td>
                        <td>
                                 <span class="text-dark-75 font-weight-bolder d-block font-size-lg">
                                     {{ user.registration_date |date('d-m-Y')| default }}
                                </span>
                            <span class="text-muted font-weight-bold">
                                    {{ user.registration_date |date('H:i')| default }}
                                </span>
                        </td>
                        <td class="text-right">
                            <a data-toggle="tooltip" title="Edit" href="{{ path('users_update',{token:user.token}) }}"
                               class="btn btn-sm btn-warning"><i class="flaticon-edit text-white p-0"></i></a>
                            <a data-toggle="tooltip"
                               title="{{ user.is_blocked == false ? 'Block' : 'Blocked'}}"
                                    {{ user.is_blocked == false ? 'href=' ~ path('users_block_unblock',{token:user.token, block: 1}) : 'disabled=true' }}
                               class="btn btn-sm {{  user.is_blocked == false ? ' btn-danger' : ' btn-disabled' }}">
                                <i class="flaticon-circle text-white p-0"></i>
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="d-flex justify-content-center">
    {{ knp_pagination_render(users) }}
</div>

{% endblock %}
{% block js %}

    <script src="{{ asset('assets/js/bootstrap-datepicker.js') }}"></script>

    <script type="text/javascript">
        $('#user_filter_registerDateFrom').datepicker({format: 'yyyy-mm-dd'});
        $('#user_filter_registerDateTo').datepicker({format: 'yyyy-mm-dd'});
    </script>


{% endblock %}