<a
    href="{{ parentDir ? parent_url(path) : file_url(file.getPathname) }}"
    class="flex flex-col items-center rounded-lg font-mono group hover:bg-gray-100 hover:shadow dark:hover:bg-purple-700"
    target="_blank"
>
    <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">

            </div>
        {% endif %}

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

    </div>
</a>
