// #region Imports
import { html } from '../../../../Dom/Html';
import { when } from '../../../Directives/Directives';
import { Appearance } from '../../../Types/Appearance';
// #endregion
/**
 * The template of the `TourStepElement`.
 *
 * @public
 */
export function tourStepElementTemplate(e) {
    return html `
        <div part="container">
            ${when(!!e.step, () => html `
                <div part="header">
                    <span part="title">${e.step?.title}</span>
                </div>
                <div part="content">
                    <span part="description">${e.step?.content}</span>
                </div>
                <div part="actions">
                    ${when(!e.isFirstStep, () => html `
                        <mosaik-button part="previous"
                                       .lang="${e.lang}"
                                       .dir="${e.dir}"
                                       .appearance="${Appearance.Plain}"
                                       @click="${() => e.onPreviousClicked()}">
                            ${e.resolvedLabels.previous}
                        </mosaik-button>
                    `)}
                    ${when(e.step?.isSkippable ?? false, () => html `
                        <mosaik-button part="skip"
                                       .lang="${e.lang}"
                                       .dir="${e.dir}"
                                       .appearance="${Appearance.Plain}"
                                       @click="${() => e.onSkipClicked()}">
                            ${e.resolvedLabels.skip}
                        </mosaik-button>
                    `)}
                    ${when(!e.isLastStep, () => html `
                        <mosaik-button part="next"
                                       .lang="${e.lang}"
                                       .dir="${e.dir}"
                                       .appearance="${Appearance.Solid}"
                                       @click="${() => e.onNextClicked()}">
                            ${e.resolvedLabels.next}
                        </mosaik-button>
                    `)}
                    ${when(e.isLastStep, () => html `
                        <mosaik-button part="finish"
                                       .lang="${e.lang}"
                                       .dir="${e.dir}"
                                       .appearance="${Appearance.Solid}"
                                       @click="${() => e.onFinishClicked()}">
                            ${e.resolvedLabels.finish}
                        </mosaik-button>
                    `)}
                </div>
            `)}
        </div>
    `;
}
//# sourceMappingURL=TourStepElementTemplate.js.map