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

{{ define "breadcrumb" -}}
    <li><a href="/admin/media">{{( pgettext "Media" "title" )}}</a></li>
{{- end }}

{{ define "content" -}}
    {{- /*gotype: dev.tandem.ws/tandem/camper/pkg/media.mediaForm*/ -}}
    <form id="upload" enctype="multipart/form-data" data-hx-put="/admin/media/{{ .ID }}">
        <h2>{{( pgettext "Edit Media" "title" )}}</h2>
        <img src="{{ .Path }}" alt="">
        {{ CSRFInput }}
        <fieldset>
            {{ with .File -}}
                <label>
                    {{( pgettext "Updated file" "input" )}}
                    <input type="file" name="{{ .Name }}"
                            {{ template "error-attrs" . }}><br>
                </label>
                <p>{{ printf (gettext "Maximum upload file size: %s") (.MaxSize | humanizeBytes) }}</p>
                {{ template "error-message" . }}
            {{- end }}
            {{ with .OriginalFilename -}}
                <label>
                    {{( pgettext "Filename" "input")}}<br>
                    <input type="text" name="{{ .Name }}" value="{{ .Val }}"
                           required {{ template "error-attrs" . }}><br>
                </label>
                {{ template "error-message" . }}
            {{- end }}
        </fieldset>
        <footer>
            <button type="submit">{{( pgettext "Update" "action" )}}</button>
            <progress value="0" max="100"></progress>
        </footer>
    </form>
    <script>
        htmx.on('#upload', 'drop', function (evt) {
            evt.preventDefault();
            [...evt.dataTransfer.items].forEach(function (i) {
                console.log(i);
                i.getAsString(console.log)
            });
        });
        htmx.on('#upload', 'dragover', function (evt) {
            evt.preventDefault();
        });
        htmx.on('#upload', 'dragleave', function (evt) {
            evt.preventDefault();
        });
        htmx.on('#upload', 'htmx:xhr:progress', function (evt) {
            if (evt.detail.lengthComputable) {
                htmx.find('progress').setAttribute('value', evt.detail.loaded / evt.detail.total * 100);
            }
        });
    </script>
{{- end }}
