{{define "head"}}
<title>Listing "{{.Directory}}" - Melody VOD Manager</title>

<link rel="stylesheet" href="/style/vod-list.css">
{{end}}

{{define "content"}}
<main>
    <h1>VODs</h1>

    <nav>&rarr; {{range Crumbs .Directory}}<a href="./{{.Path}}">{{.Name}}</a>/{{end}}</nav>

    <table>
        <thead>
            <tr>
                <th colspan="2">Name</th>
                <th>Size</th>
            </tr>
        </thead>
        <tbody>
            {{range $VOD := .VODs}}
            <tr>
                <td>📼</td>
                <td><a href="/vods{{$.Directory}}/{{$VOD.Path}}">{{$VOD.Title}}</a></td>
                <td>&mdash;</td>
            </tr>
            {{end}}

            {{range $Name := .Directories}}
            <tr>
                <td>📁</td>
                <td><a href="/vods{{$.Directory}}/{{$Name}}">{{$Name}}</a></td>
                <td>&mdash;</td>
            </tr>
            {{end}}

            {{range $File := .Files}}
            <tr>
                <td>📄</td>
                <td><a href="/vods{{$.Directory}}/{{$File.Name}}">{{$File.Name}}</a></td>
                <td>{{$File.Size}}</td>
            </tr>
            {{end}}
        </tbody>
    </table>

    <h2>Actions</h2>
    <div class="actions">
        <p>
        <a href="/vods{{.Directory}}?init=true">Initialise as VOD Directory</a>
        &mdash; Create a <code>metadata.toml</code> file here, initialising this directory as a VOD.
        </p>
    </div>
</main>
{{end}}