<div class="fixed inset-0 flex justify-center items-center bg-gray-800 bg-opacity-50 p-4 z-50 dark:bg-gray-600 dark:bg-opacity-50"
    x-data="fileInfoModal" x-show="visible" @click.self="hide()" @keyup.escape.window="hide()"
    @show-file-info.window="show($event.detail.file)" x-transition:enter.opacity x-cloak
>
    <div x-show="!loading" x-transition:enter @click.away="hide()" class="bg-white rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:text-white">
        <header class="flex justify-between items-center bg-blue-600 p-4 dark:bg-purple-700">
            <i class="fas fa-info-circle fa-lg text-white"></i>

            <div class="items-center text-xl text-white font-mono mx-4" x-text="title"></div>

            <button @click="hide()" class="flex justify-center items-center rounded-full w-6 h-6 text-gray-900 text-opacity-50 text-sm hover:bg-red-700 hover:text-white hover:shadow">
                <i class="fas fa-times"></i>
            </button>
        </header>

        <content class="flex justify-center items-center p-4">
            <div class="overflow-x-auto">
                <p class="font-thin text-2xl text-gray-600 m-4" x-if="error" x-text="error"></p>

                <table x-if="error === undefined" class="table-auto">
                    <tbody>
                        <template x-for="[name, value] in Object.entries(hashes)" :key="name">
                            <tr>
                                <td class="border font-bold px-4 py-2" x-text="name"></td>
                                <td class="border font-mono px-4 py-2" x-text="value"></td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
        </content>
    </div>

    <i class="fas fa-spinner fa-pulse fa-5x text-white" x-show="loading"></i>
</div>
