Carousel

<% failed_data = "image/png;base64,Q29tbWl0dGVlIHJvb20=" %>
<% failed = "data:" <> failed_data %>
<% photos = [
  {"hall-photos", 1, "../../carousel/hall-front.svg", "Front of the hall from the lane", 1200, 800, "Front of the hall"},
  {"hall-photos", 2, "../../carousel/main-hall.svg", "Main hall set with long tables", 3000, 750, "Main hall"},
  {"hall-photos", 3, "../../carousel/stage.svg", "Stage with its curtains open", 900, 1200, "Stage"},
  {"hall-photos", 4, "../../carousel/kitchen.svg", "Kitchen counters and cupboards", 1600, 1200, "Kitchen"},
  {"hall-photos", 6, "../../carousel/garden.svg", "Garden behind the hall", 1920, 1080, "Garden"},
  {"hall-photos", 7, "../../carousel/porch.svg", "Porch at the main door", 1000, 1000, "Porch"},
  {"hall-photos", 8, "../../carousel/car-park.svg", "Car park beside the hall", 1500, 1000, "Car park"},
  {"room-photos", 1, "../../carousel/chairs.svg", "Chairs stacked along the wall", 1200, 800, "Stacked chairs"},
  {"room-photos", 2, "../../carousel/tables.svg", "Two tables laid for tea", 1600, 900, "Tea tables"},
  {"room-photos", 3, "../../carousel/dusk.svg", "The hall at dusk with its windows lit", 2400, 800, "Hall at dusk"},
  {"room-photos", 4, "../../carousel/piano.svg", "Upright piano beside the stage", 1000, 1000, "Piano"},
  {"door-photos", 1, "../../carousel/noticeboard.svg", "Noticeboard inside the side door", 600, 800, "Noticeboard"},
  {"door-photos", 2, "../../carousel/doorway.svg", "Side door from the path", 600, 800, "Side door"}
] %>
<% overlay = fn {carousel, n, _, _, _, _, _} -> "#{carousel}-#{n}-overlay" end %>
<% hall = Enum.filter(photos, &(elem(&1, 0) == "hall-photos")) %>
<% room = Enum.filter(photos, &(elem(&1, 0) == "room-photos")) %>
<% door = Enum.filter(photos, &(elem(&1, 0) == "door-photos")) %>
<Kit.Phoenix.Roles.Carousel.carousel id="hall-photos" line={&"#{&1} photos of the hall"}>
  <:item :for={{_, n, src, alt, width, height, _} <- Enum.take(hall, 4)} id={"hall-photos-#{n}"} overlay={"hall-photos-#{n}-overlay"} src={src} alt={alt} width={width} height={height} failure_words="The photo cannot be shown." />
  <:item id="hall-photos-5" overlay="hall-photos-5-overlay" src={failed} alt="Committee room with chairs round a table" width={1200} height={900} failure_words="The photo cannot be shown." />
  <:item :for={{_, n, src, alt, width, height, _} <- Enum.drop(hall, 4)} id={"hall-photos-#{n}"} overlay={"hall-photos-#{n}-overlay"} src={src} alt={alt} width={width} height={height} failure_words="The photo cannot be shown." />
</Kit.Phoenix.Roles.Carousel.carousel>
<Kit.Phoenix.Roles.Carousel.carousel id="room-photos" line={&"#{&1} photos of the hall set for an event"}>
  <:item :for={{_, n, src, alt, width, height, _} <- room} id={"room-photos-#{n}"} overlay={"room-photos-#{n}-overlay"} src={src} alt={alt} width={width} height={height} failure_words="The photo cannot be shown." rest={if n == 4, do: %{style: "scroll-initial-target: nearest"}, else: %{}} />
</Kit.Phoenix.Roles.Carousel.carousel>
<Kit.Phoenix.Roles.Carousel.carousel id="door-photos" line={&"#{&1} photos of the side door"}>
  <:item :for={{_, n, src, alt, width, height, _} <- door} id={"door-photos-#{n}"} overlay={"door-photos-#{n}-overlay"} src={src} alt={alt} width={width} height={height} failure_words="The photo cannot be shown." />
</Kit.Phoenix.Roles.Carousel.carousel>
<%= for {{carousel, n, src, alt, width, height, caption} = photo, index} <- Enum.with_index(photos, 1) do %>
<%= if {carousel, n} == {"hall-photos", 6} do %>
<Kit.Phoenix.Roles.ImageOverlay.image_overlay id="hall-photos-5-overlay" failure_words="The photo cannot be shown." tabindex="-1" aria-labelledby="hall-photos-5-overlay-caption" open_file_href={{:data, failed_data}} close_href="#hall-photos-5" actions_label="Hall photos" width={1200} height={900} image_rest={%{src: failed, alt: "Committee room with chairs round a table"}}>
  <:caption rest={%{id: "hall-photos-5-overlay-caption"}}>Committee room</:caption>
</Kit.Phoenix.Roles.ImageOverlay.image_overlay>
<% end %>
<Kit.Phoenix.Roles.ImageOverlay.image_overlay id={overlay.(photo)} failure_words="The photo cannot be shown." tabindex="-1" aria-labelledby={overlay.(photo) <> "-caption"} open_file_href={src} close_href={"##{carousel}-#{n}"} actions_label="Hall photos" width={width} height={height} image_rest={%{src: src, alt: alt}}>
  <:steps previous_href={if index > 1, do: "#" <> overlay.(Enum.at(photos, index - 2))} next_href={if index < length(photos), do: "#" <> overlay.(Enum.at(photos, index))} index={index} total={length(photos)} first_label="Previous photo, the first photo" last_label="Next photo, the last photo" />
  <:caption rest={%{id: overlay.(photo) <> "-caption"}}>{caption}</:caption>
</Kit.Phoenix.Roles.ImageOverlay.image_overlay>
<% end %>