lyrics

lyrics
git clone git://brookjeynes.dev/bjeynes/lyrics.git
Log | Files | Refs

new-artist.templ (2375B)

      1 package newartist
      2 
      3 import (
      4 	"lyrics/internal/domain"
      5 	"lyrics/internal/server/ui/layouts/base"
      6 )
      7 
      8 templ NewArtist(params NewArtistParams) {
      9 	@base.Base(base.BaseParams{Title: "new artist", PageStylesheets: []string{"new-artist.css"}}) {
     10 		<h1>Add an artist</h1>
     11 		<form
     12 			class="artist-form"
     13 			hx-post="/artist/new"
     14 			hx-swap="none"
     15 			hx-disable-elt="#add-artist-btn"
     16 		>
     17 			<fieldset x-data="{ showLatinName: false }">
     18 				<legend>Name</legend>
     19 				<label title="prefer the artists name in their original language. use the latin name input for english names">
     20 					artist:
     21 					<input
     22 						hx-get="/artist/search?format=similar"
     23 						hx-trigger="input changed delay:500ms, load"
     24 						hx-target="#similar-artists"
     25 						hx-swap="innerHTML"
     26 						name="artist"
     27 						type="text"
     28 						pattern={ domain.NoTrailingOrLeadingSpaceRegex.String() }
     29 						required
     30 						@input="showLatinName = isNonAscii($event.target.value)"
     31 					/>
     32 				</label>
     33 				<label x-show="showLatinName">
     34 					latin name:
     35 					<input
     36 						name="latin-name"
     37 						type="text"
     38 						:required="showLatinName"
     39 						pattern={ domain.IsValidSortNamePattern }
     40 					/>
     41 				</label>
     42 			</fieldset>
     43 			<section id="similar-artists" class="similar-artists" aria-label="Similar artists"></section>
     44 			<fieldset>
     45 				<legend>Disambiguation</legend>
     46 				<label title="helps users distinguish between artists with identical or similar names, e.g. South Korean singer-songwriter">
     47 					disambiguation:
     48 					<input
     49 						name="disambiguation"
     50 						type="text"
     51 						pattern={ domain.NoTrailingOrLeadingSpaceRegex.String() }
     52 					/>
     53 					<i data-lucide="info"></i>
     54 				</label>
     55 			</fieldset>
     56 			<fieldset>
     57 				<legend>Biography</legend>
     58 				<label>
     59 					biography:
     60 					<textarea name="biography" rows="16" spellcheck></textarea>
     61 				</label>
     62 			</fieldset>
     63 			<fieldset>
     64 				<legend>MusicBrainz</legend>
     65 				<label title="External identifier used for metadata lookups such as cover art.">
     66 					Artist ID (optional):
     67 					<input
     68 						name="musicbrainz-artist-id"
     69 						type="text"
     70 						pattern={ domain.IsValidMusicBrainzIDPattern }
     71 						placeholder="e32a4ae3-67d1-4541-84d8-de6ab2d7dec1"
     72 					/>
     73 					<i data-lucide="info"></i>
     74 				</label>
     75 			</fieldset>
     76 			<footer aria-label="Form actions">
     77 				<button class="-primary" id="add-artist-btn" type="submit">add artist</button>
     78 			</footer>
     79 		</form>
     80 	}
     81 }