Image overlay

<% image = "data:image/svg+xml;base64," <> Base.encode64(File.read!("specimen/css/chair-damage.svg")) %>
<p id="booking-images" tabindex="-1">Review the booking photo on a <a href="#booking-image-desk">desktop</a> or a <a href="#booking-image-phone">phone</a>.</p>
<Kit.Phoenix.Roles.ImageOverlay.image_overlay id="booking-image-desk" failure_words="The photo can't be shown." tabindex="-1" aria-labelledby="booking-image-desk-caption" open_file_href="../../chair-damage.svg" close_href="#booking-images" actions_label="Booking photo" width={800} height={500} image_rest={%{src: image, alt: "Chair with a split seat, photographed after the Oakmere WI booking."}}>
  <:steps previous_href={nil} next_href="#booking-image-phone" index={1} total={2} first_label="Previous photo, the first photo" last_label="Next photo, the last photo" />
  <:caption rest={%{id: "booking-image-desk-caption"}}>Split chair seat, front view</:caption>
</Kit.Phoenix.Roles.ImageOverlay.image_overlay>
<Kit.Phoenix.Roles.ImageOverlay.image_overlay id="booking-image-phone" failure_words="The photo can't be shown." tabindex="-1" aria-labelledby="booking-image-phone-caption" open_file_href="../../chair-damage.svg" close_href="#booking-images" actions_label="Booking photo" width={800} height={500} image_rest={%{src: image, alt: "Chair with a split seat, photographed after the Oakmere WI booking."}}>
  <:steps previous_href="#booking-image-desk" next_href={nil} index={2} total={2} first_label="Previous photo, the first photo" last_label="Next photo, the last photo" />
  <:caption rest={%{id: "booking-image-phone-caption"}}>Split chair seat, side view</:caption>
</Kit.Phoenix.Roles.ImageOverlay.image_overlay>

<% image_data = "image/svg+xml;base64," <> Base.encode64(File.read!("specimen/css/chair-damage.svg")) %>
<% tall_data = "image/svg+xml;base64," <> Base.encode64(File.read!("specimen/css/chair-damage-tall.svg")) %>
<% image = "data:" <> image_data %>
<% tall = "data:" <> tall_data %>
<p id="booking-images-open" tabindex="-1">The fragment opens this image without a script: <a href="#booking-image-open">open the booking photo</a>, <a href="#booking-image-open-single">open a photo that stands alone</a>, or <a href="#booking-image-open-wide">open the row of chairs</a>.</p>
<Kit.Phoenix.Roles.ImageOverlay.image_overlay open id="booking-image-open" failure_words="The photo can't be shown." tabindex="-1" aria-labelledby="booking-image-open-caption" open_file_href={{:data, tall_data}} close_href="#booking-images-open" actions_label="Open booking photo" width={800} height={2000} image_rest={%{src: tall, alt: "Split chair seat and the hall wall behind it, photographed after the Oakmere WI booking."}}>
  <:steps previous_href={nil} next_href="#booking-image-open-last" index={1} total={2} first_label="Previous photo, the first photo" last_label="Next photo, the last photo" />
  <:caption rest={%{id: "booking-image-open-caption"}}>Split chair seat, front view</:caption>
</Kit.Phoenix.Roles.ImageOverlay.image_overlay>
<Kit.Phoenix.Roles.ImageOverlay.image_overlay id="booking-image-open-last" failure_words="The photo can't be shown." tabindex="-1" aria-labelledby="booking-image-open-last-caption" open_file_href={{:data, image_data}} close_href="#booking-images-open" actions_label="Open booking photo" width={800} height={500} image_rest={%{src: image, alt: "Chair with a split seat, photographed after the Oakmere WI booking."}}>
  <:steps previous_href="#booking-image-open" next_href={nil} index={2} total={2} first_label="Previous photo, the first photo" last_label="Next photo, the last photo" />
  <:caption rest={%{id: "booking-image-open-last-caption"}}>Split chair seat, side view</:caption>
</Kit.Phoenix.Roles.ImageOverlay.image_overlay>
<Kit.Phoenix.Roles.ImageOverlay.image_overlay id="booking-image-open-single" failure_words="The photo can't be shown." tabindex="-1" aria-labelledby="booking-image-open-single-caption" open_file_href={{:data, image_data}} close_href="#booking-images-open" actions_label="Open booking photo" width={800} height={500} image_rest={%{src: image, alt: "Chair with a split seat, photographed after the Oakmere WI booking."}}>
  <:caption rest={%{id: "booking-image-open-single-caption"}}>Split chair seat, front view</:caption>
</Kit.Phoenix.Roles.ImageOverlay.image_overlay>
<Kit.Phoenix.Roles.ImageOverlay.image_overlay id="booking-image-open-wide" failure_words="The photo can't be shown." tabindex="-1" aria-labelledby="booking-image-open-wide-caption" open_file_href="../../media/chair-damage-wide.svg" close_href="#booking-images-open" actions_label="Open booking photo" width={960} height={320} image_rest={%{src: "../../media/chair-damage-wide.svg", alt: "A row of hall chairs, the third with a split seat, photographed after the Oakmere WI booking."}}>
  <:caption rest={%{id: "booking-image-open-wide-caption"}}>Hall chairs in a row</:caption>
</Kit.Phoenix.Roles.ImageOverlay.image_overlay>

Open the booking photo.

<details>
  <summary>Photo while the upload finishes</summary>
  <p id="booking-images-inert" tabindex="-1"><a href="#booking-image-inert">Open the booking photo</a>.</p>
  <Kit.Phoenix.Roles.ImageOverlay.image_overlay id="booking-image-inert" failure_words="The photo can't be shown." tabindex="-1" aria-labelledby="booking-image-inert-caption" open_file_href="../../chair-damage.svg" close_href="#booking-images-inert" actions_label="Booking photo" width={800} height={500} image_rest={%{src: "../../chair-damage.svg", alt: "Chair with a split seat, photographed after the Oakmere WI booking."}} open_file_state={Kit.Phoenix.ActionState.inert("role-image-overlay-inert-open-file", "Open file waits until the photo has uploaded.")} close_state={Kit.Phoenix.ActionState.inert("role-image-overlay-inert-close", "Close waits until the photo has uploaded.")}>
    <:caption rest={%{id: "booking-image-inert-caption"}}>Split chair seat, front view</:caption>
  </Kit.Phoenix.Roles.ImageOverlay.image_overlay>
</details>