{{!-- BEGIN-SNIPPET nypr-o-gallery-overlay-slide.hbs --}}
<div class="c-slide__header u-spacing--half l-wrap l-container--content">
  {{#if @slide.title}}
    <h2 class="c-slide__heading u-font--l">{{@slide.title}}</h2>
  {{/if}}
  <div class="c-slide__count u-font--secondary-style u-color--gray--light u-font--xs">
    Slide {{this.count}} of {{@total}}
  </div>
</div>

<div class="c-slide__content u-spacing">

  <div class="c-slide__media u-spacing--half">

    <div class="c-slide__image">
      {{!-- TODO: refactor for lazy loaded images --}}
      <NyprAPicture
        @width={{@slide.width}}
        @height={{@slide.height}}
        @alt={{@slide.alt}}
        @srcSet={{@slide.srcSet}}
        @srcS={{@slide.srcS}}
        @srcM={{@slide.srcM}}
        @srcL={{@slide.srcL}}
        @srcXL={{@slide.srcXL}}
        @breakM={{@breakM}}
        @breakL={{@breakL}}
        @breakXL={{@breakXL}}
      />
    </div>

    <div class="c-slide__meta l-wrap l-container--content">

      {{#if @slide.credit}}
        <span class="o-credit">
          <span class="is-vishidden">image credit </span>
          {{#if @slide.creditLink}}
            <a href={{@slide.creditLink}} target="_blank" rel="noopener">
              {{{@slide.credit}}}
            </a>
          {{else}}
            {{{@slide.credit}}}
          {{/if}}
        </span>
      {{/if}}

      <NyprAToggleBox
        class="c-toggle-box--share"
        @calculatePosition={{this.calculatePosition}}
        @renderInPlace={{true}}
        as |toggle|>
        <toggle.trigger @ariaLabel="Share this image">
          <strong>Share</strong>
        </toggle.trigger>

        <toggle.dropdown>
          <NyprMShareTools as |tools|>
            <tools.share
              @service='facebook'
              @url={{this.shareURL}}
              @ariaLabel="Share on Facebook"
              @utm={{@share.facebook.utm}}
            />
            <tools.share
              @service='twitter'
              @url={{this.shareURL}}
              @ariaLabel="Share on Twitter"
              @utm={{@share.twitter.utm}}
              @params={{hash
                text=@share.twitter.text
                via=@share.twitter.via
            }}/>
            <tools.share
              @service='reddit'
              @url={{this.shareURL}}
              @ariaLabel="Share on Reddit"
              @utm={{@share.reddit.utm}}
              @params={{hash
                title=@share.reddit.title
            }}/>
            <tools.share
              @service='email'
              @url={{this.shareURL}}
              @ariaLabel="Share via email"
              @utm={{@share.email.utm}}
              @params={{hash
                subject=@share.email.subject
                body=@share.email.body
            }}/>
          </NyprMShareTools>
        </toggle.dropdown>
      </NyprAToggleBox>
    </div>

  </div>

  <div class="c-slide__dek o-rte-text l-wrap l-container--content">
    <p>{{{@slide.caption}}}</p>
  </div>

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