{{define "head"}}
<title>{{.Title}}</title>

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

{{define "content"}}
<main>
    <h1>VOD Details</h1>

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

    <form method="POST">
        <div class="metadata-top">
            <div>
                <label for="title">Title</label>
                <input type="text" name="title" value="{{.Title}}" />
            </div>
            <div>
                <label for="part">Part</label>
                <input type="number" min="0" name="part" value="{{.Part}}" />
            </div>
            <div>
                <label for="date">Date</label>
                <input type="date" name="date" value="{{FormatTime .Date "2006-01-02"}}" />
            </div>
        </div>
        <p>Formatted Title: <strong>{{.TitleFormatted}}</strong></p>

        <p>Uploaded: <span id="upload-state">{{if .Uploaded}}Yes{{else}}No{{end}}</span></p>

        <p>Tags:</p>
        <ul>
            {{range .Tags}}
            <li><code>{{.}}</code></li>
            {{end}}
        </ul>

        <p>Category:</p>
        <blockquote>
            <label for="category-enabled">Enabled</label>
            <input type="checkbox" name="category-enabled" {{if .Category}}checked{{end}} />
            <label for="category-name">Name</label>
            <input type="text" name="category-name" value="{{if ne .Category nil}}{{.Category.Name}}{{end}}" />
            <label for="category-type">Type</label>
            <select name="category-type">
                <option value="entertainment" {{if ne .Category nil}}{{if eq .Category.Type "entertainment"}}selected{{end}}{{end}}>Entertainment</option>
                <option value="gaming" {{if ne .Category nil}}{{if eq .Category.Type "gaming"}}selected{{end}}{{end}}>Gaming</option>
            </select>
            <label for="category-url">URL</label>
            <input type="text" name="category-url" value="{{if ne .Category nil}}{{.Category.Url}}{{end}}" />
        </blockquote>

        <p>Formatted Description:</p>
        <p><pre class="description">{{.DescriptionFormatted}}</pre></p>

        <button type="submit">Save</button>
    </form>

    <hr>

    <p>Footage Directory: <code>"{{.FootageDir}}"</code></p>
    <p>Footage Blocks:</p>
    <ul>
        {{range .Footage}}
        <li><code>{{.Name}} ({{.Size}})</code></li>
        {{end}}
    </ul>
</main>

<script type="module" src="/script/vod.js" defer></script>
{{end}}