var Unibase;
(function (Unibase) {
    let Platform;
    (function (Platform) {
        let Layouts;
        (function (Layouts) {
            let Components;
            (function (Components) {
                class LayoutBuilder_Template {
                    loadTemplate() {
                        let instance = this;
                        let html = `
                            <div class="biz-wrapper biz-wrapper2 layout-builder d-none drawer-small drawer-right biz-drawer-push biz-drawer-pushright ">
		<!-- Drawer Push -->
        <div id="drawer_push" class="biz-drawer drawer-wthout-footer drawer-small drawer-right biz-drawer-toggle">
			<div class="drawer-header">
				<div class="drawer-text"> Settings </div>
				<button type="button" class="drawer-close close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="drawer-body">
				<div data-simplebar class="simple-scroll-bar pb-15">
					<div class="drawer-content-wrap">
						<div class="collapse-simple">
							<div class="card dipsplay-modes">
								<div class="card-header">
									<a href="javascript:;" class="no-collapse">Display Modes</a>
								</div>
								<div class="title-devider"></div>
								<div id="dipsplay-modes-section">
									<div class="card-body buttons-wrap">
									</div>
									<div class="custom-mode-section">
										<button class="btn custom-mode-btn btn-outline text-dark btn-wth-icon icon-left mb-15 mr-2 w-100"><span><span class="icon-label"><span class="fa fa-plus"></span></span><span class="btn-text">Custom Mode</span></span></button>
										<div class="custom-mode-input-section d-none">
											<input type="text" class="form-control custom-mode-input shadow-none" placeholder="Enter mode name">
											<a href="javascript:;" class="btn btn-theme px-2 ml-2" type="button" onclick="Unibase.Platform.Layouts.Components.LayoutBuilder.Instance().addDisplayMode()">Add</a>
										</div>
									</div> 
								</div>
							</div>

							<div class="card background-colors d-none">
								<div class="card-header d-flex justify-content-between align-items-center">
									<a href="javascript:;" class="no-collapse">Background Colors</a>
									<button class="btn btn-outline-danger btn-xs font-12 display-mode-reset-btn" id="displayModeResetBtn" onclick="Unibase.Platform.Layouts.Components.LayoutBuilder.Instance().resetDisplayMode()" title="Reset Display Mode">Reset</button>
								</div>
								<div class="title-devider"></div>
								<div>
									<div class="color-pickr-container" data-name="PrimaryColor">
										<span>Primary</span>
										<input id="color-picker-PrimaryColor" value='#276cb8' />
									</div>
									<div class="color-pickr-container" data-name="SecondaryColor">
										<span>Secondary</span>
										<input id="color-picker-SecondaryColor" value='#276cb8' />
									</div>
									<div class="color-pickr-container" data-name="HighlightColor">
										<span>Highlight </span>
										<input id="color-picker-HighlightColor" value='' />
									</div>
									<div class="color-pickr-container" data-name="TransparentPrimaryColor">
										<span>Transparent</span>
										<input id="color-picker-TransparentPrimaryColor" value='' />
									</div>
								</div>
							</div>

							<div class="card text-colors d-none">
								<div class="card-header">
									<a href="javascript:;" class="no-collapse">Text Colors</a>
								</div>
								<div class="title-devider"></div>
								<div>
									<div class="color-pickr-container" data-name="PrimaryTextColor">
										<span>Primary</span>
										<input id="color-picker-PrimaryTextColor" value='' />
									</div>
									<div class="color-pickr-container" data-name="SecondaryTextColor">
										<span>Secondary</span>
										<input id="color-picker-SecondaryTextColor" value='' />
									</div>
								</div>
							</div>

							<div class="card color-palettes">
								<div class="card-header">
									<a href="javascript:;" class="no-collapse">Palettes</a>
								</div>
								<div class="title-devider"></div>
								<div>
									<select class="form-control" id="palettesSelect"><option></option></select>
								</div>
							</div>

							<div class="card logo-settings">
								<div class="card-header">
									<a href="javascript:;" class="no-collapse">Logo Settings</a>
								</div>
								<div class="title-devider"></div>
								<div class="card-body logo-setting-body pa-0" id="logoSettingsBody">
								</div>
							</div>

							<div class="card collapse-simple toggle-nav-parent-group-options pb-0">
								<div class="card-header">
									<a role="button" data-toggle="collapse" href="#layoutSettings" aria-expanded="true">Layout Nav Settings</a>
								</div>
								<div class="title-devider"></div>
								<div class="collapse show" id="layoutSettings">
								<ul class="nav-parent-groups-list" id="navParentGroupsList">
								</ul>
						       </div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
        <!-- /Drawer Push -->
		
        <!-- Main Content -->
        <div class="biz-pg-wrapper py-0 layout-builder">
			<div class="biz-pg-body">
				<div class="biz-bldr-wrap bldr__aside__left form-bldr-wrap">
					<header class="bldr-head">
						<div class="d-flex align-items-center">
							<a class="btn btn-icon btn-flush-theme mr-1" data-target="#drawer_push"  data-drawer="push-normal" href="javascript:;"><span class="btn-icon-wrap"><i class="la la-fill-drip font-25"></i></span></a>Settings
						</div>
						<div class="bldr-options-wrap">	
							<a href="javascript:;" class="btn btn-theme px-4" type="button" onclick="Unibase.Platform.Layouts.Components.LayoutBuilder.Instance().saveTheme()">Save</a>
							<a class="btn btn-layout-builder-close btn-outline-danger px-4 ml-3" href="javascript:;" id="">Close</a>
						</div>
						<div class="form-error-message ml-0 l-0" id="layoutBuilderErrMsg"></div>
					</header>
					<div class="bldr-aside-left">
						<ul class="nav nav-light nav-tabs d-none">
							<li class="nav-item">
								<a class="nav-link active" data-toggle="tab" href="#tab_outline">
									<span class="nav-link-text">Components</span>
								</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" data-toggle="tab" href="#tab_column">
									<span class="nav-link-text">Fileld</span>
								</a>
							</li>
						</ul>
						${instance.getLeftHtml()}
					</div>
					<div class="bldr-body">
						<header class="bldr-sec-head justify-content-center">
							<ul class="nav nav-line nav-tabs nav-light">
								<li class="nav-item">
									<a class="nav-link active" data-toggle="tab" href="#dashboard">
										<span class="nav-link-text">Preview</span>
									</a>
								</li>
								<!-- <li class="nav-item">
									<a class="nav-link" data-toggle="tab" href="#tab_builder">
										<span class="nav-link-text">Code Builder</span>
									</a>
								</li> -->
							</ul>
							<div class="left-aside-togglable"></div>
							<a class="btn btn-icon btn-flush-theme flush-soft-hover active drawer-toggle-link" data-target="#drawer_push"  data-drawer="push-normal" href="#"><span class="btn-icon-wrap"><span class="fa fa-cog"></span></span></a>
						</header>
						<div data-simplebar class="simple-scroll-bar custom-scollable-container layoutbuilder-simple-scroll-bar" style="overflow:hidden;">
							<div class="tab-content">
								<div class="tab-pane fade show active layout-builder-dashboard p-relative" id="dashboardpo">

									<div id="bizgaze_body" style="margin-topx: 60px;">
										
										<div class="biz-wrapper biz__icon__menu biz__fullheight__menu biz__submenu biz__bottom__nav__menu">
											
											
											
											<div class="biz-pg-wrapper SecondaryColor SecondaryTextColor" style="min-height: 937px;margin-right: 0px;position: fixed;top: 0;left: 410px;width: 100%;">
												
												<!-- Container -->
												<div class="_bizgaze_detail_container col-sm SecondaryColor" id="_modal_bizgaze_edit_1620714971">

												</div>
											</div>
											<!-- /Container -->
										</div>
									</div>
								
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>	
		</div>
    </div>
                        `;
                        return html;
                    }
                    getLeftHtml() {
                        let html = `<div data-simplebar class="simple-scroll-bar" style="overflow-x: hidden;">
										<div class="tab-content" style="padding-bottom : 5rem;">
											<div class="tab-pane fade show active" id="tab_outline">
												<div class="collapse-simple">
													<div class="card layout pb-0">
														<div class="card-header">
															<a href="javascript:;" class="no-collapse biz-primary-text-color-removed pt-0">Layout</a>
														</div>
														<div class="title-devider biz-border-color"></div>
														<p class="biz-primary-text-color-removed">Choose your preferred layout</p>
														<div id="menu-layouts">
															<div class="card-body pb-0">
																<div class="row layout-row checkbox-container">
														
																</div>
															</div>
														</div>
													</div>

													<div class="card detail pb-0">
														<div class="card-header">
															<a href="javascript:;" class="no-collapse biz-primary-text-color-removed">Details</a>
														</div>
														<div class="title-devider biz-border-color"></div>
														<p class="biz-primary-text-color-removed">Choose your preferred view</p>
														<div id="detail-list-view">
															<div class="card-body pb-0">
																<div class="row detail-row checkbox-container">
														
																</div>
																<div class="align-items-center d-flex justify-content-between mb-10 pl-0">
																<span class="text-capitalize mb-0">Enable Structures</span>
																<label class="switch mb-0" for="isStructSettingsEnableChk"><input id="isStructSettingsEnableChk" class="isStructSettingsEnableChk" type="checkbox" ><span></span></label>
                                        </div>
															</div>
														</div>
													</div>

													<div class="card background-change">
														<div class="card-header">
															<a href="javascript:;" class="no-collapse biz-primary-text-color-removed">Background Image</a>
														</div>
														<div class="title-devider biz-border-color"></div>
														<div id="background-image-view">
															<div class="card-body">
																<div class="row dropdown-menu-scrollbar checkbox-container">
																</div>
															</div>
														</div>
														<div class="card-body thumbnail-input-card p-2 py-3 d-flex flex-column align-items-center font-14 p-relative">
															<input type="file" class="imagepickerThumbnail" id="imagepickerThumbnail" accept="image/*" required>
															<span>Upload from Computer</span>
															<img src="tenants/themes/compact/imgs/cloud.svg" alt="folder icon" class="w-15 h-15">
												
															<div class="progress-wrap w-100 d-none">
																<div class="progress mt-2">
																	<div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>	
																</div>
																<h6 class="text-dark progress-text ml-20 font-13">0%</h6>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div class="tab-pane fade" id="tab_column">
									
											</div>
										</div>
									</div>`;
                        return html;
                    }
                    static Instance() {
                        return new LayoutBuilder_Template();
                    }
                }
                Components.LayoutBuilder_Template = LayoutBuilder_Template;
            })(Components = Layouts.Components || (Layouts.Components = {}));
        })(Layouts = Platform.Layouts || (Platform.Layouts = {}));
    })(Platform = Unibase.Platform || (Unibase.Platform = {}));
})(Unibase || (Unibase = {}));