{% if not error %}
    <div class="d-flex justify-content-center align-items-center w-100 mt-5">
        <div class="p-3 border rounded">


            <div class="row row-cols-2 row-cols-xl-5 row-cols-lg-4 row-cols-md-3 g-3">
                {% for d in data %}
                    <div class="col">
                        <div class="card rounded">
                            <div class="border-bottom">
                                <a href="{{ server_url }}/uploads/{% if d.type == 'image' %}large/{% else %}data/{% endif %}{{ d.bezeichnung }}"
                                   target="_blank">
                                    <img class="img-fluid rounded-top"
                                         src="{{ server_url }}/uploads/{% if d.type == 'image' %}thumb/{% else %}data/{% endif %}{{ d.bezeichnung }}"
                                         alt="">
                                </a>
                            </div>
                            <div class="card-body">
                                {{ d.sizeFormat }}
                            </div>

                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% if pagination %}{% endif %}
    <div class="pagination-media-wrapper pt-5">
        <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-center">
                <li class="page-item">
                    <button data-page="{{ 1 }}" data-type="get_api_media" data-toggle="0" class="btn-action page-link"
                            {% if page == 1 %}disabled{% endif %}>
                        <i class="bi bi-chevron-double-left"></i>
                    </button>
                </li>
                <li class="page-item">
                    <button data-page="{{ page -1 }}" data-type="get_api_media" data-toggle="0"
                            class="btn-action page-link"{% if not pagination.previous %} disabled{% endif %}>
                        <i class="bi bi-chevron-left"></i>
                    </button>
                </li>
                {% for  i in 1..pagination.items %}
                    <li class="page-item">
                        <button data-page="{{ loop.index }}" data-type="get_api_media" data-toggle="0"
                                class="btn-action page-link{% if loop.index == page %} active{% endif %}"
                                {% if loop.index == page %}aria-current="page" disabled{% endif %}
                        >
                            {{ loop.index }}
                        </button>
                    </li>
                {% endfor %}
                <li class="page-item">
                    <button data-page="{{ page + 1 }}" data-type="get_api_media" data-toggle="0"
                            class="btn-action page-link" {% if not pagination.next %} disabled{% endif %}>
                        <i class="bi bi-chevron-right"></i>
                    </button>
                </li>
                <li class="page-item">
                    <button data-page="{{ pagination.items }}" data-type="get_api_media" data-toggle="0"
                            class="btn-action page-link" {% if page == pagination.items %} disabled{% endif %}>
                        <i class="bi bi-chevron-double-right"></i>
                    </button>
                </li>
            </ul>
        </nav>
    </div>
{% else %}
    <div class="d-flex justify-content-center align-items-center w-100 mt-5">
        <div class="p-3 border rounded text-center col-xl-6 col-lg-8 col-12">
            <h5 class=" text-danger">
                <i class="bi bi-exclamation-triangle me-1"></i>
                {{ error.error_title }}
            </h5>
            <p class="text-danger">{{ error.description }}</p>
        </div>
    </div>
{% endif %}