{# state: "" (done) | "uploading" | "processing" | "error" | "idle"; description carries the details, progress or the reason it failed. image: a thumbnail URL. actions: icon buttons, each labelled with the file name. #}
{% props name: String, description: String = "", href: String = "", state: String = "", size: String = "", orientation: String = "", image: String = "", actions: Slot = Slot::default() %}
{%- let busy = state == "uploading" || state == "processing" %}
<div class="ui-attachment"{% if !state.is_empty() %} data-state="{{ state }}"{% end %}{% if !size.is_empty() %} data-size="{{ size }}"{% end %}{% if !orientation.is_empty() %} data-orientation="{{ orientation }}"{% end %}>
{%- if !image.is_empty() %}
<span class="ui-attachment-media" data-variant="image" style="background-image:url('{{ image }}')"></span>
{%- else %}{% if state == "error" %}
<span class="ui-attachment-media"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg></span>
{%- else %}
<span class="ui-attachment-media"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg></span>
{%- end %}{% end %}
<div class="ui-attachment-content">
{%- if !href.is_empty() && (state.is_empty() || state == "done") %}
<a class="ui-attachment-trigger ui-attachment-title" href="{{ href }}">{{ name }}</a>
{%- else %}
<span class="ui-attachment-title{% if busy %} ui-shimmer{% end %}">{{ name }}</span>
{%- end %}
{%- if !description.is_empty() %}
<span class="ui-attachment-desc">{{ description }}</span>
{%- end %}
</div>
{%- if !actions.to_html().trim().is_empty() %}
<div class="ui-attachment-actions">{{ actions }}</div>
{%- end %}
</div>