{% trans_default_domain 'EasyMediaBundle' %}

<div>
    {# loading data from server #}
    <div id="loading_files" v-show="loading_files">
        <div id="loading_files_anim" data-json="{{ asset('bundles/easymedia/dist/lottie/world.json') }}"></div>

        <transition name="mm-list" mode="out-in">
            <h3 key="1" v-if="showProgress" class="mm-animated pulse">
                {{ 'stand_by'|trans }}
                <strong>{% verbatim %}{{ progressCounter }}{% endverbatim %}</strong>
            </h3>
            <h3 key="2" v-else>{{ 'loading'|trans }}</h3>
        </transition>
    </div>

    {# ajax error #}
    <div id="ajax_error" v-show="ajax_error">
        <div id="ajax_error_anim" data-json="{{ asset('bundles/easymedia/dist/lottie/avalanche.json') }}"></div>
        <h3>{{ 'ajax_error'|trans }}</h3>
    </div>

    {# no files #}
    <v-touch id="no_files"
             v-show="no_files"
             class="no_files"
             @swiperight="goToPrevFolder()"
             @swipeleft="goToPrevFolder()"
             @hold="containerClick($event, 'no_files')"
             @dbltap="containerClick($event, 'no_files')">
        <div id="no_files_anim" data-json="{{ asset('bundles/easymedia/dist/lottie/zero.json') }}"></div>
        <h3>{{ 'no_files_in_folder'|trans }}</h3>
    </v-touch>
</div>