<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <% if (data.ancestors.length) { %>
        <title><%= data.dir.name %> - <%= data.opts.serverName %></title>
        <meta property="og:site_name" content="<%= data.ancestors.map(e => e.name).join(' > ') %>" />
    <% } else { %>
        <title><%= data.opts.serverName %></title>
        <meta property="og:site_name" content="<%= data.opts.serverName %>" />
    <% } %>
    <meta property="og:title" content="<%= data.dir.name %>" />
    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f2f2f2" />
    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1a1a1a" />
    <link rel="icon" href="">
    <!-- CSS -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,1,0" />
    <link href="?expressFileIndexAsset=base.css" rel="stylesheet">
    <link href="?expressFileIndexAsset=index.css" rel="stylesheet">
    <!-- JS -->
    <script src="https://cdn.jsdelivr.net/npm/marked@15/lib/marked.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dompurify@3/dist/purify.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@1/dist/axios.min.js"></script>
    <script src="?expressFileIndexAsset=prism.js" data-manual></script>
    <script src="?expressFileIndexAsset=base.js"></script>
    <script src="?expressFileIndexAsset=index.js" defer></script>
</head>
<body data-can-folders-download="<%= data.opts.allowZipDownloads %>" data-default-sort-type="<%= data.opts.defaultFileSortType %>" data-default-sort-order="<%= data.opts.defaultFileSortOrder %>">
    <script>
        const setColorMode = () => {
            const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
            document.body.dataset.colorMode = isDarkMode ? 'dark' : 'light';
            const iconMeta = document.querySelector('link[rel="icon"]');
            if (iconMeta) {
                iconMeta.setAttribute('href', `?expressFileIndexAsset=icon-${isDarkMode ? 'light' : 'dark'}.png`);
            }
        };
        setColorMode();
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', setColorMode);
    </script>
    <div class="container">
        <div class="header">
            <% if (data.ancestors.length) { %>
                <div class="ancestors">
                    <% for (const ancestor of data.ancestors) { %>
                        <a href="<%= ancestor.path %>" class="link"><%= ancestor.name %></a>
                        <span class="sep">/</span>
                    <% } %>
                </div>
            <% } %>
            <div class="title"><%= data.dir.name %></div>
            <div class="actions">
                <button id="btnShareDir" class="btn" title="Copy the link to this folder">
                    <span class="icon">link</span>
                    <span class="label">Copy link</span>
                </button>
                <button id="btnSort" class="btn secondary" title="Change file sort order...">
                    <span class="icon">sort</span>
                    <span class="label">Sort...</span>
                </button>
                <% if (data.opts.allowZipDownloads) { %>
                    <a href="?format=zip" class="btn secondary square" download title="Download this folder as zip">
                        <span class="icon">download</span>
                    </a>
                <% } %>
                <% if (data.opts.allowJsonRequests) { %>
                    <a href="?format=json" class="btn secondary square" title="View this index as JSON">
                        <span class="icon">code</span>
                    </a>
                <% } %>
            </div>
        </div>
        <div class="files">
            <div class="colHeaders">
                <div class="icon"></div>
                <div class="name">
                    <span>Name</span>
                    <% if (data.sortType == 'name') { %>
                        <span class="icon"><%= data.sortOrder == 'asc' ? 'keyboard_arrow_down' : 'keyboard_arrow_up' %></span>
                    <% } %>
                </div>
                <div class="modified">
                    <span>Modified</span>
                    <% if (data.sortType == 'modified') { %>
                        <span class="icon"><%= data.sortOrder == 'asc' ? 'keyboard_arrow_down' : 'keyboard_arrow_up' %></span>
                    <% } %>
                </div>
                <div class="size">
                    <span>Size</span>
                    <% if (data.sortType == 'size') { %>
                        <span class="icon"><%= data.sortOrder == 'asc' ? 'keyboard_arrow_down' : 'keyboard_arrow_up' %></span>
                    <% } %>
                </div>
            </div>
            <div id="fileEntries" class="entries">
                <% for (const file of data.files) { %>
                    <a class="entry" href="<%= file.path + (!file.isDirectory && data.opts.fileSelectAction == 'render' ? '?format=render' : '') %>" data-json="<%= JSON.stringify(file) %>" <%= (!file.isDirectory && data.opts.fileSelectAction == 'download') ? 'download' : '' %>>
                        <div class="icon material-symbols <%= file.type %>"><%= file.icon %></div>
                        <div class="name" title="<%= file.name %>">
                            <span><%= file.name %></span>
                            <% if (file.modified && file.size) { %>
                                <span class="nameLore">
                                    <span><%= data.opts.useRelativeTimes ? file.modifiedRelative : file.modifiedHuman %></span>
                                    <span>•</span>
                                    <span><%= file.sizeHuman %></span>
                                </span>
                            <% } %>
                        </div>
                        <div class="modified" title="<%= new Date(file.modified) %>"><%= data.opts.useRelativeTimes ? file.modifiedRelative : file.modifiedHuman %></div>
                        <div class="size" title="<%= file.size %> bytes"><%= file.sizeHuman %></div>
                    </a>
                <% } %>
            </div>
        </div>
        <div id="showMoreCont" style="display: none;">
            <button id="showMore" class="btn">
                <span class="icon">expand_more</span>
                <span class="label">Show all <%= data.files.length %> files</span>
            </button>
        </div>
        <div id="readme" style="display: none;">
            <div class="top">
                <span class="icon">menu_book</span>
                <span>README.md</span>
            </div>
            <div class="body">
            </div>
        </div>
        <div class="footer">
            <%
                let counts = {
                    files: data.files.filter(f => !f.isDirectory).length,
                    dirs: data.files.filter(f => f.isDirectory).length
                }
            %>
            Processed <%= counts.dirs == 1 ? '1 directory' : `${counts.dirs} folders` %> and <%= counts.files == 1 ? '1 file' : `${counts.files} files` %> in <%= data.processTimeMs %> ms
            <br>Provided by <a href="https://www.npmjs.com/package/express-file-index">express-file-index</a> v<%= data.packageVersion %>
            <br>Node.js <%= data.nodejsVersion %> on <%= data.osPlatform %> <%= data.osArch %>
        </div>
    </div>
</body>
</html>