<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Podstalk — {{if .Editing}}Edit Episode{{else}}New Episode{{end}}</title>
    <link rel="stylesheet" href="https://unpkg.com/neobrutalismcss@latest" />
    <link rel="stylesheet" href="/static/episode.css" />
</head>
<body>
    <nav class="nb-navbar" role="navigation" aria-label="Main navigation">
        <a href="/" class="nb-navbar-brand" aria-label="Go to homepage">Podstalk</a>
        <ul class="nb-navbar-nav" role="menubar">
            <li class="nb-navbar-item" role="none">
                <a href="/" class="nb-navbar-link" role="menuitem">Dashboard</a>
            </li>
            <li class="nb-navbar-item" role="none">
                <a href="/signout" class="nb-navbar-link" role="menuitem">Sign Out</a>
            </li>
        </ul>
    </nav>
    <div class="container">
        {{if .Error}}<div class="flash flash-error">{{.Error}}</div>{{end}}
        <h2>{{if .Editing}}Edit Episode{{else}}New Episode{{end}}</h2>

        <form method="post" enctype="multipart/form-data">
            <div class="nb-form-group">
                <label for="title">Title</label>
                <input type="text" id="title" name="title" class="nb-input blue" required autofocus
                    value="{{if .Editing}}{{.Episode.Title}}{{end}}" />
            </div>
            <div class="nb-form-group">
                <label for="description">Description</label>
                <textarea id="description" name="description" class="nb-textarea"
                    rows="4">{{if .Editing}}{{.Episode.Description}}{{end}}</textarea>
            </div>
            <div class="nb-form-group">
                <label for="audio_file">Audio File</label>
                <div class="file-upload">
                    <input type="file" id="audio_file" name="audio_file" accept="audio/*" onchange="updateFileName(this)" />
                    <label for="audio_file" class="nb-button blue file-label">Choose Audio File</label>
                    <span class="file-name" id="audio_file_name"></span>
                </div>
                {{if .Editing}}
                <div class="current-file">
                    {{if .Episode.AudioPath}}Current: {{.Episode.AudioPath}}{{else}}No audio file uploaded.{{end}}
                </div>
                {{end}}
            </div>
            <div class="nb-form-group">
                <label for="image_file">Episode Image (optional)</label>
                <div class="file-upload">
                    <input type="file" id="image_file" name="image_file" accept="image/*" onchange="updateFileName(this)" />
                    <label for="image_file" class="nb-button blue file-label">Choose Image</label>
                    <span class="file-name" id="image_file_name"></span>
                </div>
                {{if .Editing}}
                <div class="current-file">
                    {{if .Episode.ImagePath}}Current: {{.Episode.ImagePath}}{{else}}No image uploaded.{{end}}
                </div>
                {{end}}
            </div>
            <div class="nb-form-group">
                <label for="published_at">Published At</label>
                <input type="datetime-local" id="published_at" name="published_at" class="nb-input blue"
                    value="{{if .Editing}}{{.PublishedAt}}{{end}}" />
            </div>
            <div class="form-actions">
                <button type="submit" class="nb-button green">{{if .Editing}}Save Changes{{else}}Create Episode{{end}}</button>
                <a href="/" class="nb-button default">Cancel</a>
            </div>
        </form>
    </div>
    <script>
        function updateFileName(input) {
            const span = document.getElementById(input.id + '_name');
            if (span && input.files.length > 0) {
                span.textContent = input.files[0].name;
            }
        }
        (function() {
            const input = document.getElementById('published_at');
            if (!input.value) {
                const now = new Date();
                const pad = (n) => String(n).padStart(2, '0');
                input.value = now.getFullYear() + '-' +
                    pad(now.getMonth() + 1) + '-' +
                    pad(now.getDate()) + 'T' +
                    pad(now.getHours()) + ':' +
                    pad(now.getMinutes());
            }
        })();
    </script>
</body>
</html>
