<!--
 SPDX-FileCopyrightText: 2023 jordi fita mas <jordi@tandem.blog>
 SPDX-License-Identifier: AGPL-3.0-only
-->
{{ define "title" -}}
    {{- /*gotype: dev.tandem.ws/tandem/camper/pkg/service.serviceForm*/ -}}
    {{ if .ID }}
        {{( pgettext "Edit Service" "title" )}}
    {{ else }}
        {{( pgettext "New Service" "title" )}}
    {{ end }}
{{- end }}

{{ define "breadcrumb" -}}
    <li><a href="/admin/services">{{( pgettext "Services Page" "title" )}}</a></li>
{{- end }}

{{ define "content" -}}
    {{- /*gotype: dev.tandem.ws/tandem/camper/pkg/services.serviceForm*/ -}}
    <form
            {{- if .ID }} data-hx-put="/admin/services/{{ .ID }}"
            {{- else }} action="/admin/services" method="post"{{ end -}}
    >
        <h2>
            {{- if .ID -}}
                {{( pgettext "Edit Service" "title" )}}
            {{- else -}}
                {{( pgettext "New Service" "title" )}}
            {{- end -}}
        </h2>
        {{ CSRFInput }}
        <fieldset {{ template "init-lang" . }}>
            {{ with $field := .Icon -}}
                <fieldset class="icon-input">
                    <legend>{{( pgettext "Icon" "input")}}</legend>
                    <input type="hidden" name="{{ .Name }}"
                            {{- range .Options -}}
                                {{ if $field.IsSelected .Value }} value="{{ .Value }}"{{ end }}
                            {{- end -}}
                    >
                    <ul>
                        {{- range .Options }}
                            <li>
                                <button type="button" data-icon-name="{{ .Value }}" class="icon_{{ .Value }}"></button>
                            </li>
                        {{- end }}
                    </ul>
                    {{ template "error-message" . }}
                </fieldset>
            {{- end }}
            {{ with .Name -}}
                <fieldset>
                    <legend>{{( pgettext "Name" "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" $input }}><br>
                        </label>
                    {{- end }}
                    {{ template "error-message" . }}
                </fieldset>
            {{- end }}
            {{ with .Description -}}
                <fieldset>
                    <legend>{{( pgettext "Description" "input")}}</legend>
                    {{ template "lang-selector" . }}
                    {{ range $lang, $input := . -}}
                        <label x-cloak x-show="lang === '{{ $lang }}'"><span>{{ $lang }}</span><br>
                            <textarea class="html"
                                      name="{{ $input.Name }}" {{ template "error-attrs" $input }}>{{ $input.Val }}</textarea><br>
                        </label>
                    {{- end }}
                    {{ template "error-message" . }}
                </fieldset>
            {{- end }}
        </fieldset>
        <footer>
            <button type="submit">
                {{- if .ID -}}
                    {{( pgettext "Update" "action" )}}
                {{- else -}}
                    {{( pgettext "Add" "action" )}}
                {{- end -}}
            </button>
        </footer>
    </form>

    <script type="module">
        import {setupIconInput} from "/static/camper.js?v={{ camperVersion }}";

        setupIconInput(document.querySelector('.icon-input'));
    </script>
{{- end }}