<%= case @display do %>
<% :empty -> %>
<%= cond do %>
<% @readonly -> %>
<%!-- A viewer sees no placeholder, but still sees a host-supplied
one (an avatar's initials). --%>
<.frame
:if={@empty != []}
id={@id}
name="empty"
size={@size}
shape={@shape}
tone={:solid}
>
{render_slot(@empty)}
<% choosable?(assigns) and @empty == [] -> %>
<.frame
as={:button}
id={@id}
name="open-picker"
size={@size}
shape={@shape}
tone={:dashed}
phx-click="open_picker"
phx-target={@myself}
aria-busy={to_string(@pending_scope)}
title={gettext("Choose image")}
>
<.icon :if={not @pending_scope} name="hero-photo" class={icon_class(@size)} />
{gettext("Choose image")}
<% choosable?(assigns) -> %>
<.frame
as={:button}
id={@id}
name="open-picker"
size={@size}
shape={@shape}
tone={:solid}
phx-click="open_picker"
phx-target={@myself}
aria-label={gettext("Choose image")}
aria-busy={to_string(@pending_scope)}
title={gettext("Choose image")}
>
{render_slot(@empty)}
<% @empty_hint != [] -> %>
{render_slot(@empty_hint)}
<% @empty != [] -> %>
<.frame id={@id} name="empty" size={@size} shape={@shape} tone={:solid}>
{render_slot(@empty)}
<% true -> %>
<.frame
id={@id}
name="empty"
size={@size}
shape={@shape}
tone={:solid}
role="img"
aria-label={label_text(@label)}
>
<.icon name="hero-photo" class={icon_class(@size) <> " opacity-60"} />
<% end %>
<% :ok -> %>
<%= cond do %>
<% @preview_click -> %>
<.frame
as={:button}
id={@id}
name="thumb"
size={@size}
shape={@shape}
tone={:image}
phx-click={@preview_click}
aria-label={gettext("View")}
title={gettext("View")}
{@preview_values}
>
<.thumb_img id={@id} file={@file} size={@size} />
<% not @readonly and choosable?(assigns) -> %>
<.frame
as={:button}
id={@id}
name="thumb"
size={@size}
shape={@shape}
tone={:image}
phx-click="open_picker"
phx-target={@myself}
aria-label={gettext("Change image")}
title={gettext("Change image")}
>
<.thumb_img id={@id} file={@file} size={@size} />
<% true -> %>
<.frame id={@id} name="thumb" size={@size} shape={@shape} tone={:image}>
<.thumb_img id={@id} file={@file} size={@size} />
<% end %>
<% :processing -> %>
<.frame
id={@id}
name="processing"
size={@size}
shape={@shape}
tone={:solid}
role="status"
title={gettext("Processing image…")}
>
{gettext("Processing image…")}
<% :dangling -> %>
<%= cond do %>
<% @readonly and @empty == [] -> %>
<%!-- A viewer cannot act on a missing image, so it gets what an
empty control gets: nothing, or the host's own placeholder. --%>
<% @readonly -> %>
<.frame id={@id} name="empty" size={@size} shape={@shape} tone={:solid}>
{render_slot(@empty)}
<% @empty != [] -> %>
<%!-- Avatars keep their initials; the missing image is only marked
(title + screen-reader text) and the menu still offers Remove. --%>
<.frame
id={@id}
name="dangling"
size={@size}
shape={@shape}
tone={:solid}
title={gettext("Image missing")}
>
{render_slot(@empty)}
{gettext("Image missing")}
<% true -> %>
<.frame
id={@id}
name="dangling"
size={@size}
shape={@shape}
tone={:warning}
role="img"
aria-label={gettext("Image missing")}
title={gettext("Image missing")}
>
<.icon name="hero-exclamation-triangle" class={icon_class(@size)} />
{gettext("Image missing")}
<% end %>
<% end %>
<%!-- Always visible, beside the thumbnail rather than over it: a hover-only
control is unreachable on a touch screen. --%>
<.table_row_menu
id={"#{@id}-menu"}
label={gettext("Image actions")}
trigger_size={trigger_size(@size)}
>
<.table_row_menu_button
:if={@display == :ok and @preview_click}
icon="hero-eye"
label={gettext("View")}
data-role={role(@id, "view")}
phx-click={@preview_click}
{@preview_values}
/>
<.table_row_menu_button
:if={choosable?(assigns)}
icon="hero-photo"
label={gettext("Change image")}
data-role={role(@id, "change")}
phx-click="open_picker"
phx-target={@myself}
/>
<.table_row_menu_divider :if={
choosable?(assigns) or (@display == :ok and @preview_click != nil)
} />
<.table_row_menu_button
icon="hero-trash"
label={gettext("Remove image")}
variant="error"
data-role={role(@id, "remove")}
data-confirm={@confirm_remove}
phx-click="clear"
phx-target={@myself}
/>