{% props field: Field, label: String = "", hint: String = "", accept: String = "", multiple: bool = false, files: Slot = Slot::default() %}
{#- `hint` states accepted types and sizes. `files`: `<li class="ui-file">` rows for files already uploaded. -#}
{%- let label = if label.is_empty() { field.label.clone() } else { label } %}
<div class="ui-field">
<label class="ui-label" for="{{ field.id }}">{{ label }}</label>
<div class="ui-dropzone" data-ui="file-upload">
<span class="ui-dropzone-icon"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m17 8-5-5-5 5"/><path d="M12 3v12"/></svg></span>
<div><span style="font-weight:500">Drop files here or choose files</span>{% if !hint.is_empty() %}<div class="ui-muted" id="{{ field.id }}-hint">{{ hint }}</div>{% end %}</div>
<input id="{{ field.id }}" name="{{ field.name }}" type="file"{% if multiple %} multiple{% end %}{% if !accept.is_empty() %} accept="{{ accept }}"{% end %}{% if field.has_errors() %} aria-invalid="true" aria-describedby="{{ field.id }}-error"{% else %}{% if !hint.is_empty() %} aria-describedby="{{ field.id }}-hint"{% end %}{% end %}>
</div>
{%- if field.has_errors() %}
<p class="ui-field-error" id="{{ field.id }}-error">{%- for message in field.errors.iter() %}{{ label }} {{ message }}. {% end %}</p>
{%- end %}
{%- if !files.to_html().trim().is_empty() %}
<ul class="ui-file-list">{{ files }}</ul>
{%- end %}
</div>