{{!-- BEGIN-SNIPPET nypr-m-gallery-lead.hbs --}}
<div class="c-lead-gallery__top">

  <NyprMFigure
    data-test-gallery-lead-preview
    as |figure|>
    <figure.image
      @srcS={{this.currentSlide.srcS}}
      @alt={{this.currentSlide.alt}}
      onclick={{action 'goToSlide'}}
      data-test-gallery-current
    />

    <figure.figcaption as |caption|>
      {{#if this.currentSlide.credit}}
        <caption.credit @credit={{this.currentSlide.credit}} @creditLink={{this.currentSlide.creditLink}} @includeIcon={{unless this.currentSlide.caption true}}/>
      {{/if}}

      {{#if this.currentSlide.title}}
        <h2 class="c-lead-gallery__title">{{this.currentSlide.title}}</h2>
      {{/if}}

      {{#if this.currentSlide.caption}}
        <caption.caption @caption={{this.currentSlide.caption}} />
      {{/if}}
    </figure.figcaption>
  </NyprMFigure>

</div>

<div class="c-lead-gallery__thumbs">
  {{#each @slides as |slide i|}}
    {{#if (lt i 4)}}
      <button {{action 'setCurrent' i}} class="c-lead-gallery__thumbs-thumb {{if (eq this.currentIndex i) 'is-active'}}" data-test-gallery-thumb={{i}}>
        <img
          src={{slide.thumb}}
          srcset={{slide.thumbSrcSet}}
          alt={{slide.alt}}
        >
      </button>
    {{/if}}
  {{/each}}
  <button
    data-test-gallery-lead-view-all
    class="c-lead-gallery__thumbs-thumb c-lead-gallery__thumbs-thumb-text u-font--secondary-style u-font--xs"
    {{action (optional @viewAll)}}
  >
    View all
    <span>{{@slides.length}}</span>
  </button>
</div>
{{!-- END-SNIPPET --}}