<!--
 SPDX-FileCopyrightText: 2023 jordi fita mas <jordi@tandem.blog>
 SPDX-License-Identifier: AGPL-3.0-only
-->
<dialog class="media-picker">
    {{- /*gotype: dev.tandem.ws/tandem/camper/pkg/media.mediaPicker*/ -}}
    <header>
        <h3>{{( pgettext "Media Picker" "title" )}}</h3>
    </header>
    <form id="mediaPickerUpload" enctype="multipart/form-data" action="/admin/media" method="post"
          data-hx-boost="true" data-hx-push-url="false">
        {{ CSRFInput }}
        {{ with .Field -}}
            <input type="hidden" name="name" value="{{ .Name }}"/>
            <input type="hidden" name="label" value="{{ .Label }}"/>
            <input type="hidden" name="prompt" value="{{ .Prompt }}"/>
        {{- end }}
        <fieldset>
            <legend>{{( pgettext "Upload New Media" "title" )}}</legend>
            {{ with .File -}}
                <label>
                    {{( pgettext "File" "input" )}}
                    <input type="file" name="{{ .Name }}"
                           required {{ template "error-attrs" . }}><br>
                </label>
                <p>{{ printf (gettext "Maximum upload file size: %s") (.MaxSize | humanizeBytes) }}</p>
                {{ template "error-message" . }}
            {{- end }}
        </fieldset>
        <footer>
            <button name="picker" type="submit">{{( pgettext "Upload" "action" )}}</button>
            <progress value="0" max="100"></progress>
        </footer>
    </form>
    <script type="module">
        import {camperUploadForm} from "/static/camper.js?v={{ camperVersion }}";
        camperUploadForm(document.getElementById('mediaPickerUpload'));
    </script>
    <form action="/admin/media/field" method="get" data-hx-boost="true" data-hx-push-url="false">
        {{ with .Field -}}
            <input type="hidden" name="name" value="{{ .Name }}"/>
            <input type="hidden" name="label" value="{{ .Label }}"/>
            <input type="hidden" name="prompt" value="{{ .Prompt }}"/>
        {{- end }}
        {{ if .Media -}}
            <fieldset>
                <legend>{{( pgettext "Choose Existing Media" "title" )}}</legend>
                <ul class="media-grid">
                    {{ range .Media -}}
                        <li>
                            <button name="value" value="{{ .ID }}" type="submit"><img src="{{ .Path }}" alt="">
                            </button>
                        </li>
                    {{- end }}
                </ul>
            </fieldset>
        {{ else -}}
            <p>{{( gettext "No media uploaded yet." )}}</p>
        {{- end }}
        <footer>
            <button name="value" value="{{ .Field.Val }}" type="submit">{{( pgettext "Cancel" "action" )}}</button>
        </footer>
    </form>
</dialog>