{% 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--4-col mdl-cell--6-col-desktop"
         style="min-width: 650px;">
        <div class="mdl-card__title mdl-card--expand">
            <h2 class="mdl-card__title-text">Archivierte Projekte</h2>
        </div>
        <div class="mdl-card__supporting-text mdl-color-text--grey-600">
            <table
                    id="table"
                    data-toggle="table"
                    data-locale="de-DE"
                    data-pagination="true"
                    data-filter-control="true"
            >
                <thead>
                <tr>
                    <th data-sortable="true" data-field="project" data-filter-control="input">Projekt</th>
                    <th data-field="gross_margin">Aktionen</th>
                </tr>
                </thead>
                <tbody>
                {% for row in projects %}
                    {% set index = loop.index %}
                    <tr>
                        <td>{{ row.label }}</td>
                        {% if not is_admin %}
                            <td>
                                <a href="{{ metadata.links.unarchive }}{{ row.id }}">
                                    <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab"
                                            id="unarchivieren-{{ index }}">
                                        <i class="material-icons">unarchive</i>
                                    </button>
                                </a>
                                <div class="mdl-tooltip" data-mdl-for="unarchivieren-{{ index }}">
                                    Dearchivieren
                                </div>
                            </td>
                        {% endif %}
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}

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