{# FIXME: Q&D way to add a CSS from node_modules, it should be imported directly with the python module #}
{{ css_files.append(build_path+"node_modules/swiper/swiper-bundle.min.css") or "" }}
{% extends 'base/base.html' %}
{% import 'components/avatar.html' as avatar with context %}
{% import 'input/textbox.html' as textbox with context %}
{% import 'blog/macros.html' as blog with context %}

{% block body %}
{{ icon_defs('comment-empty', 'trash-empty') }}

{% if directory_affiliation == 'owner' %}
    <div class="content has-items-centered is-flex my-4">
        {{ component.action_button("#", label=_("manage invitations"), icon="group", id="button_manage") }}
    </div>
{% else %}
    <article id="hint" class="message is-info my-4">
        <div class="message-header">
            <p>{% trans %}hint{% endtrans %}</p>
            <button class="delete click_to_delete" aria-label="delete"></button>
        </div>
        <div class="message-body">
            {% trans %}You can click on any picture to start a slideshow{% endtrans %}
        </div>
    </article>
{% endif %}
<div id="album_items" class="columns album is-multiline mt-4">
    {% set ns_photos = namespace(empty=true) %}
    {% for file in files_data %}
        {% if file.type == C.FILE_TYPE_FILE %}
        {% set ns_photos.empty = false %}
            {% include 'photo/item.html' %}
        {% endif %}
    {% endfor %}
</div>

{% if directory_affiliation == 'owner' %}
    <div id="file_drop" class="box column has-border-dashed has-border-grey-light is-hidden-touch">
        <div class="has-text-weight-bold has-text-centered has-text-grey-light is-size-3">
            {% trans %}
            Drop photos here
            {% endtrans %}
        </div>
    </div>
    <h2 class="title is-4 has-text-centered is-hidden-touch">OR</h2>
    <div class="file is-large is-boxed is-centered">
        <label class="file-label">
            <input id="file_input" class="file-input" type="file" accept="image/*,video/*" name="photos_upload" multiple>
            <span class="file-cta">
                <span class="file-icon is-marginless">
                    <i class="icon-upload"></i>
                </span>
                <span class="file-label">
                    {% trans %}
                        Select photos to upload…
                    {% endtrans %}
                </span>
            </span>
        </label>
    </div>
    <div id="list" class="column"></div>
{% endif %}
{% endblock body %}