{% extends "base.html.twig" %}
{% block BeforeAnyCSSFile %}
    {% for file in encore_entry_css_files('select2__init') %}
        <link rel="stylesheet" href="{{ assetsBasePath~file }}">
    {% endfor %}
    {% for file in encore_entry_css_files('dateRangepicker__init') %}
        <link rel="stylesheet" href="{{ assetsBasePath~file }}">
    {% endfor %}
{% endblock %}
{% set pagename = 'Guardians' | trans %}
{% set addBtnTitle = 'Add new Guardian?' | trans %}
{% set addBtnLink = path('add_guardian') %}

{% block MainContent %}
    {# List of the students #}
    <div class="kt-portlet">
        {# list of student #}
        <div class="kt-portlet__body">
            <div class="kt-section">
                <div class="kt-section__content">
                    <table class="table table-striped table-bordered">
                        <thead>
                        <tr>
                            <th>{{ 'Name'|trans }}</th>
                            <th>{{ 'Students'|trans }}</th>
                            <th>{{ 'Phone'|trans }}</th>
                            <th>{{ 'Email'|trans }}</th>
                            <th>{{ 'Relation Ship'|trans }}</th>
                            <th>{{ 'Gender'|trans }}</th>
                            <th>{{ '#'|trans }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for guardian in guardians %}
                            {% set class = '' %}
                            {% if guardian.getIsDeleted %}
                                {% set class = 'bg-inactive' %}
                            {% endif %}
                            <tr class="{{ class }}">
                                <td>{{ guardian.getFullName }}</td>
                                <td>
                                    {% for student in guardian.getStudentReference.toArray %}
                                        <a target="_blank"
                                           href="{{ path('users_profile', {'id' : student.id | urlencrypt}) }}">{{ student.getFullName }}</a>
                                        <br>
                                    {% endfor %}
                                </td>
                                <td>{{ guardian.getPhone }}</td>
                                <td>{{ guardian.getEmail }}</td>
                                <td>{{ guardian.getGuardianRelationInWords }}</td>
                                <td>{% if guardian.gender == 1 %}<i
                                            class="fa fa-male"></i>{% elseif guardian.gender == 2 %}<i
                                            class="fa fa-female"></i>{% else %}<i class="fa fa-male"></i> - <i
                                            class="fa fa-female"></i>{% endif %}</td>
                                <td>
                                    <a data-toggle="dropdown" class="btn btn-sm btn-clean btn-icon btn-icon-md"
                                       aria-expanded="false">
                                        <i class="fa fa-ellipsis-h"></i>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right dotedDropdown"
                                         x-placement="bottom-end">
                                        <ul class="kt-nav" data-targetRef="{{ guardian.id }}">
                                            <li class="kt-nav__item"><a class="kt-nav__link"
                                                                        href="{{ path('users_profile', {'id':guardian.id | urlencrypt, 'userFrom' : 'guardianTable'  }) }}"><i
                                                            class="kt-nav__link-icon flaticon-edit-1"></i><span
                                                            class="kt-nav__link-text">{{ 'Edit'|trans }}</span></a></li>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{# extra js codes here.#}
{% block ExtraJsFIles %}
    {% for file in encore_entry_js_files('UserList') %}
        <script src="{{ assetsBasePath ~ file }}" type="text/javascript"></script>{% endfor %}
    {% for file in encore_entry_js_files('select2__init') %}
        <script src="{{ assetsBasePath ~ file }}" type="text/javascript"></script>{% endfor %}{% for file in encore_entry_js_files('dateRangepicker__init') %}
    <script src="{{ assetsBasePath ~ file }}" type="text/javascript"></script>{% endfor %}
{% endblock %}

{% block documentation %}
    <h5><b>Guardians</b></h5>
    <br />

    <p>Here will see the List of All Guardians & the Details of Students who are attached to the Guardian, The Detail information, that we see </p>
    <ul>
        <li><b>Guardian Name</b> - Name of Guardian</li>
        <li><b>Students</b> - How many & whom Students are connected to this Guardian</li>
        <li><b>Phone</b> - Guardian Phone, in case of any emergency or send Invoice alerts</li>
        <li><b>Email</b> - Guardian Email, To send invoice & student detailed reports</li>
        <li><b>RelationShip</b> - What Relation this Guardian have with Student</li>
        <li><b>Gender</b> - What is the Gender of Guardian</li>
    </ul>

    <h5><b>How to Add Guardian</b></h5>
    <br>
    <p>To Add New Guaridan, You've to Click on the Add Guardian button which behind the Documentation Button</p>

{% endblock %}