{#
  Custom `photos` form field — a plain, controlled picker that replaces Grav's
  managed filepond/dropzone field on /post so post-form.js can convert HEIC
  before upload (see U4). It carries the same destination/accept/limit settings
  the server's uploadFiles() reads via the blueprint, but renders its own input
  and uploads through post-form.js, not FilePond.
#}
{% extends "forms/field.html.twig" %}

{% block input %}
    {% set files = config.plugins.form.files|merge(field|default([])) %}
    {% set limit = not field.multiple ? 1 : (field.limit ?? files.limit ?? 4) %}
    <div class="photo-picker {{ field.classes }}"
         data-file-field-name="{{ field.name }}"
         data-file-url-add="{{ form.getFileUploadAjaxRoute().getUri()|e('html_attr') }}"
         data-limit="{{ limit }}">
        <label class="photo-picker__add btn-action">
            <span class="photo-picker__add-label">📷 Add photos</span>
            <input type="file"
                   class="photo-picker__input"
                   accept="image/*,.heic,.heif,.HEIC,.HEIF"
                   {% if field.multiple %}multiple="multiple"{% endif %}
                   hidden />
        </label>
        <ul class="photo-picker__list" aria-live="polite"></ul>
        <p class="photo-picker__hint form-status" role="status"></p>
    </div>
{% endblock %}