<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">

    <t t-name="website.Configurator.SkipButton">
        <div class="container-fluid py-2 pb-md-3 text-end pe-lg-5">
            <button class="btn btn-link btn-lg" t-on-click="this.props.skip">Skip and start from scratch</button>
        </div>
    </t>

    <t t-name="website.Configurator.WelcomeScreen">
        <div class="o_configurator_screen h-100 d-flex flex-column o_welcome_screen">
            <div class="o_configurator_screen_content d-flex h-100">
                <div class="container align-self-center o_configurator_show">
                    <div class="display-2 mb-2">Ready to build the <br class="d-none d-lg-inline"/>
                    <b>perfect website?</b>
                </div>
                <div class="h1 fw-light mb-4 text-600">We'll set you up and running in <b>4 steps</b>
                </div>
                <button class="o_configurator_show btn btn-primary btn-lg px-4 py-2" t-on-click="goToDescription">Let's do it</button>
            </div>
        </div>
        <SkipButton skip="this.props.skip"/>
    </div>
</t>

<t t-name="website.Configurator.DescriptionScreen">
    <div class="o_configurator_screen h-100 d-flex flex-column o_description_screen"
         t-on-focusin="onConfiguratorScreenFocusin">
        <div class="o_configurator_screen_content d-flex h-100 flex-grow-1">
            <div class="container align-self-center">
                <div class="o_configurator_typing_text d-inline d-md-block mb-md-2 mb-lg-4 o_configurator_show">
                    <span>I want </span>
                    <div t-attf-class="dropdown o_configurator_type_dd d-inline-block {{state.selectedType ? 'o_step_completed' : 'o_step_todo show'}}"
                         t-on-focusout="onDropdownFocusout">
                        <button id="selectTypeToggle"
                                class="o_btn_reset w-100 px-2"
                                data-bs-toggle="dropdown"
                                aria-haspopup="true"
                                aria-expanded="true"
                                aria-label="What type of website?"
                                aria-controls="selectTypeMenu">
                            <span class="d-flex align-items-center">
                                <i class="text-primary" t-if="state.selectedType">
                                    <t t-esc="state.getSelectedType(state.selectedType).label"/>
                                </i>
                                <i class="fa fa-angle-down ms-auto ps-2" role="img"/>
                            </span>
                        </button>
                        <div id="selectTypeMenu"
                             t-attf-class="dropdown-menu border-0 shadow-lg {{state.selectedType ? 'o_step_completed' : 'o_step_todo show'}}"
                             role="menu"
                             aria-labelledby="selectTypeToggle">
                            <t t-foreach="state.getWebsiteTypes()" t-as="type" t-key="type.name">
                                <button t-att-title="type.name"
                                        t-on-click="() => this.selectWebsiteType(type.id)"
                                        class="dropdown-item o_change_website_type"
                                        role="menuitem"
                                        t-ref="{{type.id === 1 ? 'autofocus' : type.name}}">
                                    <t t-esc="type.label"/>
                                </button>
                            </t>
                        </div>
                    </div>
                    <span t-if="state.selectedType" class="me-2 o_configurator_show"> for my</span>
                </div>
                <div t-if="state.selectedType" class="o_configurator_typing_text d-inline d-md-flex align-items-center o_configurator_industry mb-md-2 mb-lg-4 o_configurator_show">
                    <!-- Use t-set in order to be able to translate, if put in the attribute directly then export POT file will not exist this text-->
                    <label class="o_configurator_industry_wrapper me-2" t-ref="industrySelection">
                        <AutoComplete
                            placeholder.translate="Restaurant, Hair Salon, Clothing Store,..."
                            value="state.selectedIndustry?.label ?? ''"
                            sources="sources"
                            onInput.bind="onAutocompleteInput"
                            inputDebounceDelay="100"
                            menuPositionOptions="{ position: 'bottom-fit' }"
                            menuCssClass="'custom-ui-autocomplete shadow-lg border-0 o_configurator_show_fast o_configurator_industry_dropdown'"
                            selectOnBlur="true"
                            autoSelect="true"
                        />
                    </label>
                    <span> business</span>
                    <span t-if="state.selectedIndustry" class="o_configurator_show">,</span>
                </div>
                <div t-if="state.selectedType and state.selectedIndustry" class="o_configurator_typing_text d-inline d-md-block mb-md-2 mb-lg-4 o_configurator_show">
                    <span>with the main objective to </span>
                    <div t-attf-class="dropdown d-inline-block o_configurator_purpose_dd {{state.selectedPurpose ? 'o_step_completed' : 'o_step_todo'}}"
                         t-on-focusout="onDropdownFocusout">
                        <button id="selectPurposeToggle"
                                class="o_btn_reset w-100 px-2"
                                data-bs-toggle="dropdown"
                                aria-haspopup="true"
                                aria-expanded="true"
                                aria-label="To what purpose?"
                                aria-controls="selectPurposeMenu">
                            <span class="d-flex align-items-center">
                                <t t-if="state.selectedPurpose">
                                    <t t-esc="state.getSelectedPurpose(state.selectedPurpose).label"/>
                                </t>
                                <i class="fa fa-angle-down ms-auto ps-2" role="img"/>
                            </span>
                        </button>
                        <div id="selectPurposeMenu" class="dropdown-menu border-0 shadow-lg show" role="menu" aria-labelledby="selectPurposeToggle">
                            <t t-foreach="state.getWebsitePurpose()" t-as="type" t-key="type.id">
                                <button t-on-click="() => this.selectWebsitePurpose(type.id)"
                                        class="dropdown-item o_change_website_purpose"
                                        role="menuitem"
                                        t-ref="{{type.id === 1 ? 'purposeSelection' : type.name}}">
                                    <t t-esc="type.label"/>
                                </button>
                            </t>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <SkipButton skip="this.props.skip"/>
    </div>
</t>

<t t-name="website.Configurator.PaletteSelectionScreen">
    <div class="o_configurator_screen h-100 d-flex flex-column o_palette_selection_screen">
        <div class="o_configurator_screen_content container palette_selection d-flex flex-grow-1 h-100">
            <div class="o_content_container d-flex flex-row w-100 h-auto align-self-md-center o_configurator_show">
                <div class="o_detect_logo w-25 order-lg-3 my-4 my-md-0 d-flex flex-column">
                    <div class="h2 text-center">
                        <b>Detect</b> from Logo</div>
                    <div class="d-flex flex-column flex-grow-1 py-4">
                        <button t-on-click="uploadLogo" t-attf-class="o_configurator_logo_upload position-relative btn btn-link rounded bg-100 overflow-hidden d-flex flex-grow-1 justify-content-center align-items-center text-decoration-none {{state.logo? 'h-50' : ''}}">
                            <input type="file" class="logo_selection_input" t-on-change="changeLogo" style="display:none" name="logo_selection" t-ref="logoSelectionInput" accept="image/*"/>
                            <div class="h3 o_configurator_logo_button text-center">
                                <i t-attf-class="fa fa-cloud-upload {{state.logo? 'fa-4x' : 'fa-6x'}}"></i>
                                <div class="text-center">Upload <span t-if="state.logo">a new image</span>
                                </div>
                            </div>
                            <div t-if="state.logo" class="o_configurator_logo_wrapper position-absolute d-flex justify-content-center align-items-center bg-white w-100 h-100">
                                <img style="height: 120px" t-attf-src="{{state.logo}}" alt="Logo"/>
                            </div>
                            <i t-if="state.logo" class="fa fa-2x fa-times-circle text-danger position-absolute top-0 end-0 pe-2 pt-2" t-on-click="removeLogo"/>
                        </button>
                        <div t-if="state.recommendedPalette" class="w-75 mx-auto px-2 pt-3" style="max-width: 184px;">
                            <button t-attf-class="palette_card o_btn_reset w-100 rounded-pill overflow-hidden d-flex {{state.getSelectedPaletteName() == 'recommendedPalette' ? 'selected' : ''}}"
                                 t-on-click="() => this.selectPalette('recommendedPalette')" t-attf-style="background-color: {{state.recommendedPalette.color3}}">
                                <div class="color_sample w-100" t-attf-style="background-color: {{state.recommendedPalette.color1}}"/>
                                <div class="color_sample w-100" t-attf-style="background-color: {{state.recommendedPalette.color3}}"/>
                                <div class="color_sample w-100" t-attf-style="background-color: {{state.recommendedPalette.color2}}"/>
                            </button>
                            <button class="btn btn-primary btn-lg text-nowrap mt-3 d-block mx-auto" t-on-click="() => this.selectPalette('recommendedPalette')">
                                Let's go!<i class="fa fa-angle-right text-white-50 ps-2" role="img"/>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="o_palettes_separator position-relative d-flex justify-content-center order-lg-2 w-0 py-3 py-lg-0 px-lg-5 mb-4 mb-lg-0">
                    <div class="border-top w-100"></div>
                    <b class="palette_selection_or bg-view text-muted w-lg-100 text-center px-3 py-lg-3">OR</b>
                    <div class="border-start d-none d-lg-inline h-100 mx-auto w-0"></div>
                </div>
                <div class="o_palettes_container w-auto flex-grow-1 o_configurator_show_fast">
                    <div class="h2 text-center">
                        <b>Choose</b> a Color Palette</div>
                    <div class="d-flex flex-wrap align-items-end">
                        <t t-foreach="state.getPalettes()" t-as="palette" t-key="palette_index">
                            <div class="o_palette_card_container w-25 px-2 pt-3">
                                <button t-attf-class="palette_card o_btn_reset w-100 rounded-pill overflow-hidden d-flex {{state.getSelectedPaletteName() == palette.name ? 'selected' : ''}}"
                                     t-on-click="() => this.selectPalette(palette.name)" t-attf-style="background-color: {{palette.color3}}">
                                    <div class="color_sample w-100" t-attf-style="background-color: {{palette.color1}}"/>
                                    <div class="color_sample w-100" t-attf-style="background-color: {{palette.color3}}"/>
                                    <div class="color_sample w-100" t-attf-style="background-color: {{palette.color2}}"/>
                                </button>
                            </div>
                        </t>
                    </div>
                </div>
            </div>
        </div>
        <SkipButton skip="this.props.skip"/>
    </div>
</t>

<t t-name="website.Configurator.FeatureSelection">
    <div class="o_configurator_screen h-100 d-flex flex-column o_feature_selection_screen">
        <div class="o_configurator_screen_content container d-flex flex-grow-1 align-items-center">
            <div class="m-auto d-flex mh-100 flex-column">
                <div class="o_configurator_typing_text o_configurator_show_fast">Add <b class="text-info">Pages</b> and <b class="text-warning">Features</b></div>
                <h2 class="o_configurator_show_fast text-muted pb-lg-3">You'll be able to create your pages later on.</h2>
                <div class="page_feature_selection o_configurator_show mt-lg-3 mx-n2">
                    <div class="w-100 page_feature_selection d-flex flex-wrap">
                        <t t-foreach="state.getFeatures()" t-as="feature" t-key="feature_index">
                            <t t-set='isInstalled' t-value="feature.module_state == 'installed'"/>
                            <div class="o_feature_card_container p-2 w-25" t-if="feature.type != 'empty'">
                                <div t-attf-class="card h-100 {{isInstalled ? 'card_installed' : (feature.selected ? 'border-success' : '')}}"
                                     t-on-click="() => state.toggleFeature(feature.id)"
                                     t-on-keydown="onKeydown"
                                     tabindex="0"
                                     role="button">
                                    <div class="h3 card-body py-3 px-4 mb-0">
                                        <t t-if="isInstalled">
                                            <i t-attf-class="o_configurator_feature_status fa fa-check-circle text-success" title="Already installed"/>
                                        </t>
                                        <t t-else="">
                                            <i t-attf-class="o_configurator_feature_status fa {{feature.selected ? 'fa-check-circle text-success' : 'fa-circle-o text-300'}}" />
                                        </t>
                                        <div t-attf-class="h2 mb-0 card-title d-flex align-items-center {{isInstalled ? 'text-muted' : ''}}">
                                            <i t-attf-class="me-2 fa {{feature.icon}} {{isInstalled ? 'text-muted' : (feature.type == 'page' ? 'text-info' : 'text-warning')}}"/>
                                            <h3 class="m-1">
                                                <t t-esc="feature.name"/>
                                            </h3>
                                        </div>
                                        <p class="small card-text text-muted" t-esc="feature.description"/>
                                    </div>
                                </div>
                            </div>
                        </t>
                    </div>
                </div>
                <div class="pt-2">
                    <button class="btn btn-primary btn-lg" t-on-click="buildWebsite">Build my website</button>
                </div>
            </div>
        </div>
    </div>
</t>

<t t-name="website.Configurator.ThemeSelectionScreen">
    <div class="o_configurator_screen h-100 d-flex flex-column o_theme_selection_screen">
        <div class="o_configurator_screen_content d-flex flex-column flex-grow-1 align-items-center">
            <div class="m-auto w-100 w-md-75 w-xl-100">
                <div class="o_configurator_typing_text text-center mt-4 mb-lg-4">Choose your favorite <b>Theme</b>
                </div>
                <div class="container">
                    <div class="row pb-4 pt-5">
                        <div class="col-12 col-lg-4 d-flex align-items-end mb-4 mb-lg-0">
                            <t t-if="state.getThemeName(1)">
                                <div class="theme_preview border rounded position-relative w-100 small o_configurator_show_fast">
                                    <h6 class="theme_preview_tip text-center text-muted">Click to select</h6>
                                    <!-- Force LTR to prevent SVG issues in RTL languages -->
                                    <div class="theme_svg_container rounded overflow-hidden" t-ref="ThemePreview2" dir="ltr"/>
                                    <button class="o_btn_reset button_area" t-on-click="() => this.chooseTheme(state.getThemeName(1))"/>
                                </div>
                            </t>
                        </div>
                        <div class="col-12 col-lg-4 d-flex align-items-end mb-4 mb-lg-0">
                            <t t-if="state.getThemeName(0)">
                                <div class="theme_preview border rounded position-relative w-100 o_configurator_show">
                                    <h6 class="theme_preview_tip text-center text-muted">Click to select</h6>
                                    <!-- Force LTR to prevent SVG issues in RTL languages -->
                                    <div class="theme_svg_container rounded overflow-hidden" t-ref="ThemePreview1" dir="ltr"/>
                                    <button class="o_btn_reset button_area" t-on-click="() => this.chooseTheme(state.getThemeName(0))"/>
                                </div>
                            </t>
                        </div>
                        <div class="col-12 col-lg-4 d-flex align-items-end">
                            <t t-if="state.getThemeName(2)">
                                <div class="theme_preview border rounded position-relative w-100 small o_configurator_show_fast">
                                    <h6 class="theme_preview_tip text-center text-muted">Click to select</h6>
                                    <!-- Force LTR to prevent SVG issues in RTL languages -->
                                    <div class="theme_svg_container rounded overflow-hidden" t-ref="ThemePreview3" dir="ltr"/>
                                    <button class="o_btn_reset button_area" t-on-click="() => this.chooseTheme(state.getThemeName(2))"/>
                                </div>
                            </t>
                        </div>
                    </div>
                    <t t-if="showViewMoreThemesButton">
                        <p style="text-align: center;">
                            <button class="btn btn-primary btn-lg px-4 py-2 center-block" t-on-click="getMoreThemes" t-ref="extraThemesButton">View more themes</button>
                        </p>
                    </t>
                    <t t-elif="state.extraThemes.length" t-foreach="[...Array(Math.ceil(state.extraThemes.length/3)).keys()]" t-as="nbrExtraRow" t-key="nbrExtraRow">
                        <div class="row pb-4 pt-5">
                            <t t-foreach="[...Array(3).keys()]" t-as="nbrExtraCol" t-key="nbrExtraCol">
                                <div class="col-12 col-lg-4 d-flex align-items-end mb-4 mb-lg-0">
                                    <t t-set="extraThemeId" t-value="nbrExtraRow * 3 + nbrExtraCol"/>
                                    <t t-set="extraThemeName" t-value="getExtraThemeName(extraThemeId)"/>
                                    <t t-if="extraThemeName">
                                        <div class="theme_preview border rounded position-relative w-100 small o_configurator_show_fast">
                                            <h6 class="theme_preview_tip text-center text-muted">Click to select</h6>
                                            <!-- Force LTR to prevent SVG issues in RTL languages -->
                                            <div class="theme_svg_container rounded overflow-hidden" t-ref="ExtraThemePreview{{extraThemeId}}" dir="ltr"/>
                                            <button class="o_btn_reset button_area" t-on-click="() => this.chooseTheme(extraThemeName)"/>
                                        </div>
                                    </t>
                                </div>
                            </t>
                        </div>
                    </t>
                </div>
            </div>
        </div>
    </div>
</t>

<t t-name="website.Configurator.Configurator">
    <div class="o_configurator_container">
        <t t-component="currentComponent" t-props="componentProps"/>
    </div>
</t>

</templates>
