'use strict';

var index = require('./index-pX0sBY0-.js');

const templatesUiCss = () => `*{padding:0;margin:0}.templates__container{display:flex;flex-direction:column;align-items:center}.templates__container .back__btn-wrapper{display:none}.templates__container .back__btn-wrapper.show{display:flex;justify-content:space-between;width:100%}.templates__container .back__btn-wrapper .alert__wrapper{display:none}.templates__container .back__btn-wrapper .alert__wrapper.show{display:block}.templates__container .templates__wrapper{display:flex;padding:20px 0px;gap:20px;flex-wrap:wrap}.templates__container .templates__title.hide{display:none}`;

const TemplatesUI = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
    }
    get el() { return index.getElement(this); }
    tableTemplate = index.getAssetPath(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/table_template.png`);
    wizardTemplate = index.getAssetPath(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/wizard_template.png`);
    toggleTemplate(currTemp) {
        const templates = this.el.shadowRoot
            .querySelector(".templates__wrapper")
            .querySelectorAll("ifx-template");
        templates.forEach((template) => {
            template.toggleTemplate(currTemp);
        });
    }
    handleError(e) {
        const alertWrapper = this.el.shadowRoot.querySelector(".alert__wrapper");
        if (e.detail) {
            alertWrapper.classList.add("show");
        }
        else {
            alertWrapper.classList.remove("show");
        }
    }
    filterTemplates(e) {
        const title = this.el.shadowRoot.querySelector(".templates__title");
        const backBtn = this.el.shadowRoot.querySelector(".back__btn-wrapper");
        if (e.detail) {
            title.classList.add("hide");
            if (e.detail !== "details") {
                backBtn.classList.add("show");
            }
            this.toggleTemplate(e.detail);
        }
        else {
            title.classList.remove("hide");
            backBtn.classList.remove("show");
            this.toggleTemplate(null);
        }
    }
    closeAlert() {
        const alertWrapper = this.el.shadowRoot.querySelector(".alert__wrapper");
        alertWrapper.classList.remove("show");
    }
    render() {
        return (index.h("div", { key: '3ae6adab1629b5ccac588791ce2d309cacbebd9c', class: "templates__container" }, index.h("div", { key: '67f33d446aebe5730b324eb0b8b0495e5c857252', class: "back__btn-wrapper" }, index.h("ifx-icon-button", { key: 'df2999672f040014da5015d53affad793c97ec50', onClick: () => this.filterTemplates(false), shape: "round", variant: "tertiary", icon: "arrow-left-16", target: "_blank", size: "m" }), index.h("div", { key: 'e6ac0d1bbac185534fe9a1d3ce938dded2d963b4', class: "alert__wrapper" }, index.h("ifx-alert", { key: '5d7017086dea0e7117d9d395b56f35eac880d7d4', onClick: () => this.closeAlert(), "aria-live": "assertive", variant: "danger", icon: "c-info-16" }, "All fields are mandatory"))), index.h("h2", { key: 'df32be6104d3499874194d9f1d13a4fa894b2458', class: "templates__title" }, "Choose your template"), index.h("div", { key: '3bad4733a12a1c1bbc79d5dcd1764770f31f9df5', class: "templates__wrapper" }, index.h("ifx-template", { key: 'e40c0cf0a6e215dd1a439f6d331d78b6c09245e2', name: "template-01", thumbnail: this.tableTemplate }), index.h("ifx-template", { key: '6dea865b691395ee513332687b9d33b8548435c9', name: "template-02", thumbnail: this.wizardTemplate }))));
    }
    static get assetsDirs() { return ["assets"]; }
};
TemplatesUI.style = templatesUiCss();

exports.ifx_templates_ui = TemplatesUI;
