106 lines
5.1 KiB
HTML
106 lines
5.1 KiB
HTML
<!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" />
|
|
<style>
|
|
body { max-width: 960px; margin: 0 auto; padding: 2rem 1rem; }
|
|
.container { margin-top: 2rem; }
|
|
.flash { padding: 0.75rem 1rem; margin-bottom: 1rem; border: 2px solid #000; }
|
|
.flash-error { background: #ffcdd2; }
|
|
.form-group { margin-bottom: 1rem; }
|
|
.form-group label { display: block; margin-bottom: 0.25rem; font-weight: bold; }
|
|
.form-actions { display: flex; gap: 0.5rem; margin-top: 1.5rem; }
|
|
.current-file { font-size: 0.85rem; color: #666; margin-top: 0.25rem; }
|
|
.file-upload { position: relative; display: inline-block; }
|
|
.file-upload input[type="file"] { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
|
|
.file-name { margin-left: 0.5rem; font-size: 0.85rem; color: #666; }
|
|
</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 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>
|