/* eslint no-unused-vars: 0 */
import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "@gsmlg/ui5-webcomponents-base/dist/renderer/LitRenderer.js";

const block0 = (context, tags, suffix) => html`<section class="ui5-carousel-root" tabindex="0" role="listbox" aria-activedescendant="${ifDefined(context.ariaActiveDescendant)}" @focusin="${context._onfocusin}" @keydown=${context._onkeydown} @mouseout="${context._onmouseout}" @mouseover="${context._onmouseover}"><div class="${classMap(context.classes.viewport)}"><div class="${classMap(context.classes.content)}" style="${styleMap(context.styles.content)}">${ repeat(context.items, (item, index) => item._id || index, (item, index) => block1(item, index, context, tags, suffix)) }</div></div>${ context.arrows.content ? block2(context, tags, suffix) : undefined }${ context.renderNavigation ? block3(context, tags, suffix) : undefined }</div></section> `;
const block1 = (item, index, context, tags, suffix) => html`<div id="${ifDefined(item.id)}" class="ui5-carousel-item ${ifDefined(item.classes)}" style="${styleMap(item.styles)}" role="option" aria-posinset="${ifDefined(item.posinset)}" aria-setsize="${ifDefined(item.setsize)}" part="item"><slot name="${ifDefined(item.item._individualSlot)}" tabindex="${ifDefined(item.tabIndex)}"></slot></div>`;
const block2 = (context, tags, suffix) => suffix ? html`<div class="ui5-carousel-navigation-arrows"><${scopeTag("ui5-button", tags, suffix)} arrow-back tooltip="${ifDefined(context.previousPageText)}" class="ui5-carousel-navigation-button ${classMap(context.classes.navPrevButton)}" icon="slim-arrow-left" tabindex="-1" @click=${context.navigateLeft}></${scopeTag("ui5-button", tags, suffix)}><${scopeTag("ui5-button", tags, suffix)} arrow-forward tooltip="${ifDefined(context.nextPageText)}" class="ui5-carousel-navigation-button ${classMap(context.classes.navNextButton)}" icon="slim-arrow-right" tabindex="-1" @click=${context.navigateRight}></${scopeTag("ui5-button", tags, suffix)}></div>` : html`<div class="ui5-carousel-navigation-arrows"><ui5-button arrow-back tooltip="${ifDefined(context.previousPageText)}" class="ui5-carousel-navigation-button ${classMap(context.classes.navPrevButton)}" icon="slim-arrow-left" tabindex="-1" @click=${context.navigateLeft}></ui5-button><ui5-button arrow-forward tooltip="${ifDefined(context.nextPageText)}" class="ui5-carousel-navigation-button ${classMap(context.classes.navNextButton)}" icon="slim-arrow-right" tabindex="-1" @click=${context.navigateRight}></ui5-button></div>`;
const block3 = (context, tags, suffix) => html`<div class="${classMap(context.classes.navigation)}">${ context.arrows.navigation ? block4(context, tags, suffix) : undefined }<div class="ui5-carousel-navigation">${ !context.hidePageIndicator ? block5(context, tags, suffix) : undefined }</div>${ context.arrows.navigation ? block9(context, tags, suffix) : undefined }</div>`;
const block4 = (context, tags, suffix) => suffix ? html`<${scopeTag("ui5-button", tags, suffix)} arrow-back tooltip="${ifDefined(context.previousPageText)}" class="ui5-carousel-navigation-button ${classMap(context.classes.navPrevButton)}" icon="slim-arrow-left" tabindex="-1" @click=${context.navigateLeft}></${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button arrow-back tooltip="${ifDefined(context.previousPageText)}" class="ui5-carousel-navigation-button ${classMap(context.classes.navPrevButton)}" icon="slim-arrow-left" tabindex="-1" @click=${context.navigateLeft}></ui5-button>`;
const block5 = (context, tags, suffix) => html`${ context.isPageTypeDots ? block6(context, tags, suffix) : block8(context, tags, suffix) }`;
const block6 = (context, tags, suffix) => html`${ repeat(context.dots, (item, index) => item._id || index, (item, index) => block7(item, index, context, tags, suffix)) }`;
const block7 = (item, index, context, tags, suffix) => html`<div role="img" aria-label="${ifDefined(item.ariaLabel)}" ?active="${item.active}" class="ui5-carousel-navigation-dot"></div>`;
const block8 = (context, tags, suffix) => suffix ? html`<${scopeTag("ui5-label", tags, suffix)}>${ifDefined(context.selectedIndexToShow)}&nbsp;${ifDefined(context.ofText)}&nbsp;${ifDefined(context.pagesCount)}</${scopeTag("ui5-label", tags, suffix)}>` : html`<ui5-label>${ifDefined(context.selectedIndexToShow)}&nbsp;${ifDefined(context.ofText)}&nbsp;${ifDefined(context.pagesCount)}</ui5-label>`;
const block9 = (context, tags, suffix) => suffix ? html`<${scopeTag("ui5-button", tags, suffix)} arrow-forward tooltip="${ifDefined(context.nextPageText)}" class="ui5-carousel-navigation-button ${classMap(context.classes.navNextButton)}" icon="slim-arrow-right" tabindex="-1" @click=${context.navigateRight}></${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button arrow-forward tooltip="${ifDefined(context.nextPageText)}" class="ui5-carousel-navigation-button ${classMap(context.classes.navNextButton)}" icon="slim-arrow-right" tabindex="-1" @click=${context.navigateRight}></ui5-button>`;


export default block0;