{{!-- BEGIN-SNIPPET nypr-o-gallery-overlay.hbs --}}
<div class="c-gallery-overlay">

  <div class="l-container l-container--xl u-spacing--double">

    <div class="l-wrap l-container--content">
      {{#if @parentRoute}}
        {{#link-to params=@parentRoute class="o-back-to-link" aria-label=(concat "Related Article: " @title)}}
          <span class="o-icon o-icon--prev-caret u-path-fill--white u-icon--xs">
            <Icon @icon="simple-arrow-down" @title="caret down"/>
          </span>
          <span class="u-has-accent u-has-accent--white" data-test-gallery-title>
            {{{@title}}}
          </span>
        {{/link-to}}
      {{/if}}
    </div>

    <div class="u-spacing--quad c-slides">

      {{#each @slides as |slide i|}}
        {{nypr-o-gallery-overlay/slide
          register=(action this.registerSlide)
          slide=slide
          index=i
          total=@slides.length
          data-test-gallery-slide=i
          share=@share
          breakM=@breakM
          breakL=@breakL
          breakXL=@breakXL
        }}

        {{yield i (hash billboard=(component 'nypr-o-gallery-overlay/billboard'))}}
      {{/each}}

      <span class="o-end-label c-gallery-end-label u-font--secondary-style u-font--xs u-color--gray" aria-description="End of Gallery">
        <span class="o-icon o-icon--down-arrow u-icon--m">
          <Icon @icon="gothamist/arrow" @title="arrow"/>
        </span>
        End
      </span>

    </div>

    <div class="u-align--center">
      {{#if @parentRoute}}
        {{#link-to params=@parentRoute class="o-button c-gallery-overlay__back o-button--c-quaternary" aria-label=(concat "Back to Article: " @title)}}
          Back to Article
        {{/link-to}}
      {{/if}}
    </div>

  </div>
</div>
{{!-- END-SNIPPET --}}