{{! Maintainers - Himanshu Rajotia <himanshu.rajotia@exultcorp.com>}}
<div class="flipcard-inner component-inner" role="region" aria-label="{{_globals._components._flipcard.ariaRegion}}">
    {{> component this}}
    <div class="flipcard-widget component-widget clearfix">

        {{#each _items}}
        <div class="flipcard-item component-item item-{{@index}}" id="{{@index}}">
            <div class="flipcard-item-face flipcard-item-front">
              <div class="front-item">
                  <div class="front-body-title">
                      {{{frontImage.body}}}
                  </div>

                  <img src="{{frontImage.src}}" class="" aria-label="{{frontImage.alt}}" tabindex="0"><br>

              </div>
            </div>

            <div class="flipcard-item-face flipcard-item-back">
                {{#if backTitle}}
                <div class="flipcard-item-back-title">
                {{{backTitle}}}
                </div>
                {{/if}}
                {{#if backBody}}
                <div class="flipcard-item-back-body">
                {{{backBody}}}
                </div>
                {{/if}}
            </div>
        </div>
        {{/each}}
    </div>
    <div class="example-btn" style="display:none;">
        <div class="example-text">
            <p>{{{text}}}</p>
        </div>
        <button type="button" class="btn btn-primary">Example</button>
    </div>
</div>