Showcase

<% photos = [
  {"showcase-supper-1", "../../carousel/main-hall.svg", "Main hall set with long tables for supper", 3000, 750, "Long tables"},
  {"showcase-supper-2", "../../carousel/tables.svg", "Two tables laid for tea", 1600, 900, "Tea tables"},
  {"showcase-supper-3", "../../carousel/kitchen.svg", "Kitchen counters ready for service", 1600, 1200, "Kitchen"},
  {"showcase-recital", "../../carousel/piano.svg", "Upright piano beside the stage", 1000, 1000, "Piano"},
  {"showcase-wedding-1", "../../carousel/garden.svg", "Garden behind the hall set for a wedding", 1920, 1080, "Garden"},
  {"showcase-wedding-2", "../../carousel/porch.svg", "Porch at the main door hung with flowers", 1000, 1000, "Porch"},
  {"showcase-wedding-3", "../../carousel/dusk.svg", "The hall at dusk with its windows lit", 2400, 800, "Hall at dusk"}
] %>
<% overlay = fn {id, _, _, _, _, _} -> id <> "-overlay" end %>
<% item = fn {id, src, alt, width, height, _} -> %{id: id, overlay: id <> "-overlay", src: src, alt: alt, width: width, height: height} end %>
<Kit.Phoenix.Layouts.Showcase.showcase print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} id="showcase" density="desk">
  <:letterhead tenant="Oakmere Hall" logo="../../media/oakmere-hall-crest.svg" width={480} height={360} />
  <:title>Events at the hall</:title>
  <:actions><Kit.Phoenix.Roles.PrimaryAction.primary_action href="?quote">Ask for a quote</Kit.Phoenix.Roles.PrimaryAction.primary_action></:actions>
  <Kit.Phoenix.Layouts.Showcase.example heading="Harvest supper">
    <:photos>
      <Kit.Phoenix.Roles.Carousel.carousel id="showcase-supper" line={&"#{&1} photos of the harvest supper"}>
        <:item :for={photo <- Enum.slice(photos, 0, 3)} id={item.(photo).id} overlay={item.(photo).overlay} src={item.(photo).src} alt={item.(photo).alt} width={item.(photo).width} height={item.(photo).height} failure_words="The photo cannot be shown." />
      </Kit.Phoenix.Roles.Carousel.carousel>
    </:photos>
    <:caption><p>Supper for 120 at long tables in the main hall, cooked in the hall kitchen and served from the hatch.</p></:caption>
  </Kit.Phoenix.Layouts.Showcase.example>
  <Kit.Phoenix.Layouts.Showcase.example heading="Piano recital">
    <:photos>
      <Kit.Phoenix.Roles.Image.image id="showcase-recital" overlay="showcase-recital-overlay" src="../../carousel/piano.svg" alt="Upright piano beside the stage" width={1000} height={1000} failure_words="The photo cannot be shown." />
    </:photos>
    <:caption><p>An evening recital on the hall's upright piano, with seats for 60 facing the stage.</p></:caption>
  </Kit.Phoenix.Layouts.Showcase.example>
  <Kit.Phoenix.Layouts.Showcase.example heading="Garden wedding">
    <:photos>
      <Kit.Phoenix.Roles.Carousel.carousel id="showcase-wedding" line={&"#{&1} photos of the garden wedding"}>
        <:item :for={photo <- Enum.slice(photos, 4, 3)} id={item.(photo).id} overlay={item.(photo).overlay} src={item.(photo).src} alt={item.(photo).alt} width={item.(photo).width} height={item.(photo).height} failure_words="The photo cannot be shown." />
      </Kit.Phoenix.Roles.Carousel.carousel>
    </:photos>
    <:caption><p>A ceremony in the garden for 80 guests, then dinner and dancing in the main hall until eleven.</p><p>The porch and garden were dressed by the couple's own florist.</p></:caption>
  </Kit.Phoenix.Layouts.Showcase.example>
  <:foot wordmark="kit" />
</Kit.Phoenix.Layouts.Showcase.showcase>
<%= for {{id, src, alt, width, height, caption} = photo, index} <- Enum.with_index(photos, 1) do %>
<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={"#" <> id} actions_label="Event 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 %>