{% extends '@AdminLTE/layout/cfgodd-layout.html.twig' %}

{% block page_title %}{% trans %}contact.title{% endtrans %}{% endblock %}


{% block page_content %}

    {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
        {% block box_body %}
        <div class="row d-flex align-items-stretch">
            {% for user in users %}
            <div class="col-12 col-sm-6 col-md-4 d-flex align-items-stretch">
                <div class="card bg-light">
                    <div class="card-header text-muted border-bottom-0">
                        {% if user.direction %}
                            {{user.direction.ministry.name}}
                        {% else %}
                            Commune de {{user.commune.name}}
                        {% endif %}
                    </div>
                    <div class="card-body pt-0">
                        <div class="row">
                            <div class="col-7">
                                <h2 class="lead"><b>{{ user.givenName }} {{ user.familyName }}</b></h2>
                                <p class="text-muted text-sm"><b>{% trans %}basics.title{% endtrans %}:</b> {{ user.office }} {% if user.direction %} ({{ user.direction.code }}) {% endif %}</p>
                                <ul class="ml-4 mb-0 fa-ul text-muted">
                                    <li class="small"><span class="fa-li"><i class="fas fa-lg fa-phone"></i></span> {{ user.telephone }}</li>
                                    <li class="small"><span class="fa-li"><i class="fas fa-lg fa-envelope"></i></span> {{ user.email }}</li>
                                </ul>
                            </div>
                            <div class="col-5 text-center">
                                {% import "@AdminLTE/Macros/default.html.twig" as macro %}
                                {{ macro.avatar(user.avatar, user.username, 'img-circle img-fluid') }}
                                <img src="../../dist/img/user2-160x160.jpg" alt="" class="img-circle img-fluid">
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="text-right">
                            <a href="#" class="btn btn-sm bg-teal">
                                <i class="fas fa-comments"></i>
                            </a>
                            <a href="#" class="btn btn-sm btn-primary">
                                <i class="fas fa-user"></i> View Profile
                            </a>
                        </div>
                    </div>
                </div>
              </div>
            {% endfor %}
        </div>
        {% endblock %}
        
    {% endembed %}
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('plugins/datatables/French.json') }}"></script>
    <script>
        $(function () {
            $("#contactTable").DataTable({
                "pageLength": 25,
                "language": {
                    "url": "{{ asset('plugins/datatables/French.json') }}"
                }
            });
        });
    </script>

    <script src="{{ asset('plugins/datatables/jquery.dataTables.js') }}"></script>
    <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.js') }}"></script>
{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.css') }}">
    
{% endblock %}