<div class="hotgraphic-inner component-inner">
  {{> component this}}
  <div class="hotgraphic-widget component-widget {{#unless _useGraphicsAsPins}}pin{{else}}tile{{/unless}}">
    <div class="hotgraphic-popup" role="dialog" aria-label="{{_globals._components._hotgraphic.ariaPopupLabel}}">

        <div class="hotgraphic-popup-toolbar component-item-color clearfix">
          {{#unless _hidePagination}}
          <div class="hotgraphic-popup-nav component-item-color">
            <button class="base hotgraphic-popup-controls back" aria-label="{{_globals._accessibility._ariaLabels.previous}}" role="button">
              <div class="hotgraphic-popup-arrow-l component-item-text-color icon icon-controls-small-left"></div>
            </button>
            <div class="hotgraphic-popup-count component-item-text-color">
              <span class="current">1</span>/<span class="total">3</span>
            </div>
            <button class="base hotgraphic-popup-controls next" aria-label="{{_globals._accessibility._ariaLabels.next}}" role="button">
              <div class="hotgraphic-popup-arrow-r component-item-text-color icon icon-controls-small-right"></div>
            </button>
          </div>
          {{/unless}}
          <button class="base hotgraphic-popup-done" aria-label="{{_globals._accessibility._ariaLabels.closePopup}}" role="button">
            <div class="hotgraphic-popup-close component-item-text-color icon icon-cross"></div>
          </button>
        </div>

        <div class="hotgraphic-popup-inner clearfix">
          {{#each _items}}
          <div class="hotgraphic-item component-item item-{{@index}} {{_classes}}">
            <div class="hotgraphic-item-graphic">
              <div class="hotgraphic-item-graphic-inner">
                <img src="{{_graphic.src}}" aria-label="{{_graphic.alt}}" tabindex="0"/>
              </div>
              {{#if ../_isZoomAllowed}}
              <button id="{{@index}}" class=" base image-zoomer" role="button" aria-expanded="false" >
                  <span class="image-zoomer-text icon icon-expand"></span>
              </button>
              {{/if}}
            </div>
            <div class="hotgraphic-item-content">
              <div class="hotgraphic-item-content-inner">
                <div class="hotgraphic-content-title accessible-text-block" role="heading" aria-level="5" tabindex="0">
                  {{{title}}}
                </div>
                <div class="hotgraphic-content-body">
                  {{{a11y_text body}}}
                </div>
              </div>
            </div>
          </div>
          {{/each}}
        </div>
      </div>
    <div class="hotgraphic-graphic"{{#unless _useGraphicsAsPins}} role="list"{{/unless}}>
      {{#unless _useGraphicsAsPins}}
        <img src="{{_graphic.src}}" {{#if _graphic.alt}}aria-label="{{_graphic.alt}}"{{else}}aria-hidden="true"{{/if}}/>
        {{#if _graphic.attribution}}
          <div class="graphic-attribution">{{{_graphic.attribution}}}</div>
        {{/if}}
        {{#each _items}}
          <div class="hotgraphic-graphic-pin-list-item" role="listitem">
            <button class="base hotgraphic-graphic-pin component-item-text-color {{#if _isVisited}}visited{{/if}}{{#if _pin.src}} has-pin-image{{/if}}" data-index="{{@index}}" style="top:{{{_top}}}%; left:{{{_left}}}%;">
              <span class="aria-label">{{title}}.{{#if _isVisited}} {{../_globals._accessibility._ariaLabels.visited}}.{{/if}}</span>
              {{#if _pin.src}}
                <div class="hotgraphic-graphic-pin-image item-{{@index}}">
                  <img src="{{_pin.src}}" aria-label="{{_pin.alt}}">
                </div>
              {{else}}
                <div class="hotgraphic-graphic-pin-icon component-item-color icon icon-pin item-{{@index}}"></div>
              {{/if}}
            </button>
          </div>
        {{/each}}
      {{else}}
        <div class="hotgraphic-narrative" role="list">
          {{#each _items}}
            <div class="hotgraphic-graphic-pin-list-item" role="listitem">
              <button class="base hotgraphic-graphic-pin component-item-text-color {{#if _isVisited}}visited{{/if}} hotgraphic-graphic-pin-{{@index}} {{#if _graphic._classes}}{{_graphic._classes}}{{/if}}" data-index="{{@index}}" style="top:{{{_top}}}%; left:{{{_left}}}%;">
                <span class="aria-label">{{title}}.{{#if _isVisited}} {{../_globals._accessibility._ariaLabels.visited}}.{{/if}}</span>
                <div class="hotgraphic-graphic-pin-image component-item-color item-{{@index}}" style="background-image: url({{_graphic.src}})"></div>
              </button>
            </div>
          {{/each}}
        </div>
      {{/unless}}
    </div>
  </div>
</div>
