{% extends 'VGMWOBundle::layout.html.twig' %}
{% block jumbotron_content %}
    <div class="jumbotron" style="padding-top: 10px; padding-bottom: 5px;"  id="jumbotron">
        <div class="container-fluid">
            <div class="col-md-12 text-center" style="padding-left: 0px;">
                <H3 style="margin: 0px;"><strong>Departments</strong></H3>
            </div>
        </div>
    </div>
{% endblock %}
{% block content%}
    <div class="container" style="min-height: 500px;">
        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead>
                <tr>
                    <th class="col-md-2">Name</th>
                    <th class="col-md-4">Supervisor</th>
                    <th class="col-md-5">Description</th>
                    <th class="col-md-1">Created at</th>
                </tr>
                </thead>
                <tbody>
                {% for entity in entities %}
                    <tr style="cursor: pointer;"
                        onclick="location.href='{{ path('vgm_departments_edit', {'id': entity.getId()} ) }}'">
                        <td>{{ entity.name }}</td>
                        <td>
                            {% if entity.supervisors|length != 1 %}
                                {{ entity.supervisors|length }}
                            {% else %}
                                {% for sup in entity.supervisors %}
                                    {{ sup }}
                                {% endfor %}
                            {% endif %}
                        </td>
                        <td>{{ entity.description }}</td>
                        <td>{% if entity.createdat %}{{ entity.createdat|date('m/d/Y') }}{% endif %}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            <div class="container-fluid">
                <div class="col-md-3 text-muted text-left">
                    <strong>{{ cant_departments }}</strong> registered departments
                    {% if last_page > 1 %}
                        - page <strong>{{ current_page }}/{{ last_page }}</strong>
                    {% endif %}
                </div>
                <div class="col-md-6 text-center">
                    {% if last_page > 1 %}
                        {% if current_page > 1 %}
                            <a href="{{ path('vgm_departments', { 'page': 1 }) }}" >
                                <span class="glyphicon glyphicon-step-backward "
                                      alt="First page" title="First page"/>
                            </a>

                            <a href="{{ path('vgm_departments', { 'page': previous_page }) }}">
                                <span class="glyphicon glyphicon-backward" alt="Previous page" title="Previous page" />
                            </a>
                        {% endif %}

                        {% for page in 1..last_page %}
                            {% if page == current_page %}
                                {{ page }}
                            {% else %}
                                <a href="{{ path('vgm_departments', { 'page': page }) }}">{{ page }}</a>
                            {% endif %}
                        {% endfor %}

                        {% if last_page > current_page %}
                            <a href="{{ path('vgm_departments', { 'page': next_page }) }}">
                                <span class="glyphicon glyphicon-forward" alt="Next page" title="Next page" />
                            </a>

                            <a href="{{ path('vgm_departments', { 'page': last_page }) }}">
                                <span class="glyphicon glyphicon-step-forward" alt="Last page" title="Last page" />
                            </a>
                        {% endif %}
                    {% endif %}
                </div>
                <div class="col-md-3 text-right">
                    <a href="{{ path('vgm_departments_new') }}">
                        <span class="glyphicon glyphicon-plus-sign"></span>
                        Create
                    </a>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
        // Activates knockout.js
        ////ko.applyBindings(baseViewModel, document.getElementById("menu-bar"));
    </script>
{% endblock %}