{{! Maintainers - Himanshu Rajotia <himanshu.rajotia@exultcorp.com>}}
<div class="flipcard-inner component-inner mr_wrapper_container1" role="region" aria-label="{{_globals._components._flipcard.ariaRegion}}" style="background-color: {{bgColor}};">
   <div class="flipcardPageWrapper">
    <div class="textHeading">
      <p tabindex="0" role="heading" style="color: {{titleColor}}">{{{title}}}</p>
    </div>
    <div class="flipcardcontentpart">
       <span tabindex="0"> {{> component this}}</span>
    <div class="flipcard-widget component-widget clearfix" >
        {{#each _items}}
        <div class="flipcard-item-inner" style="position: relative;">            
        <button class="flipcard-item component-item item-{{@index}}" data-index="{{@index}}" role="button">
            <div class="flipcard-item-face flipcard-item-front">
                {{!-- <img src="{{frontImage.src}}" class="flipcard-item-frontImage" aria-label="{{frontImage.alt}}"> --}}
                {{#if frontBody}}
                <div class="flipcard-item-front-body">
                 <span id="frontText" style="display: block; padding: 10px;">{{{frontBody}}}</span>
                </div>
                {{/if}}
                {{!-- <div class="flipcard_face" aria-label="{{frontImage.alt}}" tabindex="0">
                    {{{frontImage.itemtext}}}</div> --}}
            </div>

            <div class="flipcard-item-face flipcard-item-back" style="background-color: {{backBgColor}};">
                {{#if backTitle}}
                <div class="flipcard-item-back-title"> 
                {{{backTitle}}}
                </div>
                {{/if}}
                {{#if backBody}}
                <div class="flipcard-item-back-body">
                 <span id="backText" style="display: block; padding: 10px;">{{{backBody}}}</span>
                </div>
                {{/if}}
            </div>            
        </button>

        
         <div class="bottomText" tabindex="0">{{frontImage.imgtitle}}</div>
        </div>
      
        {{/each}}
    </div>
    </div>
    <div class="flipCard_bottomText" tabindex="0">
        <p>{{{bottomText}}}</p>
    </div>
    </div> 
</div>
