lyrics

new-song.templ (9304B)

---

 package newsong
 
 import (
 	"fmt"
 	"lyrics/internal/domain"
 	"lyrics/internal/server/ui/layouts/base"
 	"time"
 )
 
 templ NewSong(params NewSongParams) {
 	@base.Base(base.BaseParams{Title: "new song", PageStylesheets: []string{"new-song.css"}}) {
 		<h1>Add a song</h1>
 		<form
 			class="song-form"
 			hx-post="/song/new"
 			hx-swap="none"
 			hx-disable-elt="#add-song-btn"
 		>
 			<fieldset x-data="{ showLatinTitle: false }">
 				<legend>Title</legend>
 				<label>
 					title:
 					<input
 						name="song-title"
 						type="text"
 						pattern={ domain.NoTrailingOrLeadingSpaceRegex.String() }
 						required
 						@input="showLatinTitle = isNonAscii($event.target.value)"
 					/>
 				</label>
 				<label x-show="showLatinTitle">
 					latin name:
 					<input
 						name="latin-title"
 						type="text"
 						:required="showLatinTitle"
 						pattern={ domain.IsValidSortNamePattern }
 					/>
 				</label>
 			</fieldset>
 			<fieldset
 				x-data="{ items: [{ id: 0, selected: false }], uid: 1, createAsSingle: false }"
 			>
 				<legend>Releases</legend>
 				<div class="releases-list-group">
 					<ol
 						class="picker-list"
 						:class="createAsSingle && 'disabled-form'"
 					>
 						<template x-for="(item, i) in items" :key="item.id">
 							<li
 								x-data="{ releaseId: '', releaseTitle: '' }"
 								x-init="htmx.process($el); initLucideIcons()"
 							>
 								<div class="picker-row">
 									<div class="picker-main">
 										<label x-show="!item.selected">
 											<span>release:</span>
 											<input
 												type="search"
 												hx-get="/release/search?format=suggest"
 												hx-trigger="input changed delay:500ms"
 												hx-target="next .picker-options"
 												hx-swap="outerHTML"
 												name="release-title"
 												autocomplete="off"
 												:required="!item.selected && !createAsSingle"
 												:disabled="createAsSingle"
 											/>
 										</label>
 										<div class="picker-selected-item" x-show="item.selected">
 											<strong x-text="releaseTitle"></strong>
 											<button
 												type="button"
 												class="-secondary"
 												@click="item.selected = false; releaseId = ''; releaseTitle = ''"
 											>
 												change
 											</button>
 										</div>
 									</div>
 									<div class="picker-actions">
 										<button
 											type="button"
 											aria-label="Remove"
 											x-show="items.length > 1"
 											@click="items.splice(i, 1)"
 										>
 											<i data-lucide="x"></i>
 										</button>
 									</div>
 								</div>
 								<div x-show="!item.selected">
 									<fieldset class="picker-options" role="radiogroup" x-show="false"></fieldset>
 								</div>
 								<input type="hidden" name="release-id" :value="releaseId"/>
 							</li>
 						</template>
 					</ol>
 					<button
 						class="-secondary"
 						type="button"
 						@click="items.push({ id: uid++, selected: false })"
 						:disabled="createAsSingle"
 					>
 						add additional release
 					</button>
 				</div>
 				<label
 					:class="items.find(item => item.selected) !== undefined && 'disabled-form'"
 				>
 					Create as single?
 					<input
 						name="create-as-single"
 						type="checkbox"
 						x-model="createAsSingle"
 						:disabled="items.find(item => item.selected) !== undefined"
 					/>
 				</label>
 			</fieldset>
 			<fieldset x-data="{ items: [{ id: 0 }], uid: 1 }">
 				<legend>Artists</legend>
 				<ol class="picker-list">
 					<template x-for="(item, i) in items" :key="item.id">
 						<li
 							x-data="{ selected: false, artistId: '', artistName: '' }"
 							x-init="htmx.process($el); initLucideIcons()"
 						>
 							<div class="picker-row">
 								<div class="picker-main">
 									<label x-show="!selected">
 										<span>artist:</span>
 										<input
 											type="search"
 											hx-get="/artist/search?format=suggest"
 											hx-trigger="input changed delay:500ms"
 											hx-target="next .picker-options"
 											hx-swap="outerHTML"
 											name="artist"
 											autocomplete="off"
 											:required="!selected"
 										/>
 									</label>
 									<div class="picker-selected-item" x-show="selected">
 										<strong x-text="artistName"></strong>
 										<button
 											type="button"
 											class="-secondary"
 											@click="selected = false; artistId = ''; artistName = ''"
 										>
 											change
 										</button>
 									</div>
 								</div>
 								<div class="picker-actions">
 									<button
 										type="button"
 										aria-label="Remove"
 										x-show="items.length > 1"
 										@click="items.splice(i, 1)"
 									>
 										<i data-lucide="x"></i>
 									</button>
 									<button
 										type="button"
 										aria-label="Move up"
 										x-show="selected && items.length > 1 && i >= 1"
 										@click="[items[i - 1], items[i]] = [items[i], items[i - 1]]"
 									>
 										<i data-lucide="chevron-up"></i>
 									</button>
 									<button
 										type="button"
 										aria-label="Move down"
 										x-show="selected && items.length > 1 && i + 1 < items.length"
 										@click="[items[i + 1], items[i]] = [items[i], items[i + 1]]"
 									>
 										<i data-lucide="chevron-down"></i>
 									</button>
 								</div>
 							</div>
 							<div x-show="!selected">
 								<fieldset class="picker-options" role="radiogroup" x-show="false"></fieldset>
 							</div>
 							<input type="hidden" name="artist-id" :value="artistId"/>
 						</li>
 					</template>
 				</ol>
 				<button class="-secondary" type="button" @click="items.push({ id: uid++ })">
 					add additional artist
 				</button>
 			</fieldset>
 			<fieldset x-data="{ items: [{ id: 0 }], uid: 1 }">
 				<legend>Featuring</legend>
 				<ol class="picker-list">
 					<template x-for="(item, i) in items" :key="item.id">
 						<li
 							x-data="{ selected: false, artistId: '', artistName: '' }"
 							x-init="htmx.process($el); initLucideIcons()"
 						>
 							<div class="picker-row">
 								<div class="picker-main">
 									<label x-show="!selected">
 										<span>artist:</span>
 										<input
 											type="search"
 											hx-get="/artist/search?format=suggest"
 											hx-trigger="input changed delay:500ms"
 											hx-target="next .picker-options"
 											hx-swap="outerHTML"
 											name="artist"
 											autocomplete="off"
 										/>
 									</label>
 									<div class="picker-selected-item" x-show="selected">
 										<strong x-text="artistName"></strong>
 										<button
 											type="button"
 											class="-secondary"
 											@click="selected = false; artistId = ''; artistName = ''"
 										>
 											change
 										</button>
 									</div>
 								</div>
 								<div class="picker-actions">
 									<button
 										type="button"
 										aria-label="Remove"
 										x-show="items.length > 1"
 										@click="items.splice(i, 1)"
 									>
 										<i data-lucide="x"></i>
 									</button>
 									<button
 										type="button"
 										aria-label="Move up"
 										x-show="selected && items.length > 1 && i >= 1"
 										@click="[items[i - 1], items[i]] = [items[i], items[i - 1]]"
 									>
 										<i data-lucide="chevron-up"></i>
 									</button>
 									<button
 										type="button"
 										aria-label="Move down"
 										x-show="selected && items.length > 1 && i + 1 < items.length"
 										@click="[items[i + 1], items[i]] = [items[i], items[i + 1]]"
 									>
 										<i data-lucide="chevron-down"></i>
 									</button>
 								</div>
 							</div>
 							<div x-show="!selected">
 								<fieldset class="picker-options" role="radiogroup" x-show="false"></fieldset>
 							</div>
 							<input type="hidden" name="featuring-id" :value="artistId"/>
 						</li>
 					</template>
 				</ol>
 				<button class="-secondary" type="button" @click="items.push({ id: uid++ })">
 					add additional artist
 				</button>
 			</fieldset>
 			<fieldset>
 				<legend>Genres</legend>
 				<div class="genre-options">
 					for _, genre := range domain.Genres {
 						<label>
 							<input type="checkbox" name="genres" value={ string(genre) }/>
 							<span>{ string(genre) }</span>
 						</label>
 					}
 				</div>
 			</fieldset>
 			<fieldset>
 				<legend>Lyrics</legend>
 				<label>
 					lyrics:
 					<textarea name="lyrics" rows="16" spellcheck></textarea>
 				</label>
 			</fieldset>
 			<fieldset>
 				<legend>Release</legend>
 				<label>
 					release date:
 					<input
 						name="release-date"
 						type="date"
 						min="1000-01-01"
 						max={ fmt.Sprintf("%s", time.Now().AddDate(3, 0, 0).Format("2006-01-02")) }
 						required
 					/>
 				</label>
 			</fieldset>
 			<fieldset>
 				<legend>MusicBrainz</legend>
 				<label title="External identifier used for metadata lookups such as cover art.">
 					Recording ID (optional):
 					<input
 						name="musicbrainz-recording-id"
 						type="text"
 						pattern={ domain.IsValidMusicBrainzIDPattern }
 						placeholder="e32a4ae3-67d1-4541-84d8-de6ab2d7dec1"
 					/>
 					<i data-lucide="info"></i>
 				</label>
 			</fieldset>
 			<footer aria-label="Form actions">
 				<button id="add-song-btn" class="-primary" type="submit">add song</button>
 			</footer>
 		</form>
 		<script src="/static/js/new-song.js" defer></script>
 	}
 }