<a
    href="{{ parentDir ? parent_dir(path) : url(file.getPathname) }}"
    class="flex flex-col items-center rounded-lg font-mono group hover:bg-gray-200 hover:shadow"
>
    <div class="flex justify-between items-center p-4 w-full">
        <div class="pr-2">
            {% if parentDir %}
                <i class="fas fa-level-up-alt fa-fw fa-lg"></i>
            {% else %}
                {{ icon(file) | raw }}
            {% endif %}
        </div>

        <div class="flex-1 truncate">
            {{ parentDir ? '..' : file.getRelativePathname }}
        </div>

        {% if file.isFile %}
            <div class="ml-2">
                <button
                    title="{{ translate('file.info') }}"
                    class="flex justify-center items-center rounded-full p-2 -m-1 md:invisible hover:bg-gray-400 hover:shadow group-hover:visible"
                    v-on:click.prevent="showFileInfo('{{ file.getPathname | escape('js') }}')"
                >
                    <i class="fas fa-info-circle"></i>
                </button>
            </div>
        {% endif %}

        <div class="hidden whitespace-no-wrap text-right mx-2 w-1/6 sm:block">
            {% if parentDir or file.isDir %}
                    —
            {% else %}
                {{ sizeForHumans(file) }}
            {% endif %}
        </div>

        <div class="hidden whitespace-no-wrap text-right truncate ml-2 w-1/4 sm:block">
            {{ parentDir ? '—' : file.getMTime | date }}
        </div>
    </div>
</a>
