{{define "content"}}
<article>
    {{with .Data}}
        {{if .IsNew}}
            <h1>Ny favoritt</h1>
        {{else}}
            <h1>Rediger favoritt</h1>
        {{end}}

        <form method="POST"
              enctype="multipart/form-data"
              {{if .IsNew}}
                  action="{{basePath}}/faves"
              {{else}}
                  action="{{basePath}}/faves/{{.Fave.ID}}"
              {{end}}>
            <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">

            <label for="description">
                Beskrivelse *
                <input type="text" id="description" name="description"
                       value="{{.Description}}" required autofocus
                       placeholder="F.eks. «Blade Runner 2049» eller «Rød tulipan»">
            </label>

            <label for="url">
                Lenke (valgfri)
                <input type="url" id="url" name="url"
                       value="{{.URL}}"
                       placeholder="https://...">
            </label>

            <label for="notes">
                Notater (valgfri)
                <textarea id="notes" name="notes"
                          rows="4"
                          placeholder="Utfyllende tekst, anmeldelse, tanker...">{{.Notes}}</textarea>
            </label>

            <label for="image">
                Bilde (valgfri)
                <input type="file" id="image" name="image"
                       accept="image/jpeg,image/png,image/gif,image/webp">
            </label>
            {{if not .IsNew}}
                {{if .Fave.ImagePath}}
                    <div class="current-image">
                        <img src="{{basePath}}/uploads/{{.Fave.ImagePath}}"
                             alt="Nåværende bilde"
                             style="max-width: 200px; max-height: 200px;">
                        <label>
                            <input type="checkbox" name="remove_image" value="1">
                            Fjern bilde
                        </label>
                    </div>
                {{end}}
            {{end}}

            <label for="tags">
                Merkelapper (kommaseparert)
                <input type="text" id="tags" name="tags"
                       value="{{.Tags}}"
                       placeholder="film, sci-fi, favoritt"
                       autocomplete="off"
                       role="combobox"
                       aria-expanded="false"
                       aria-haspopup="listbox"
                       aria-autocomplete="list"
                       aria-controls="tag-suggestions"
                       aria-describedby="tags-help"
                       hx-get="{{basePath}}/tags/search"
                       hx-trigger="keyup changed delay:300ms"
                       hx-target="#tag-suggestions"
                       hx-params="none"
                       hx-vals='{"q": ""}'>
                <small id="tags-help">Skriv for å søke i eksisterende merkelapper. Maks {{maxTags}} stk. Bruk piltaster for å velge.</small>
            </label>
            <ul id="tag-suggestions" role="listbox" class="tag-suggestions" aria-label="Merkelappforslag"></ul>
            <div id="tag-status" class="sr-only" aria-live="polite"></div>

            <fieldset>
                <legend>Synlighet</legend>
                <label>
                    <input type="radio" name="privacy" value="public"
                           {{if eq .Privacy "public"}}checked{{end}}
                           {{if .IsNew}}{{if eq .DefaultPrivacy "public"}}checked{{end}}{{end}}>
                    Offentlig
                </label>
                <label>
                    <input type="radio" name="privacy" value="private"
                           {{if eq .Privacy "private"}}checked{{end}}
                           {{if .IsNew}}{{if eq .DefaultPrivacy "private"}}checked{{end}}{{end}}>
                    Privat
                </label>
            </fieldset>

            <button type="submit">
                {{if .IsNew}}Legg til{{else}}Lagre{{end}}
            </button>
        </form>
    {{end}}
</article>
{{end}}