{% trans_default_domain 'EasyMediaBundle' %}

{# multi #}
<template v-if="bulkItemsFilter.length && enableDelete">
    {# less than 8 items #}
    <template v-if="bulkItemsFilter.length <= 8">
        <div class="media" v-for="one in bulkItemsFilter" :key="one.path">
            <figure class="media-left">
                <span class="icon has-text-link full-height full-width">
                    <icon-types :file="one" :file-type-is="fileTypeIs"/>
                </span>
            </figure>
            <div class="media-content">
                <p class="title is-4">
                    <strong class="has-text-link">{% verbatim %}{{ one.name }}{% endverbatim %}</strong>
                    <small v-if="one.items" class="has-text-link">"{% verbatim %}{{ one.items }}{% endverbatim %} {{ 'items'|trans }}"</small>
                </p>
                <p class="subtitle is-5 has-text-danger" v-if="one.size">{% verbatim %}{{ getFileSize(one.size) }}{% endverbatim %}</p>
            </div>
        </div>
    </template>

    {# more than 8 items #}
    <template v-else>
        <div class="media">
            <figure class="media-left">
                <span class="icon has-text-link full-height full-width">
                    <icon name="archive" scale="1.5"></icon>
                </span>
            </figure>
            <div class="media-content">
                <p class="title is-4">
                    <strong>"{% verbatim %}{{ bulkItemsFilter.length }}{% endverbatim %}"</strong>
                    <small class="has-text-link">{{ 'too_many_files'|trans }}</small>
                </p>
            </div>
        </div>
    </template>
</template>

{# single #}
<template v-else>
    <template v-if="selectedFile">
        <div class="media">
            <figure class="media-left">
                <span class="icon has-text-link full-height full-width">
                    <icon-types :file="selectedFile" :file-type-is="fileTypeIs" :scale="1.8"/>
                </span>
            </figure>
            <div class="media-content">
                <p class="title is-4">
                    <strong class="has-text-link">{% verbatim %}{{ selectedFile.name }}{% endverbatim %}</strong>
                    <small v-if="selectedFile.items" class="has-text-link">
                        "{% verbatim %}{{ selectedFile.items }}{% endverbatim %} {{ 'items'|trans }}"
                    </small>
                </p>
                <p class="subtitle is-5 has-text-danger"  v-if="selectedFile.size">{% verbatim %}{{ getFileSize(selectedFile.size) }}{% endverbatim %}</p>
            </div>
        </div>
    </template>
</template>