<!doctype html>
<html>
    <head>
        <title>{{.Title}}</title>
        <link rel="stylesheet" href="/static/css/style.css" />
        <script src="/static/js/modal.js" defer></script>
    </head>
    <body>
        <header><a class="logo" href="/">💿 ISOSilo</a></header>
        <main>
            <!-- ISO Info Modal -->
            <div id="isoModal" class="modal-overlay">
                <div class="modal-content">
                    <button class="close-btn" aria-label="Close">×</button>
                    <div class="modal-header">
                        <h2 id="modalTitle" class="modal-title">
                            ISO Information
                        </h2>
                    </div>
                    <div class="modal-body">
                        <img
                            id="modalImage"
                            class="modal-image"
                            alt="ISO cover"
                        />
                        <p id="modalDescription" class="modal-description"></p>
                    </div>
                </div>
            </div>
            <nav class="bc">
                {{range $i, $c := .Breadcrumbs}}<a href="{{$c.URL}}"
                    >{{$c.Name}}</a
                >
                {{if lt (add1 $i) (len $.Breadcrumbs)}}/{{end}} {{end}}
            </nav>

            <div class="grid">
                {{range .Items}} {{if .IsDir}}
                <a href="/{{urlenc .RelativePath}}" class="card">
                    <div class="folder-icon">📁</div>
                    <div class="card-body">
                        <span class="card-name">{{.Name}}</span>
                    </div>
                </a>
                {{else}}
                <div class="card">
                    <a href="/browse/{{urlenc .RelativePath}}">
                        {{if .HasImage}}<img
                            src="/raw/{{urlenc (trimExt .RelativePath)}}{{.ImageExt}}"
                            class="card-img"
                        />
                        {{else}}
                        <div class="iso-icon">💿</div>
                        {{end}}
                    </a>
                    <div class="card-body">
                        <a
                            href="/browse/{{urlenc .RelativePath}}"
                            class="card-name"
                            >{{.Name}}</a
                        >
                        <p class="card-desc">
                            {{if .Description}}{{.Description}}{{else}}ISO Disk
                            Image{{end}}
                        </p>
                        <div style="margin-top: 1rem; display: flex; gap: 0.5rem">
                            <button
                                class="btn info-trigger" 
                                data-iso-name="{{.Name}}"
                                data-description="{{if .Description}}{{.Description}}{{else}}No description available{{end}}"
                                {{if .HasImage}}data-image-src="/raw/{{urlenc (trimExt .RelativePath)}}{{.ImageExt}}"{{end}}
                            >
                                Info
                            </button>
                            <a
                                href="/browse/{{urlenc .RelativePath}}"
                                class="btn"
                                >Browse</a
                            >
                            <a
                                href="/raw/{{urlenc .RelativePath}}"
                                class="btn"
                                download
                                >Download ISO</a
                            >
                        </div>
                    </div>
                </div>
                {{end}} {{end}}
            </div>
        </main>
    </body>
</html>
