{% extends '@commons/default.html.twig' %}

{% block scripts_pre_loaded %}
    <script src="{{ asset('/assets/libs/bootstrap-table/bootstrap-table.min.js') }}"></script>
{% endblock %}

{% block content %}
    <div class="demo-charts mdl-color--white mdl-grid mdl-shadow--2dp mdl-cell mdl-cell--6-col-desktop">
        <div class="mdl-card__title mdl-card--expand">
            <h2 class="mdl-card__title-text">Projektübersicht</h2>
        </div>
        <div class="mdl-card__supporting-text mdl-color-text--grey-600">
            <table
                    data-toggle="table"
                    data-filter-control="true"
                    id="project_list"
            >
                <thead>
                <tr>
                    <th data-field="project" data-sortable="true" data-filter-control="input">Projekt</th>
                    <th data-field="project_manager" data-sortable="true" data-filter-control="input">Projektleiter</th>
                </tr>
                </thead>
                <tbody>
                {% for row in table.body %}
                    <tr>
                        {% for td in row %}
                            <td>{{ td }}</td>
                        {% endfor %}
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    <div class="demo-charts mdl-color--white mdl-grid mdl-shadow--2dp mdl-cell mdl-cell--2-col-desktop">
        <div class="mdl-card__title mdl-card--expand">
            <h2 class="mdl-card__title-text">Projekte</h2>
        </div>
        <div class="mdl-card__supporting-text mdl-color-text--grey-600">
            <img src="{{ asset('/assets/img/stats.png') }}" alt="Diagramm" style="max-width: 115px; margin-bottom: 16px;">
            <h5>Gesamt: {{ num_of_projects }}</h5>
        </div>
    </div>
{% endblock %}

{% block scripts_post_loaded %}
    <script src="{{ asset('/assets/libs/bootstrap_extension/filter-control/bootstrap-table-filter-control.min.js') }}"></script>
{% endblock %}