{% if data|first['data']|length == 0 %}
    <div class="alert alert-info" role="alert">
        <h5><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
        <p>
            Es wurden noch keine Dateien hochgeladen.
        </p>
    </div>
{% else %}
    <div id="gridAccordion-{{ rand }}">
    {% for project in data %}

        {% if project['title'] is not empty %}
            <div class="accordion" id="accordion{{ project['id'] }}">
        {% endif %}
            <div class="card m-0 p-0 mw-100 {% if project['title'] is empty %}border-0{% endif %}">
                {% if project['title'] is not empty %}
                    <div class="card-header py-1" id="accordion{{ project['id'] }}-heading">
                        <h4 class="mb-0 mt-0 d-flex align-items-baseline">
                            <button class="btn btn-link" type="button" data-toggle="collapse"  data-target="#accordion{{ project['id'] }}-grid"
                                aria-expanded="{% if loop.first %}true{% else %}false{% endif %}" aria-controls="accordion{{ project['id'] }}-grid">
                                <i class="fas fa-plus ts-accordion-plus"></i>{{ project['title'] }}
                            </button>
                            {% if view != 'my' %}<span class="text-muted" style=" font-size: 1rem;">{{ usernames[project['userid']] }}</span>{% endif %}
                        </h4>
                    </div>
                    <div id="accordion{{ project['id'] }}-grid" class="collapse {% if loop.first %}show{% endif %}" aria-labelledby="accordion{{ project['id'] }}-heading" data-parent="#gridAccordion-{{ rand }}">
                {% endif %}
                <div class="row">
                    {% for savepoint in project['data'] %}
                        {% if savepoint[uploadfieldid] is defined and savepoint[uploadfieldid].getData() is not empty %}
                            <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 m-0 p-2">
                                <div class="card h-100 mb-0 d-flex">
                                    {% if view == "my" or (view == "all" and user_is_admin) %}
                                        <div class="card-header d-flex justify-content-end p-1">
                                            <button class="btn btn-danger media-grid-delete" data-dataid="{{ savepoint[uploadfieldid].getDataId() }}" data-fileid="{{ savepoint[uploadfieldid].getData() }}" title="Datei löschen">
                                                <i class="fas fa-trash-alt" style="font-size: 20px"></i>
                                            </button>
                                        </div>
                                    {% endif %}
                                    <img src="{{defaultimage}}" class="card-img-top mb-0 p-1 media-grid-open-modal cursor-pointer">
                                    {% if titlefieldid is not empty and savepoint[titlefieldid] is defined or descfieldid is not empty and savepoint[descfieldid] is defined%}
                                        <div class="card-body media-grid-open-modal cursor-pointer">
                                            {% if savepoint[titlefieldid] is defined %}
                                                <h5 {% if savepoint[descfieldid] is not defined %}class="mb-0"{% endif %}>{{ savepoint[titlefieldid].getData() }}</h5>
                                            {% endif %}
                                            {% if savepoint[descfieldid] is defined %}
                                                <p class="mb-0">
                                                    {% if savepoint[descfieldid].getData()|length > 25 %}
                                                        {{ savepoint[descfieldid].getData()|slice(0, 25) }}...
                                                    {% else %}
                                                        {{ savepoint[descfieldid].getData() }}
                                                    {% endif %}
                                                </p>
                                            {% endif %}
                                        </div>
                                    {% endif %}                                    
                                    <div class="card-footer mt-auto d-flex justify-content-between align-items-stretch flex-column">
                                        <small class="w-100">Hochgeladen am {{weekdays[savepoint|first.getSaveDate()|date("w")] }}, {{ savepoint|first.getSaveDate()|date("j.n.Y \\u\\m G:i") }} Uhr von {{ usernames[savepoint[uploadfieldid].getUserId()] }}</small>
                                        <div class="w-100 mt-3 d-flex justify-content-between">
                                            <button class="btn btn-primary media-grid-download" data-fileid="{{ savepoint[uploadfieldid].getData() }}"><i class="fas fa-file-download" style="font-size: 20px"></i></button>
                                            <button class="btn btn-primary media-grid-button" 
                                                        data-modalid="mediagrid-modal-{{rand}}" 
                                                        data-fileid="{{ savepoint[uploadfieldid].getData() }}" 
                                                        data-defaultimage="{{defaultimage}}"
                                                        data-title="{% if savepoint[titlefieldid] is defined %}{{ savepoint[titlefieldid].getData() }}{% endif %}"
                                                        data-desc="{% if savepoint[descfieldid] is defined %}{{ savepoint[descfieldid].getData() }}{% endif %}"
                                                        data-timestampstring="Hochgeladen am {{weekdays[savepoint|first.getSaveDate()|date('w')] }}, {{ savepoint|first.getSaveDate()|date('j.n.Y \\u\\m G:i') }} Uhr von {{ usernames[savepoint[uploadfieldid].getUserId()] }}">
                                                <i class="fas fa-search-plus" style="font-size: 20px"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
                {% if (view == "my" or (view == "all" and user_is_admin)) and project['title'] is not empty %}
                    <div class="row">    
                        <div class="col-12 p-2 d-flex justify-content-end">
                            <button class="btn btn-danger media-grid-project-delete mr-3" type="button" data-modalid="mediagrid-delete-modal-{{rand}}" data-projectname="{{ project['title'] }}" data-uploadfieldid="{{ uploadfieldid }}" data-projectfieldid="{{ projectfieldid }}" title="Projekt „{{ project['title'] }}“ löschen">Projekt löschen</button>
                        </div>
                    </div>
                {% elseif view == "my" or (view == "all" and user_is_admin) and project['title'] is empty %}
                    <div class="row">    
                        <div class="col-12 p-2 d-flex justify-content-end">
                            <button class="btn btn-danger media-grid-project-delete mr-3" type="button" data-modalid="mediagrid-delete-modal-{{rand}}" data-projectname="" data-uploadfieldid="{{ uploadfieldid }}" data-projectfieldid="{{ projectfieldid }}" title="Alle Dateien löschen">Alle Dateien löschen</button>
                        </div>
                    </div>
                {% endif %}
                {% if project['title'] is not empty %} {# END accordion-x-grid #}
                    </div>
                {% endif %}
            </div> {# END card div #}

        {% if project['title'] is not empty %} {# END accordion-x div #}
            </div>
        {% endif %}
    {% endfor %}
    </div>
    {% include 'forms-media-grid/media-grid-details-modal.html' %}
    {% include 'forms-media-grid/media-grid-delete-modal.html' %}
{% endif %}