<!--
 SPDX-FileCopyrightText: 2023 jordi fita mas <jordi@tandem.blog>
 SPDX-License-Identifier: AGPL-3.0-only
-->
{{ define "title" -}}
    {{( pgettext "Surroundings Page" "title" )}}
{{- end }}

{{ define "breadcrumb" -}}
{{- end }}

{{ define "content" -}}
    {{- /*gotype: dev.tandem.ws/tandem/camper/pkg/surroundings.highlightIndex*/ -}}
    <h2>{{( pgettext "Ad" "title" )}}</h2>
    {{ with .Ad -}}
        <form data-hx-put="/admin/surroundings/ad">
            {{ CSRFInput }}
            <fieldset {{ template "init-lang" . }}>
                {{ with .Title -}}
                    <fieldset>
                        <legend>{{( pgettext "Title" "input")}}</legend>
                        {{ template "lang-selector" . }}
                        {{ range $lang, $input := . -}}
                            <label x-cloak x-show="lang === '{{ $lang }}'"><span>{{ $lang }}</span><br>
                                <input type="text" name="{{ $input.Name }}" value="{{ $input.Val }}"
                                        {{ template "error-attrs" . }}><br>
                            </label>
                        {{- end }}
                        {{ template "error-message" . }}
                    </fieldset>
                {{- end }}
                {{ with .Media -}}
                    {{ template "media-picker" . }}
                {{- end }}
                {{ with .Anchor -}}
                    <fieldset>
                        <legend>{{( pgettext "Link Text" "input")}}</legend>
                        {{ template "lang-selector" . }}
                        {{ range $lang, $input := . -}}
                            <label x-cloak x-show="lang === '{{ $lang }}'"><span>{{ $lang }}</span><br>
                                <input type="text" name="{{ $input.Name }}" value="{{ $input.Val }}"
                                        {{ template "error-attrs" . }}><br>
                            </label>
                        {{- end }}
                        {{ template "error-message" . }}
                    </fieldset>
                {{- end }}
                {{ with .HRef -}}
                    <label>
                        {{( pgettext "Link URL" "input")}}<br>
                        <input type="url" name="{{ .Name }}" value="{{ .Val }}"
                               required {{ template "error-attrs" . }}><br>
                    </label>
                    {{ template "error-message" . }}
                {{- end }}
            </fieldset>
            <footer>
                <button type="submit">{{( pgettext "Update" "action" )}}</button>
                {{ $confirm := ( gettext "Are you sure you wish to delete the ad?" )}}
                <button data-hx-delete="/admin/surroundings/ad"
                        data-hx-confirm="{{ $confirm }}"
                        data-hx-headers='{ {{ CSRFHeader }} }'>
                    {{( pgettext "Delete" "action" )}}
                </button>
            </footer>
        </form>
    {{- end }}
    <h2>{{( pgettext "Highlights" "title" )}}</h2>
    <a href="/admin/surroundings/new">{{( pgettext "Add highlight" "action" )}}</a>
    {{ if .Highlights -}}
        <form id="highlight-index"
              class="sortable"
              data-hx-post="/admin/surroundings/order"
              data-hx-trigger="end"
              data-hx-select="#highlight-index"
              data-hx-swap="outerHTML"
        >
            {{ CSRFInput }}
            <table>
                <thead>
                <tr>
                    <th scope="col">{{( pgettext "Image" "header" )}}</th>
                    <th scope="col">{{( pgettext "Name" "header" )}}</th>
                    <th scope="col">{{( pgettext "Actions" "header" )}}</th>
                </tr>
                </thead>
                <tbody>
                {{ $confirm := ( gettext "Are you sure you wish to delete this highlight?" )}}
                {{ range $highlight := .Highlights -}}
                    <tr>
                        <td>
                            <span class="handle"></span>
                            <input type="hidden" name="highlight_id" value="{{ .ID }}">
                            <a href="{{ .URL }}"><img src="{{ .Media }}" alt=""></a>
                        </td>
                        <td><a href="{{ .URL }}">{{ .Name }}</a></td>
                        <td>
                            <button data-hx-delete="/admin/surroundings//{{ .ID }}"
                                    data-hx-confirm="{{ $confirm }}"
                                    data-hx-headers='{ {{ CSRFHeader }} }'>
                                {{( pgettext "Delete" "action" )}}
                            </button>
                        </td>
                    </tr>
                {{- end }}
                </tbody>
            </table>
        </form>
    {{ else -}}
        <p>{{( gettext "No highlights added yet." )}}</p>
    {{- end }}
{{- end }}
