Image

<script type="application/json" data-specimen-failures phx-no-curly-interpolation>{"resources":["data:image/png;base64,T2FrbWVyZSBIYWxsIGxldHRlcmhlYWQ=","../../media/oakmere-hall-porch.png"],"errors":[]}</script>
<% letterhead_data = "image/png;base64,T2FrbWVyZSBIYWxsIGxldHRlcmhlYWQ=" %>
<% letterhead = "data:" <> letterhead_data %>
<Kit.Phoenix.Roles.FactGroup.fact_group>
  <Kit.Phoenix.Roles.LabelledFact.labelled_fact>
    <:name>Hall name</:name>
    <:value>Oakmere Village Hall</:value>
  </Kit.Phoenix.Roles.LabelledFact.labelled_fact>
  <Kit.Phoenix.Roles.LabelledFact.labelled_fact>
    <:name>Logo</:name>
    <:value><Kit.Phoenix.Roles.Image.image id="image-logo" overlay="image-logo-overlay" src="../../media/oakmere-hall-wordmark.svg" alt="Oakmere Hall wordmark" width={1200} height={120} failure_words="The logo cannot be shown." /></:value>
  </Kit.Phoenix.Roles.LabelledFact.labelled_fact>
  <Kit.Phoenix.Roles.LabelledFact.labelled_fact>
    <:name>Condition photo</:name>
    <:value><Kit.Phoenix.Roles.Image.image id="image-photo" overlay="image-photo-overlay" src="../../chair-damage.svg" alt="Chair with a split seat, photographed after a hall booking." width={800} height={500} failure_words="The photo cannot be shown." /></:value>
  </Kit.Phoenix.Roles.LabelledFact.labelled_fact>
  <Kit.Phoenix.Roles.LabelledFact.labelled_fact>
    <:name>Letterhead</:name>
    <:value><Kit.Phoenix.Roles.Image.image id="image-letterhead" overlay="image-letterhead-overlay" src={letterhead} alt="Oakmere Hall letterhead" width={1240} height={1754} failure_words="The letterhead cannot be shown." /></:value>
  </Kit.Phoenix.Roles.LabelledFact.labelled_fact>
</Kit.Phoenix.Roles.FactGroup.fact_group>
<Kit.Phoenix.Roles.ImageOverlay.image_overlay id="image-logo-overlay" failure_words="The logo cannot be shown." tabindex="-1" aria-labelledby="image-logo-overlay-caption" open_file_href="../../media/oakmere-hall-wordmark.svg" close_href="#image-logo" actions_label="Hall images" width={1200} height={120} image_rest={%{src: "../../media/oakmere-hall-wordmark.svg", alt: "Oakmere Hall wordmark"}}>
  <:steps previous_href={nil} next_href="#image-photo-overlay" index={1} total={2} first_label="Previous image, the first image" last_label="Next image, the last image" />
  <:caption rest={%{id: "image-logo-overlay-caption"}}>Oakmere Hall wordmark</:caption>
</Kit.Phoenix.Roles.ImageOverlay.image_overlay>
<Kit.Phoenix.Roles.ImageOverlay.image_overlay id="image-photo-overlay" failure_words="The photo cannot be shown." tabindex="-1" aria-labelledby="image-photo-overlay-caption" open_file_href="../../chair-damage.svg" close_href="#image-photo" actions_label="Hall images" width={800} height={500} image_rest={%{src: "../../chair-damage.svg", alt: "Chair with a split seat, photographed after a hall booking."}}>
  <:steps previous_href="#image-logo-overlay" next_href={nil} index={2} total={2} first_label="Previous image, the first image" last_label="Next image, the last image" />
  <:caption rest={%{id: "image-photo-overlay-caption"}}>Split chair seat</:caption>
</Kit.Phoenix.Roles.ImageOverlay.image_overlay>
<Kit.Phoenix.Roles.ImageOverlay.image_overlay id="image-letterhead-overlay" failure_words="The letterhead cannot be shown." tabindex="-1" aria-labelledby="image-letterhead-overlay-caption" open_file_href={{:data, letterhead_data}} close_href="#image-letterhead" actions_label="Hall images" width={1240} height={1754} image_rest={%{src: letterhead, alt: "Oakmere Hall letterhead"}}>
  <:caption rest={%{id: "image-letterhead-overlay-caption"}}>Oakmere Hall letterhead</:caption>
</Kit.Phoenix.Roles.ImageOverlay.image_overlay>
<Kit.Phoenix.Roles.FormGroup.form_group id="image-hall-pictures-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.file()} control_rest={%{id: "image-hall-pictures", name: "pictures", multiple: true, accept: "image/*"}}>
  <:label rest={%{for: "image-hall-pictures"}}>Hall pictures</:label>
  <:file name="oakmere-hall-crest.svg" name_id="image-hall-pictures-crest" state="chosen" state_words="Chosen"><Kit.Phoenix.Roles.Image.chosen id="image-crest" source={Kit.Phoenix.Roles.Image.Source.src("../../media/oakmere-hall-crest.svg")} alt="Oakmere Hall crest" /></:file>
  <:file name="oakmere-hall-porch.png" name_id="image-hall-pictures-porch" state="chosen" state_words="Chosen"><Kit.Phoenix.Roles.Image.chosen id="image-porch" source={Kit.Phoenix.Roles.Image.Source.src("../../media/oakmere-hall-porch.png")} alt="Oakmere Hall porch" /></:file>
  <:help>Accepts images.</:help>
</Kit.Phoenix.Roles.FormGroup.form_group>