{% extends 'admin\\baseadmin.html.twig' %}
{% block header %}
	<header class="page-header">
		<div class="d-flex align-items-center">
			<div class="mr-auto">
				<h1>Master Config</h1>
			</div>
		</div>
	</header>
{% endblock %}
{% block content %}
	<section class="page-content container-fluid masterconfig">
		<div class="row">
			<div class="col">
			{{ form_start(form) }}
				<div class="card">
					<div class="card-body">
						<div class="row row-grid">
							<div class="col">
								{# Menu Master Config #}
								<div class="nav flex-column nav-pills" id="masterconfig-tabs" role="tablist" aria-orientation="vertical">
									<a class="nav-link active" id="v-pills-colors-tab" data-toggle="pill" href="#v-pills-colors" role="tab" aria-controls="v-pills-colors" aria-selected="true">Theme Colors</a>
									<a class="nav-link" id="v-pills-fonts-tab" data-toggle="pill" href="#v-pills-fonts" role="tab" aria-controls="v-pills-fonts" aria-selected="false">Font Settings</a>
									<a class="nav-link" id="v-pills-buttons-tab" data-toggle="pill" href="#v-pills-buttons" role="tab" aria-controls="v-pills-buttons" aria-selected="false">Buttons</a>
									<a class="nav-link" id="v-pills-header-tab" data-toggle="pill" href="#v-pills-header" role="tab" aria-controls="v-pills-header" aria-selected="false">Header</a>
									<a class="nav-link" id="v-pills-footer-tab" data-toggle="pill" href="#v-pills-footer" role="tab" aria-controls="v-pills-footer" aria-selected="false">Footer</a>
									<a class="nav-link" id="v-pills-menus-tab" data-toggle="pill" href="#v-pills-menus" role="tab" aria-controls="v-pills-menus" aria-selected="false">Menus</a>
									<a class="nav-link" id="v-pills-general-tab" data-toggle="pill" href="#v-pills-general" role="tab" aria-controls="v-pills-general" aria-selected="false">General</a>
									{# <a class="nav-link" id="v-pills-layouts-tab" data-toggle="pill" href="#v-pills-layouts" role="tab" aria-controls="v-pills-layouts" aria-selected="false">Layouts</a> #}
								</div>
							</div>
							<div class="col">
								<div class="tab-content" id="masterconfig-tabsContent">
									{# Theme Colors #}
									<div class="tab-pane fade show active" id="v-pills-colors" role="tabpanel" aria-labelledby="v-pills-colors-tab">
										<div class="d-grid">
											<h4 class="card-heading p-b-10 mb-4">Theme Colors</h4>
											<div class="form-row">
												<div class="form-group col-auto">
													<label>Body</label>
													<input type="hidden" class="colorpicker" name="std_dynamic_form[--body-color]" data-color="--body-color" />
												</div>
												<div class="form-group col-auto">
													<label>Text</label>
													<input type="hidden" class="colorpicker" name="std_dynamic_form[--text-color]" data-color="--text-color" />
												</div>
												<div class="form-group col-auto">
													<label>Links</label>
													<input type="hidden" class="colorpicker" name="std_dynamic_form[--links-color]" data-color="--links-color" />
												</div>
												<div class="form-group col-auto">
													<label>Links-hover</label>
													<input type="hidden" class="colorpicker" name="std_dynamic_form[--links-color-hover]" data-color="--links-color-hover" />
												</div>
											</div>
											<hr>
											<div class="form-row">
												<div class="form-group col-auto">
													<label>H1</label>
													<input type="hidden" class="colorpicker" name="std_dynamic_form[--h1-color]" data-color="--h1-color" />
												</div>
												<div class="form-group col-auto">
													<label>H2</label>
													<input type="hidden" class="colorpicker" name="std_dynamic_form[--h2-color]" data-color="--h2-color" />
												</div>
												<div class="form-group col-auto">
													<label>H3</label>
													<input type="hidden" class="colorpicker" name="std_dynamic_form[--h3-color]" data-color="--h3-color" />
												</div>
												<div class="form-group col-auto">
													<label>H4</label>
													<input type="hidden" class="colorpicker" name="std_dynamic_form[--h4-color]" data-color="--h4-color" />
												</div>
												<div class="form-group col-auto">
													<label>H5</label>
													<input type="hidden" class="colorpicker" name="std_dynamic_form[--h5-color]" data-color="--h5-color" />
												</div>
												<div class="form-group col-auto">
													<label>H6</label>
													<input type="hidden" class="colorpicker" name="std_dynamic_form[--h6-color]" data-color="--h6-color" />
												</div>
											</div>
											<hr>
											<div class="form-row">
												<div class="form-group col-auto">
													<label>Primary</label>
													<input type="hidden" class="colorpicker" name="std_dynamic_form[--primary]" data-color="--primary" />
												</div>
												<div class="form-group col-auto">
													<label>Secondary</label>
													<input type="hidden" class="colorpicker" name="std_dynamic_form[--secondary]" data-color="--secondary" />
												</div>
												<div class="form-group col-auto">
													<label>Tertiary</label>
													<input type="hidden" class="colorpicker" name="std_dynamic_form[--tertiary]" data-color="--tertiary" />
												</div>
											</div>
											<hr>
											<div class="form-row">
												<div class="form-group col-auto">
													<label>Light</label>
													<input type="hidden" class="colorpicker" name="std_dynamic_form[--light]" data-color="--light"/>
												</div>
												<div class="form-group col-auto">
													<label>Dark</label>
													<input type="hidden" class="colorpicker" name="std_dynamic_form[--dark]" data-color="--dark"/>
												</div>
												<div class="form-group col-auto">
													<label>Info</label>
													<input type="hidden" class="colorpicker" data-color="--info" name="std_dynamic_form[--info]"/>
												</div>
												<div class="form-group col-auto">
													<label>Success</label>
													<input type="hidden" class="colorpicker" data-color="--success" name="std_dynamic_form[--success]"/>
												</div>
												<div class="form-group col-auto">
													<label>Warning</label>
													<input type="hidden" class="colorpicker" data-color="--warning" name="std_dynamic_form[--warning]"/>
												</div>
												<div class="form-group col-auto">
													<label>Danger</label>
													<input type="hidden" class="colorpicker" data-color="--danger" name="std_dynamic_form[--danger]"/>
												</div>
											</div>
											<div class="btn-wrapper">
												<button type="submit" class="btn btn-primary js-save">Save</button>
											</div>
										</div>
									</div>

									{# Fonts #}
									<div class="tab-pane fade" id="v-pills-fonts" role="tabpanel" aria-labelledby="v-pills-fonts-tab">
										<div class="d-grid">
											<h4 class="card-heading p-b-10 mb-4">Fonts Settings</h4>
											<div class="form-row">
												<div class="form-group col-2">
													<label for="">Root Font Size</label>
													<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--html-font-size]">
												</div>
											</div>
											<hr>
											<div class="form-row">
												<div class="form-group col-4">
													<label>Body</label>
													<select class="form-control select2-style js-fontFamily" name="std_dynamic_form[--body-font-family]">
														<optgroup label="Google fonts" class="js-googlefonts"></optgroup>
													</select>
												</div>
												<div class="form-group col">
													<label for="">Size</label>
													<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--body-font-size]">
												</div>
												<div class="form-group col">
													<label for="">Line-height</label>
													<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--body-line-height]">
												</div>
												<div class="form-group col">
													<label for="">Weight</label>
													<select class="form-control js-styleVariant" name="std_dynamic_form[--body-font-weight]" id="">
													</select>
													<input type="hidden" name="std_dynamic_form[body-url]" value="">
												</div>
												<div class="form-group col">
													<label for="">Letter spacing</label>
													<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--body-letter-spacing]">
												</div>
												<div class="form-group col"></div>
											</div>
											<div class="form-row">
												<div class="form-group col-4">
													<label>Heading H1</label>
													<select class="form-control select2-style js-fontFamily" name="std_dynamic_form[--h1-font-family]">
														<optgroup label="Google fonts" class="js-googlefonts"></optgroup>
													</select>
												</div>
												<div class="form-group col">
													<label for="">Size</label>
													<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--h1-font-size]">
												</div>
												<div class="form-group col">
													<label for="">Line-height</label>
													<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--h1-line-height]">
												</div>
												<div class="form-group col">
													<label for="">Weight</label>
													<select class="form-control js-styleVariant" name="std_dynamic_form[--h1-font-weight]" id="">
													</select>
													<input type="hidden" name="std_dynamic_form[h1-url]" value="">
												</div>
												<div class="form-group col">
													<label for="">Letter spacing</label>
													<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--h1-letter-spacing]">
												</div>
												<div class="form-group col">
													<label>&nbsp;</label>
													<div class="custom-control custom-checkbox checkbox-primary form-check mt-2 d-flex align-items-center">
														<input type="checkbox" id="choose-h1" name="std_dynamic_form[--h1-text-tranform]" value="uppercase" class="custom-control-input js-textTranform">
														<label class="custom-control-label" for="choose-h1">Uppercase</label>
													</div>
												</div>
											</div>
											<div class="form-row">
												<div class="form-group col-4">
													<label>Heading H2</label>
													<select class="form-control select2-style js-fontFamily" name="std_dynamic_form[--h2-font-family]">
														<optgroup label="Google fonts" class="js-googlefonts"></optgroup>
													</select>
												</div>
												<div class="form-group col">
													<label for="">Size</label>
													<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--h2-font-size]">
												</div>
												<div class="form-group col">
													<label for="">Line-height</label>
													<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--h2-line-height]">
												</div>
												<div class="form-group col">
													<label for="">Weight</label>
													<select class="form-control js-styleVariant" name="std_dynamic_form[--h2-font-weight]" id="">
													</select>
													<input type="hidden" name="std_dynamic_form[h2-url]" value="">
												</div>
												<div class="form-group col">
													<label for="">Letter spacing</label>
													<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--h2-letter-spacing]">
												</div>
												<div class="form-group col">
													<label>&nbsp;</label>
													<div class="custom-control custom-checkbox checkbox-primary form-check mt-2 d-flex align-items-center">
														<input type="checkbox" id="choose-h2" name="std_dynamic_form[--h2-text-tranform]" value="uppercase" class="custom-control-input js-textTranform">
														<label class="custom-control-label" for="choose-h2">Uppercase</label>
													</div>
												</div>
											</div>
											<div class="form-row">
												<div class="form-group col-4">
													<label>Heading H3</label>
													<select class="form-control select2-style js-fontFamily" name="std_dynamic_form[--h3-font-family]">
														<optgroup label="Google fonts" class="js-googlefonts"></optgroup>
													</select>
												</div>
												<div class="form-group col">
													<label for="">Size</label>
													<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--h3-font-size]">
												</div>
												<div class="form-group col">
													<label for="">Line-height</label>
													<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--h3-line-height]">
												</div>
												<div class="form-group col">
													<label for="">Weight</label>
													<select class="form-control js-styleVariant" name="std_dynamic_form[--h3-font-weight]" id="">
													</select>
													<input type="hidden" name="std_dynamic_form[h3-url]" value="">
												</div>
												<div class="form-group col">
													<label for="">Letter spacing</label>
													<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--h3-letter-spacing]">
												</div>
												<div class="form-group col">
													<label>&nbsp;</label>
													<div class="custom-control custom-checkbox checkbox-primary form-check mt-2 d-flex align-items-center">
														<input type="checkbox" id="choose-h3" name="std_dynamic_form[--h3-text-tranform]" value="uppercase" class="custom-control-input js-textTranform">
														<label class="custom-control-label" for="choose-h3">Uppercase</label>
													</div>
												</div>
											</div>
											<div class="form-row">
												<div class="form-group col-4">
													<label>Heading H4</label>
													<select class="form-control select2-style js-fontFamily" name="std_dynamic_form[--h4-font-family]">
														<optgroup label="Google fonts" class="js-googlefonts"></optgroup>
													</select>
												</div>
												<div class="form-group col">
													<label for="">Size</label>
													<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--h4-font-size]">
												</div>
												<div class="form-group col">
													<label for="">Line-height</label>
													<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--h4-line-height]">
												</div>
												<div class="form-group col">
													<label for="">Weight</label>
													<select class="form-control js-styleVariant" name="std_dynamic_form[--h4-font-weight]" id="">
													</select>
													<input type="hidden" name="std_dynamic_form[h4-url]" value="">
												</div>
												<div class="form-group col">
													<label for="">Letter spacing</label>
													<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--h4-letter-spacing]">
												</div>
												<div class="form-group col">
													<label>&nbsp;</label>
													<div class="custom-control custom-checkbox checkbox-primary form-check mt-2 d-flex align-items-center">
														<input type="checkbox" id="choose-h4" name="std_dynamic_form[--h4-text-tranform]" value="uppercase" class="custom-control-input js-textTranform">
														<label class="custom-control-label" for="choose-h4">Uppercase</label>
													</div>
												</div>
											</div>
											<div class="form-row">
												<div class="form-group col-4">
													<label>Heading H5</label>
													<select class="form-control select2-style js-fontFamily" name="std_dynamic_form[--h5-font-family]">
														<optgroup label="Google fonts" class="js-googlefonts"></optgroup>
													</select>
												</div>
												<div class="form-group col">
													<label for="">Size</label>
													<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--h5-font-size]">
												</div>
												<div class="form-group col">
													<label for="">Line-height</label>
													<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--h5-line-height]">
												</div>
												<div class="form-group col">
													<label for="">Weight</label>
													<select class="form-control js-styleVariant" name="std_dynamic_form[--h5-font-weight]" id="">
													</select>
													<input type="hidden" name="std_dynamic_form[h5-url]" value="">
												</div>
												<div class="form-group col">
													<label for="">Letter spacing</label>
													<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--h5-letter-spacing]">
												</div>
												<div class="form-group col">
													<label>&nbsp;</label>
													<div class="custom-control custom-checkbox checkbox-primary form-check mt-2 d-flex align-items-center">
														<input type="checkbox" id="choose-h5" name="std_dynamic_form[--h5-text-tranform]" value="uppercase" class="custom-control-input js-textTranform">
														<label class="custom-control-label" for="choose-h5">Uppercase</label>
													</div>
												</div>
											</div>
											<div class="form-row">
												<div class="form-group col-4">
													<label>Heading H6</label>
													<select class="form-control select2-style js-fontFamily" name="std_dynamic_form[--h6-font-family]">
														<optgroup label="Google fonts" class="js-googlefonts"></optgroup>
													</select>
												</div>
												<div class="form-group col">
													<label for="">Size</label>
													<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--h6-font-size]">
												</div>
												<div class="form-group col">
													<label for="">Line-height</label>
													<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--h6-line-height]">
												</div>
												<div class="form-group col">
													<label for="">Weight</label>
													<select class="form-control js-styleVariant" name="std_dynamic_form[--h6-font-weight]" id="">
													</select>
													<input type="hidden" name="std_dynamic_form[h6-url]" value="">
												</div>
												<div class="form-group col">
													<label for="">Letter spacing</label>
													<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--h6-letter-spacing]">
												</div>
												<div class="form-group col">
													<label>&nbsp;</label>
													<div class="custom-control custom-checkbox checkbox-primary form-check mt-2 d-flex align-items-center">
														<input type="checkbox" id="choose-h6" name="std_dynamic_form[--h6-text-tranform]" value="uppercase" class="custom-control-input js-textTranform">
														<label class="custom-control-label" for="choose-h6">Uppercase</label>
													</div>
												</div>
											</div>
											<div class="btn-wrapper">
												<button type="submit" class="btn btn-primary js-save">Save</button>
											</div>
										</div>
									</div>

									{# Buttons #}
									<div class="tab-pane fade" id="v-pills-buttons" role="tabpanel" aria-labelledby="v-pills-buttons-tab">
										<div class="d-grid">
											<h4 class="card-heading p-b-10 mb-4">Buttons</h4>
											<div class="row">
												<div class="col-8">
													<div class="form-row">
														{# <div class="form-group col-2">
															<label for="">Bg color</label>
															<input type="hidden" class="colorpicker" data-color="--primary" name="std_dynamic_form[--primary]" />
														</div> #}
														<div class="form-group col-auto">
															<label for="">Bg color hover</label>
															<input type="hidden" class="colorpicker" data-color="--primary-hover" name="std_dynamic_form[--primary-hover]" />
														</div>
													</div>
													<div class="form-row">
														<div class="form-group col-auto">
															<label for="">Text color</label>
															<input type="hidden" class="colorpicker" data-color="--primary-text" name="std_dynamic_form[--primary-text]" />
														</div>
														<div class="form-group col-auto">
															<label for="">-hover</label>
															<input type="hidden" class="colorpicker" data-color="--primary-text-hover" name="std_dynamic_form[--primary-text-hover]" />
														</div>
														<div class="form-group col-auto">
															<label for="">Letter spacing</label>
															<input type="text" class="form-control js-letterSpacing" name="std_dynamic_form[--primary-letter-spacing]">
														</div>
														<div class="form-group col-auto">
															<label for="">Padding <span class="help">[↑ → ↓ ←]</span></label>
															<input type="text" class="form-control js-padding" name="std_dynamic_form[--primary-padding]">
														</div>
													</div>
													<div class="form-row">
														<div class="form-group col-2">
															<label for="">Border</label>
															<input type="text" class="form-control js-border" name="std_dynamic_form[--primary-border]">
														</div>
														<div class="form-group col-2">
															<label for="">Border radius</label>
															<input type="text" class="form-control js-borderRadius" name="std_dynamic_form[--primary-border-radius]">
														</div>
														<div class="form-group col-auto">
															<label for="">Border Style</label>
															<select class="form-control js-borderStyle" name="std_dynamic_form[--primary-border-style]" id="">
																<option value="solid">Solid</option>
																<option value="dashed">Dashed</option>
																<option value="dotted">Dotted</option>
																<option value="inset">Inset</option>
																<option value="outset">Outset</option>
																<option value="double">Double</option>
															</select>
														</div>
														<div class="form-group col-auto">
															<label for="">-color</label>
															<input type="hidden" class="colorpicker" data-color="--primary-border-color" name="std_dynamic_form[--primary-border-color]" />
														</div>
														<div class="form-group col-sm">
															<label for="">-color hover</label>
															<input type="hidden" class="colorpicker" data-color="--primary-border-hover" name="std_dynamic_form[--primary-border-hover]" />
														</div>
													</div>
													<div class="form-row">
														<div class="form-group col-12">
															<label for="">Icon svg</label>
															<input type="hidden" class="js-iconsvg" id="--primary-icon" name="std_dynamic_form[--primary-icon]" value="">
															<textarea class="form-control js-icon" name="primary-icon-textarea" rows="2" spellcheck="false" data-svg=""></textarea>
														</div>
														<div class="form-group col-2">
															<label for="">Icon width</label>
															<input type="text" class="form-control js-iconWidth" name="std_dynamic_form[--primary-icon-width]">
														</div>
														<div class="form-group col-2">
															<label for="">Icon height</label>
															<input type="text" class="form-control js-iconHeight" name="std_dynamic_form[--primary-icon-height]">
														</div>
														<div class="form-group col-auto">
															<label for="">Icon Position</label>
															<input type="text" class="form-control js-iconInset" name="std_dynamic_form[--primary-icon-inset]">
														</div>
														<div class="form-group col-auto">
															<label for="">-color</label>
															<input type="hidden" class="colorpicker" data-color="--primary-icon-color" name="std_dynamic_form[--primary-icon-color]" />
														</div>
														<div class="form-group col-auto">
															<label for="">-color hover</label>
															<input type="hidden" class="colorpicker" data-color="--primary-icon-color-hover" name="std_dynamic_form[--primary-icon-color-hover]" />
														</div>
													</div>
												</div>
												<div class="col">
													<fieldset>
														<div class="btn btn-primary mc">Primary</div>
													</fieldset>
												</div>
											</div>
											<hr>
											<div class="row">
												<div class="col-8">
													<div class="form-row">
														{# <div class="form-group col-2">
															<label for="">Bg color</label>
															<input type="hidden" class="colorpicker" data-color="--secondary" name="std_dynamic_form[--secondary]" />
														</div> #}
														<div class="form-group col-auto">
															<label for="">Bg color hover</label>
															<input type="hidden" class="colorpicker" data-color="--secondary-hover" name="std_dynamic_form[--secondary-hover]" />
														</div>
													</div>
													<div class="form-row">
														<div class="form-group col-auto">
															<label for="">Text color</label>
															<input type="hidden" class="colorpicker" data-color="--secondary-text" name="std_dynamic_form[--secondary-text]" />
														</div>
														<div class="form-group col-auto">
															<label for="">-hover</label>
															<input type="hidden" class="colorpicker" data-color="--secondary-text-hover" name="std_dynamic_form[--secondary-text-hover]" />
														</div>
														<div class="form-group col-auto">
															<label for="">Letter spacing</label>
															<input type="text" class="form-control js-letterSpacing" name="std_dynamic_form[--secondary-letter-spacing]">
														</div>
														<div class="form-group col-auto">
															<label for="">Padding <span class="help">[↑ → ↓ ←]</span></label>
															<input type="text" class="form-control js-padding" name="std_dynamic_form[--secondary-padding]">
														</div>
													</div>
													<div class="form-row">
														<div class="form-group col-2">
															<label for="">Border</label>
															<input type="text" class="form-control js-border" name="std_dynamic_form[--secondary-border]">
														</div>
														<div class="form-group col-2">
															<label for="">Border radius</label>
															<input type="text" class="form-control js-borderRadius" name="std_dynamic_form[--secondary-border-radius]">
														</div>
														<div class="form-group col-auto">
															<label for="">Border Style</label>
															<select class="form-control js-borderStyle" name="std_dynamic_form[--secondary-border-style]" id="">
																<option value="solid">Solid</option>
																<option value="dashed">Dashed</option>
																<option value="dotted">Dotted</option>
																<option value="inset">Inset</option>
																<option value="outset">Outset</option>
																<option value="double">Double</option>
															</select>
														</div>
														<div class="form-group col-auto">
															<label for="">-color</label>
															<input type="hidden" class="colorpicker" data-color="--secondary-border-color" name="std_dynamic_form[--secondary-border-color]" />
														</div>
														<div class="form-group col-sm">
															<label for="">-color hover</label>
															<input type="hidden" class="colorpicker" data-color="--secondary-border-hover" name="std_dynamic_form[--secondary-border-hover]" />
														</div>
													</div>
													<div class="form-row">
														<div class="form-group col-12">
															<label for="">Icon svg</label>
															<input type="hidden" class="js-iconsvg" id="--secondary-icon" name="std_dynamic_form[--secondary-icon]" value="">
															<textarea class="form-control js-icon" name="secondary-icon-textarea" rows="2" spellcheck="false" data-svg=""></textarea>
														</div>
														<div class="form-group col-2">
															<label for="">Icon width</label>
															<input type="text" class="form-control js-iconWidth" name="std_dynamic_form[--secondary-icon-width]">
														</div>
														<div class="form-group col-2">
															<label for="">Icon height</label>
															<input type="text" class="form-control js-iconHeight" name="std_dynamic_form[--secondary-icon-height]">
														</div>
														<div class="form-group col-auto">
															<label for="">Icon Position</label>
															<input type="text" class="form-control js-iconInset" name="std_dynamic_form[--secondary-icon-inset]">
														</div>
														<div class="form-group col-auto">
															<label for="">-color</label>
															<input type="hidden" class="colorpicker" data-color="--secondary-icon-color" name="std_dynamic_form[--secondary-icon-color]" />
														</div>
														<div class="form-group col-auto">
															<label for="">-color hover</label>
															<input type="hidden" class="colorpicker" data-color="--secondary-icon-color-hover" name="std_dynamic_form[--secondary-icon-color-hover]" />
														</div>
													</div>
												</div>
												<div class="col">
													<fieldset>
														<div class="btn btn-secondary mc">Secondary</div>
													</fieldset>
												</div>
											</div>
											<hr>
											<div class="row">
												<div class="col-8">
													<div class="form-row">
														<div class="form-group col-auto">
															<label for="">Bg color</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-1" name="std_dynamic_form[--btn-style-1]" />
														</div>
														<div class="form-group col-auto">
															<label for="">Bg color hover</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-1-hover" name="std_dynamic_form[--btn-style-1-hover]" />
														</div>
													</div>
													<div class="form-row">
														<div class="form-group col-auto">
															<label for="">Text color</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-1-text" name="std_dynamic_form[--btn-style-1-text]" />
														</div>
														<div class="form-group col-auto">
															<label for="">-hover</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-1-text-hover" name="std_dynamic_form[--btn-style-1-text-hover]" />
														</div>
														<div class="form-group col-auto">
															<label for="">Letter spacing</label>
															<input type="text" class="form-control js-letterSpacing" name="std_dynamic_form[--btn-style-1-letter-spacing]">
														</div>
														<div class="form-group col-auto">
															<label for="">Padding <span class="help">[↑ → ↓ ←]</span></label>
															<input type="text" class="form-control js-padding" name="std_dynamic_form[--btn-style-1-padding]">
														</div>
													</div>
													<div class="form-row">
														<div class="form-group col-2">
															<label for="">Border</label>
															<input type="text" class="form-control js-border" name="std_dynamic_form[--btn-style-1-border]">
														</div>
														<div class="form-group col-2">
															<label for="">Border radius</label>
															<input type="text" class="form-control js-borderRadius" name="std_dynamic_form[--btn-style-1-border-radius]">
														</div>
														<div class="form-group col-auto">
															<label for="">Border Style</label>
															<select class="form-control js-borderStyle" name="std_dynamic_form[--btn-style-1-border-style]" id="">
																<option value="solid">Solid</option>
																<option value="dashed">Dashed</option>
																<option value="dotted">Dotted</option>
																<option value="inset">Inset</option>
																<option value="outset">Outset</option>
																<option value="double">Double</option>
															</select>
														</div>
														<div class="form-group col-auto">
															<label for="">-color</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-1-border-color" name="std_dynamic_form[--btn-style-1-border-color]" />
														</div>
														<div class="form-group col-sm">
															<label for="">-color hover</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-1-border-hover" name="std_dynamic_form[--btn-style-1-border-hover]" />
														</div>
													</div>
													<div class="form-row">
														<div class="form-group col-12">
															<label for="">Icon svg</label>
															<input type="hidden" class="js-iconsvg" id="--btn-style-1-icon" name="std_dynamic_form[--btn-style-1-icon]" value="">
															<textarea class="form-control js-icon" name="btn-style-1-icon-textarea" rows="2" spellcheck="false" data-svg=""></textarea>
														</div>
														<div class="form-group col-2">
															<label for="">Icon width</label>
															<input type="text" class="form-control js-iconWidth" name="std_dynamic_form[--btn-style-1-icon-width]">
														</div>
														<div class="form-group col-2">
															<label for="">Icon height</label>
															<input type="text" class="form-control js-iconHeight" name="std_dynamic_form[--btn-style-1-icon-height]">
														</div>
														<div class="form-group col-auto">
															<label for="">Icon Position</label>
															<input type="text" class="form-control js-iconInset" name="std_dynamic_form[--btn-style-1-icon-inset]">
														</div>
														<div class="form-group col-auto">
															<label for="">-color</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-1-icon-color" name="std_dynamic_form[--btn-style-1-icon-color]" />
														</div>
														<div class="form-group col-auto">
															<label for="">-color hover</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-1-icon-color-hover" name="std_dynamic_form[--btn-style-1-icon-color-hover]" />
														</div>
													</div>
												</div>
												<div class="col">
													<fieldset>
														<div class="btn btn-primary style-1 mc">Style 1</div>
													</fieldset>
												</div>
											</div>
											<hr>
											<div class="row">
												<div class="col-8">
													<div class="form-row">
														<div class="form-group col-auto">
															<label for="">Bg color</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-2" name="std_dynamic_form[--btn-style-2]" />
														</div>
														<div class="form-group col-auto">
															<label for="">Bg color hover</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-2-hover" name="std_dynamic_form[--btn-style-2-hover]" />
														</div>
													</div>
													<div class="form-row">
														<div class="form-group col-auto">
															<label for="">Text color</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-2-text" name="std_dynamic_form[--btn-style-2-text]" />
														</div>
														<div class="form-group col-auto">
															<label for="">-hover</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-2-text-hover" name="std_dynamic_form[--btn-style-2-text-hover]" />
														</div>
														<div class="form-group col-auto">
															<label for="">Letter spacing</label>
															<input type="text" class="form-control js-letterSpacing" name="std_dynamic_form[--btn-style-2-letter-spacing]">
														</div>
														<div class="form-group col-auto">
															<label for="">Padding <span class="help">[↑ → ↓ ←]</span></label>
															<input type="text" class="form-control js-padding" name="std_dynamic_form[--btn-style-2-padding]">
														</div>
													</div>
													<div class="form-row">
														<div class="form-group col-2">
															<label for="">Border</label>
															<input type="text" class="form-control js-border" name="std_dynamic_form[--btn-style-2-border]">
														</div>
														<div class="form-group col-2">
															<label for="">Border radius</label>
															<input type="text" class="form-control js-borderRadius" name="std_dynamic_form[--btn-style-2-border-radius]">
														</div>
														<div class="form-group col-auto">
															<label for="">Border Style</label>
															<select class="form-control js-borderStyle" name="std_dynamic_form[--btn-style-2-border-style]" id="">
																<option value="solid">Solid</option>
																<option value="dashed">Dashed</option>
																<option value="dotted">Dotted</option>
																<option value="inset">Inset</option>
																<option value="outset">Outset</option>
																<option value="double">Double</option>
															</select>
														</div>
														<div class="form-group col-auto">
															<label for="">-color</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-2-border-color" name="std_dynamic_form[--btn-style-2-border-color]" />
														</div>
														<div class="form-group col-sm">
															<label for="">-color hover</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-2-border-hover" name="std_dynamic_form[--btn-style-2-border-hover]" />
														</div>
													</div>
													<div class="form-row">
														<div class="form-group col-12">
															<label for="">Icon svg</label>
															<input type="hidden" class="js-iconsvg" id="--btn-style-2-icon" name="std_dynamic_form[--btn-style-2-icon]" value="">
															<textarea class="form-control js-icon" name="btn-style-2-icon-textarea" rows="2" spellcheck="false" data-svg=""></textarea>
														</div>
														<div class="form-group col-2">
															<label for="">Icon width</label>
															<input type="text" class="form-control js-iconWidth" name="std_dynamic_form[--btn-style-2-icon-width]">
														</div>
														<div class="form-group col-2">
															<label for="">Icon height</label>
															<input type="text" class="form-control js-iconHeight" name="std_dynamic_form[--btn-style-2-icon-height]">
														</div>
														<div class="form-group col-auto">
															<label for="">Icon Position</label>
															<input type="text" class="form-control js-iconInset" name="std_dynamic_form[--btn-style-2-icon-inset]">
														</div>
														<div class="form-group col-auto">
															<label for="">-color</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-2-icon-color" name="std_dynamic_form[--btn-style-2-icon-color]" />
														</div>
														<div class="form-group col-auto">
															<label for="">-color hover</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-2-icon-color-hover" name="std_dynamic_form[--btn-style-2-icon-color-hover]" />
														</div>
													</div>
												</div>
												<div class="col">
													<fieldset>
														<div class="btn btn-primary style-2 mc">Style 2</div>
													</fieldset>
												</div>
											</div>
											<hr>
											<div class="row">
												<div class="col-8">
													<div class="form-row">
														<div class="form-group col-auto">
															<label for="">Bg color</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-3" name="std_dynamic_form[--btn-style-3]" />
														</div>
														<div class="form-group col-auto">
															<label for="">Bg color hover</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-3-hover" name="std_dynamic_form[--btn-style-3-hover]" />
														</div>
													</div>
													<div class="form-row">
														<div class="form-group col-auto">
															<label for="">Text color</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-3-text" name="std_dynamic_form[--btn-style-3-text]" />
														</div>
														<div class="form-group col-auto">
															<label for="">-hover</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-3-text-hover" name="std_dynamic_form[--btn-style-3-text-hover]" />
														</div>
														<div class="form-group col-auto">
															<label for="">Letter spacing</label>
															<input type="text" class="form-control js-letterSpacing" name="std_dynamic_form[--btn-style-3-letter-spacing]">
														</div>
														<div class="form-group col-auto">
															<label for="">Padding <span class="help">[↑ → ↓ ←]</span></label>
															<input type="text" class="form-control js-padding" name="std_dynamic_form[--btn-style-3-padding]">
														</div>
													</div>
													<div class="form-row">
														<div class="form-group col-2">
															<label for="">Border</label>
															<input type="text" class="form-control js-border" name="std_dynamic_form[--btn-style-3-border]">
														</div>
														<div class="form-group col-2">
															<label for="">Border radius</label>
															<input type="text" class="form-control js-borderRadius" name="std_dynamic_form[--btn-style-3-border-radius]">
														</div>
														<div class="form-group col-auto">
															<label for="">Border Style</label>
															<select class="form-control js-borderStyle" name="std_dynamic_form[--btn-style-3-border-style]" id="">
																<option value="solid">Solid</option>
																<option value="dashed">Dashed</option>
																<option value="dotted">Dotted</option>
																<option value="inset">Inset</option>
																<option value="outset">Outset</option>
																<option value="double">Double</option>
															</select>
														</div>
														<div class="form-group col-auto">
															<label for="">-color</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-3-border-color" name="std_dynamic_form[--btn-style-3-border-color]" />
														</div>
														<div class="form-group col-sm">
															<label for="">-color hover</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-3-border-hover" name="std_dynamic_form[--btn-style-3-border-hover]" />
														</div>
													</div>
													<div class="form-row">
														<div class="form-group col-12">
															<label for="">Icon svg</label>
															<input type="hidden" class="js-iconsvg" id="--btn-style-3-icon" name="std_dynamic_form[--btn-style-3-icon]" value="">
															<textarea class="form-control js-icon" name="btn-style-3-icon-textarea" rows="2" spellcheck="false" data-svg=""></textarea>
														</div>
														<div class="form-group col-2">
															<label for="">Icon width</label>
															<input type="text" class="form-control js-iconWidth" name="std_dynamic_form[--btn-style-3-icon-width]">
														</div>
														<div class="form-group col-2">
															<label for="">Icon height</label>
															<input type="text" class="form-control js-iconHeight" name="std_dynamic_form[--btn-style-3-icon-height]">
														</div>
														<div class="form-group col-auto">
															<label for="">Icon Position</label>
															<input type="text" class="form-control js-iconInset" name="std_dynamic_form[--btn-style-3-icon-inset]">
														</div>
														<div class="form-group col-auto">
															<label for="">-color</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-3-icon-color" name="std_dynamic_form[--btn-style-3-icon-color]" />
														</div>
														<div class="form-group col-auto">
															<label for="">-color hover</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-3-icon-color-hover" name="std_dynamic_form[--btn-style-3-icon-color-hover]" />
														</div>
													</div>
												</div>
												<div class="col">
													<fieldset>
														<div class="btn btn-primary style-3 mc">Style 3</div>
													</fieldset>
												</div>
											</div>
											<hr>
											<div class="row">
												<div class="col-8">
													<div class="form-row">
														<div class="form-group col-auto">
															<label for="">Bg color</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-4" name="std_dynamic_form[--btn-style-4]" />
														</div>
														<div class="form-group col-auto">
															<label for="">Bg color hover</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-4-hover" name="std_dynamic_form[--btn-style-4-hover]" />
														</div>
													</div>
													<div class="form-row">
														<div class="form-group col-auto">
															<label for="">Text color</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-4-text" name="std_dynamic_form[--btn-style-4-text]" />
														</div>
														<div class="form-group col-auto">
															<label for="">-hover</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-4-text-hover" name="std_dynamic_form[--btn-style-4-text-hover]" />
														</div>
														<div class="form-group col-auto">
															<label for="">Letter spacing</label>
															<input type="text" class="form-control js-letterSpacing" name="std_dynamic_form[--btn-style-4-letter-spacing]">
														</div>
														<div class="form-group col-auto">
															<label for="">Padding <span class="help">[↑ → ↓ ←]</span></label>
															<input type="text" class="form-control js-padding" name="std_dynamic_form[--btn-style-4-padding]">
														</div>
													</div>
													<div class="form-row">
														<div class="form-group col-2">
															<label for="">Border</label>
															<input type="text" class="form-control js-border" name="std_dynamic_form[--btn-style-4-border]">
														</div>
														<div class="form-group col-2">
															<label for="">Border radius</label>
															<input type="text" class="form-control js-borderRadius" name="std_dynamic_form[--btn-style-4-border-radius]">
														</div>
														<div class="form-group col-auto">
															<label for="">Border Style</label>
															<select class="form-control js-borderStyle" name="std_dynamic_form[--btn-style-4-border-style]" id="">
																<option value="solid">Solid</option>
																<option value="dashed">Dashed</option>
																<option value="dotted">Dotted</option>
																<option value="inset">Inset</option>
																<option value="outset">Outset</option>
																<option value="double">Double</option>
															</select>
														</div>
														<div class="form-group col-auto">
															<label for="">-color</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-4-border-color" name="std_dynamic_form[--btn-style-4-border-color]" />
														</div>
														<div class="form-group col-sm">
															<label for="">-color hover</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-4-border-hover" name="std_dynamic_form[--btn-style-4-border-hover]" />
														</div>
													</div>
													<div class="form-row">
														<div class="form-group col-12">
															<label for="">Icon svg</label>
															<input type="hidden" class="js-iconsvg" id="--btn-style-4-icon" name="std_dynamic_form[--btn-style-4-icon]" value="">
															<textarea class="form-control js-icon" name="btn-style-4-icon-textarea" rows="2" spellcheck="false" data-svg=""></textarea>
														</div>
														<div class="form-group col-2">
															<label for="">Icon width</label>
															<input type="text" class="form-control js-iconWidth" name="std_dynamic_form[--btn-style-4-icon-width]">
														</div>
														<div class="form-group col-2">
															<label for="">Icon height</label>
															<input type="text" class="form-control js-iconHeight" name="std_dynamic_form[--btn-style-4-icon-height]">
														</div>
														<div class="form-group col-auto">
															<label for="">Icon Position</label>
															<input type="text" class="form-control js-iconInset" name="std_dynamic_form[--btn-style-4-icon-inset]">
														</div>
														<div class="form-group col-auto">
															<label for="">-color</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-4-icon-color" name="std_dynamic_form[--btn-style-4-icon-color]" />
														</div>
														<div class="form-group col-auto">
															<label for="">-color hover</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-4-icon-color-hover" name="std_dynamic_form[--btn-style-4-icon-color-hover]" />
														</div>
													</div>
												</div>
												<div class="col">
													<fieldset>
														<div class="btn btn-primary style-4 mc">Style 4</div>
													</fieldset>
												</div>
											</div>
											<hr>
											<div class="row">
												<div class="col-8">
													<div class="form-row">
														<div class="form-group col-auto">
															<label for="">Bg color</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-5" name="std_dynamic_form[--btn-style-5]" />
														</div>
														<div class="form-group col-auto">
															<label for="">Bg color hover</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-5-hover" name="std_dynamic_form[--btn-style-5-hover]" />
														</div>
													</div>
													<div class="form-row">
														<div class="form-group col-auto">
															<label for="">Text color</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-5-text" name="std_dynamic_form[--btn-style-5-text]" />
														</div>
														<div class="form-group col-auto">
															<label for="">-hover</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-5-text-hover" name="std_dynamic_form[--btn-style-5-text-hover]" />
														</div>
														<div class="form-group col-auto">
															<label for="">Letter spacing</label>
															<input type="text" class="form-control js-letterSpacing" name="std_dynamic_form[--btn-style-5-letter-spacing]">
														</div>
														<div class="form-group col-auto">
															<label for="">Padding <span class="help">[↑ → ↓ ←]</span></label>
															<input type="text" class="form-control js-padding" name="std_dynamic_form[--btn-style-5-padding]">
														</div>
													</div>
													<div class="form-row">
														<div class="form-group col-2">
															<label for="">Border</label>
															<input type="text" class="form-control js-border" name="std_dynamic_form[--btn-style-5-border]">
														</div>
														<div class="form-group col-2">
															<label for="">Border radius</label>
															<input type="text" class="form-control js-borderRadius" name="std_dynamic_form[--btn-style-5-border-radius]">
														</div>
														<div class="form-group col-auto">
															<label for="">Border Style</label>
															<select class="form-control js-borderStyle" name="std_dynamic_form[--btn-style-5-border-style]" id="">
																<option value="solid">Solid</option>
																<option value="dashed">Dashed</option>
																<option value="dotted">Dotted</option>
																<option value="inset">Inset</option>
																<option value="outset">Outset</option>
																<option value="double">Double</option>
															</select>
														</div>
														<div class="form-group col-auto">
															<label for="">-color</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-5-border-color" name="std_dynamic_form[--btn-style-5-border-color]" />
														</div>
														<div class="form-group col-sm">
															<label for="">-color hover</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-5-border-hover" name="std_dynamic_form[--btn-style-5-border-hover]" />
														</div>
													</div>
													<div class="form-row">
														<div class="form-group col-12">
															<label for="">Icon svg</label>
															<input type="hidden" class="js-iconsvg" id="--btn-style-5-icon" name="std_dynamic_form[--btn-style-5-icon]" value="">
															<textarea class="form-control js-icon" name="btn-style-5-icon-textarea" rows="2" spellcheck="false" data-svg=""></textarea>
														</div>
														<div class="form-group col-2">
															<label for="">Icon width</label>
															<input type="text" class="form-control js-iconWidth" name="std_dynamic_form[--btn-style-5-icon-width]">
														</div>
														<div class="form-group col-2">
															<label for="">Icon height</label>
															<input type="text" class="form-control js-iconHeight" name="std_dynamic_form[--btn-style-5-icon-height]">
														</div>
														<div class="form-group col-auto">
															<label for="">Icon Position</label>
															<input type="text" class="form-control js-iconInset" name="std_dynamic_form[--btn-style-5-icon-inset]">
														</div>
														<div class="form-group col-auto">
															<label for="">-color</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-5-icon-color" name="std_dynamic_form[--btn-style-5-icon-color]" />
														</div>
														<div class="form-group col-auto">
															<label for="">-color hover</label>
															<input type="hidden" class="colorpicker" data-color="--btn-style-5-icon-color-hover" name="std_dynamic_form[--btn-style-5-icon-color-hover]" />
														</div>
													</div>
												</div>
												<div class="col">
													<fieldset>
														<div class="btn btn-primary style-5 mc">Style 5</div>
													</fieldset>
												</div>
											</div>
											<div class="btn-wrapper">
												<button type="submit" class="btn btn-primary js-save">Save</button>
											</div>
										</div>
									</div>

									{# Header #}
									<div class="tab-pane fade" id="v-pills-header" role="tabpanel" aria-labelledby="v-pills-header-tab">
										<div class="d-grid">
											<h4 class="card-heading p-b-10 mb-4">Header</h4>
											<div class="row">
												<div class="col-2">
													<h5>Desktop</h5>
												</div>
												<div class="col-10">
													<div class="form-row">
														<div class="form-group col-2">
															<label for="">Height</label>
															<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--header-height]">
														</div>
														<div class="form-group col-auto">
															<label>Bg color</label>
															<input type="hidden" class="colorpicker" data-color="--header-background" name="std_dynamic_form[--header-background]" />
														</div>
														<div class="form-group col-auto">
															<label>Icons color</label>
															<input type="hidden" class="colorpicker" data-color="--header-icons-color" name="std_dynamic_form[--header-icons-color]" />
														</div>
														<div class="form-group col-auto">
															<label>&nbsp;</label>
															<div class="custom-control custom-checkbox checkbox-primary form-check mt-2 d-flex align-items-center">
																<input type="checkbox" id="choose-menu-hp" name="std_dynamic_form[--header-position]" value="sticky" class="custom-control-input js-sticky">
																<label class="custom-control-label" for="choose-menu-hp">Sticky</label>
															</div>
														</div>
													</div>
													<div class="form-row">
														<div class="form-group col-2">
															<label for="">Logo width</label>
															<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--header-logo-width]">
														</div>
													</div>
												</div>
											</div>
											<hr>
											<div class="row">
												<div class="col-2">
													<h5>Mobile</h5>
												</div>
												<div class="col-10">
													<div class="form-row">
														<div class="form-group col-2">
															<label for="">Height</label>
															<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--headermobile-height]">
														</div>
														<div class="form-group col-auto">
															<label>Bg color</label>
															<input type="hidden" class="colorpicker" data-color="--headermobile-background" name="std_dynamic_form[--headermobile-background]" />
														</div>
														<div class="form-group col-auto">
															<label>Icons color</label>
															<input type="hidden" class="colorpicker" data-color="--headermobile-icons-color" name="std_dynamic_form[--headermobile-icons-color]" />
														</div>
														<div class="form-group col">
															<label>&nbsp;</label>
															<div class="custom-control custom-checkbox checkbox-primary form-check mt-2 d-flex align-items-center">
																<input type="checkbox" id="choose-menu-hp-mobile" name="std_dynamic_form[--headermobile-position]" value="sticky" class="custom-control-input js-sticky">
																<label class="custom-control-label" for="choose-menu-hp-mobile">Sticky</label>
															</div>
														</div>
													</div>
													<div class="form-row">
														<div class="form-group col-2">
															<label for="">Logo width</label>
															<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--headermobile-logo-width]">
														</div>
													</div>
												</div>
											</div>
											<div class="btn-wrapper">
												<button type="submit" class="btn btn-primary js-save">Save</button>
											</div>
										</div>
									</div>

									{# Footer #}
									<div class="tab-pane fade" id="v-pills-footer" role="tabpanel" aria-labelledby="v-pills-footer-tab">
										<div class="d-grid">
											<h4 class="card-heading p-b-10 mb-4">Footer</h4>
											<div class="form-row">
												<div class="form-group col-auto">
													<label>Bg color</label>
													<input type="hidden" class="colorpicker" data-color="--footer-background" name="std_dynamic_form[--footer-background]" />
												</div>
												<div class="form-group col-auto">
													<label>Text color</label>
													<input type="hidden" class="colorpicker" data-color="--footer-color" name="std_dynamic_form[--footer-color]" />
												</div>
												<div class="form-group col-auto">
													<label>Title color</label>
													<input type="hidden" class="colorpicker" data-color="--footer-title-color" name="std_dynamic_form[--footer-title-color]" />
												</div>
												<div class="form-group col-auto">
													<label>Icons color</label>
													<input type="hidden" class="colorpicker" data-color="--footer-icons-color" name="std_dynamic_form[--footer-icons-color]" />
												</div>
												<div class="form-group col-auto">
													<label>Margin top</label>													
													<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--footer-margin-top]">													
												</div>
												<div class="form-group col-auto">
													<label>Margin top mobile</label>													
													<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--footer-margin-top-mobile]">													
												</div>
											</div>
											<hr>
											<div class="form-row">
												<div class="form-group col-2">
													<label>Background bottom</label>
													<input type="hidden" class="colorpicker" data-color="--footer-bottom-background" name="std_dynamic_form[--footer-bottom-background]" />
												</div>
												<div class="form-group col-2">
													<label>Text color</label>
													<input type="hidden" class="colorpicker" data-color="--footer-bottom-color" name="std_dynamic_form[--footer-bottom-color]" />
												</div>
											</div>
											<div class="btn-wrapper">
												<button type="submit" class="btn btn-primary js-save">Save</button>
											</div>
										</div>
									</div>
									
									{# Menus #}
									<div class="tab-pane fade" id="v-pills-menus" role="tabpanel" aria-labelledby="v-pills-menus-tab">
										<div class="d-grid">
											<h4 class="card-heading p-b-10 mb-4">Menus</h4>
											<div class="row">
												<div class="col-2">
													<h5>Header</h5>
												</div>
												<div class="col-10">
													<div class="form-row">
														<div class="form-group col-auto">
															<label>Menu color <br><br></label>
															<input type="hidden" class="colorpicker" data-color="--menu-color" name="std_dynamic_form[--menu-color]" />
														</div>
														<div class="form-group col-auto">
															<label>--color-hover <br><br></label>
															<input type="hidden" class="colorpicker" data-color="--menu-color-hover" name="std_dynamic_form[--menu-color-hover]" />
														</div>
														<div class="form-group col-auto">
															<label>Menu color <br>transparent_layout</label>
															<input type="hidden" class="colorpicker" data-color="--menu-color-transparent-layout" name="std_dynamic_form[--menu-color-transparent-layout]" />
														</div>
														<div class="form-group col-auto">
															<label>--color-hover <br>transparent_layout only</label>
															<input type="hidden" class="colorpicker" data-color="--menu-color-hover-transparent-layout" name="std_dynamic_form[--menu-color-hover-transparent-layout]" />
														</div>
													</div>
													<div class="form-row">
														<div class="form-group col-4">
															<label>Menu Font</label>
															<select class="form-control select2-style js-fontFamily" name="std_dynamic_form[--menu-font-family]">
																<optgroup label="Google fonts" class="js-googlefonts"></optgroup>
															</select>
														</div>
														<div class="form-group col">
															<label for="">Size</label>
															<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--menu-font-size]">
														</div>
														<div class="form-group col">
															<label for="">Weight</label>
															<select class="form-control js-styleVariant" name="std_dynamic_form[--menu-font-weight]" id="">
															</select>
															<input type="hidden" name="std_dynamic_form[menu-url]" value="">
														</div>
														<div class="form-group col">
															<label for="">Letter spacing</label>
															<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--menu-letter-spacing]">
														</div>
														<div class="form-group col">
															<label>&nbsp;</label>
															<div class="custom-control custom-checkbox checkbox-primary form-check mt-2 d-flex align-items-center">
																<input type="checkbox" id="choose-menu" name="std_dynamic_form[--menu-text-tranform]" value="uppercase" class="custom-control-input js-textTranform">
																<label class="custom-control-label" for="choose-menu">Uppercase</label>
															</div>
														</div>
														<div class="form-group col-auto">
															<label for="">Gap</label>
															<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--menu-gap]">
														</div>
													</div>
												</div>
											</div>
											<hr>
											<div class="row">
												<div class="col-2">
													<h5>Mobile</h5>
												</div>
												<div class="col-10">
													<div class="form-row">
														<div class="form-group col-2">
															<label for="">Menu Width</label>
															<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--menumobile-width]">
														</div>
														<div class="form-group col-auto">
															<label>Menu Bg color</label>
															<input type="hidden" class="colorpicker" data-color="--menumobile-background" name="std_dynamic_form[--menumobile-background]" />
														</div>
													</div>
													<hr>
													<div class="form-row">
														<div class="form-group col-auto">
															<label>Menu color</label>
															<input type="hidden" class="colorpicker" data-color="--menumobile-color" name="std_dynamic_form[--menumobile-color]" />
														</div>
													</div>
													<div class="form-row">
														<div class="form-group col-4">
															<label>Menu Font</label>
															<select class="form-control select2-style js-fontFamily" name="std_dynamic_form[--menumobile-font-family]">
																<optgroup label="Google fonts" class="js-googlefonts"></optgroup>
															</select>
														</div>
														<div class="form-group col">
															<label for="">Size</label>
															<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--menumobile-font-size]">
														</div>
														<div class="form-group col">
															<label for="">Weight</label>
															<select class="form-control js-styleVariant" name="std_dynamic_form[--menumobile-font-weight]" id="">
															</select>
															<input type="hidden" name="std_dynamic_form[menumobile-url]" value="">
														</div>
														<div class="form-group col">
															<label for="">Letter spacing</label>
															<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--menumobile-letter-spacing]">
														</div>
														<div class="form-group col">
															<label>&nbsp;</label>
															<div class="custom-control custom-checkbox checkbox-primary form-check mt-2 d-flex align-items-center">
																<input type="checkbox" id="choose-menu-mobile" name="std_dynamic_form[--menumobile-text-tranform]" value="uppercase" class="custom-control-input js-textTranform">
																<label class="custom-control-label" for="choose-menu-mobile">Uppercase</label>
															</div>
														</div>
														<div class="form-group col-auto">
															<label for="">Gap</label>
															<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--menumobile-gap]">
														</div>
													</div>
												</div>
											</div>
											<hr>
											<div class="row">
												<div class="col-2">
													<h5>Footer</h5>
												</div>
												<div class="col-10">
													<div class="form-row">
														<div class="form-group col-auto">
															<label>Menu color</label>
															<input type="hidden" class="colorpicker" data-color="--menufooter-color" name="std_dynamic_form[--menufooter-color]" />
														</div>
														<div class="form-group col-auto">
															<label>-color-hover</label>
															<input type="hidden" class="colorpicker" data-color="--menufooter-color-hover" name="std_dynamic_form[--menufooter-color-hover]" />
														</div>
													</div>
													<div class="form-row">
														<div class="form-group col-4">
															<label>Menu Font</label>
															<select class="form-control select2-style js-fontFamily" name="std_dynamic_form[--menufooter-font-family]">
																<optgroup label="Google fonts" class="js-googlefonts"></optgroup>
															</select>
														</div>
														<div class="form-group col">
															<label for="">Size</label>
															<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--menufooter-font-size]">
														</div>
														<div class="form-group col">
															<label for="">Weight</label>
															<select class="form-control js-styleVariant" name="std_dynamic_form[--menufooter-font-weight]" id="">
															</select>
															<input type="hidden" name="std_dynamic_form[menufooter-url]" value="">
														</div>
														<div class="form-group col">
															<label for="">Letter spacing</label>
															<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--menufooter-letter-spacing]">
														</div>
														<div class="form-group col">
															<label>&nbsp;</label>
															<div class="custom-control custom-checkbox checkbox-primary form-check mt-2 d-flex align-items-center">
																<input type="checkbox" id="choose-menu-footer" name="std_dynamic_form[--menufooter-text-tranform]" value="uppercase" class="custom-control-input js-textTranform">
																<label class="custom-control-label" for="choose-menu-footer">Uppercase</label>
															</div>
														</div>
														<div class="form-group col-auto">
															<label for="">Gap</label>
															<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--menufooter-gap]">
														</div>
													</div>
												</div>
											</div>
											<div class="btn-wrapper">
												<button type="submit" class="btn btn-primary js-save">Save</button>
											</div>
										</div>
									</div>

									{# Layouts #}
									<div class="tab-pane fade" id="v-pills-layouts" role="tabpanel" aria-labelledby="v-pills-layouts-tab">
										<div class="d-grid">
											<h4 class="card-heading p-b-10 mb-4">Layouts</h4>
											<div class="form-group">
												<label for="inputCard">Card Number</label>
												<input type="text" class="form-control" id="inputCard" placeholder="•••• •••• •••• 1234">
											</div>
											<div class="form-row">
												<div class="form-group col-md-6">
													<label for="inputExpiration">Expiration</label>
													<input type="text" class="form-control" id="inputExpiration" placeholder="MM / YY">
												</div>
												<div class="form-group col-md-6">
													<label for="inputCvv">CVV</label>
													<input type="text" class="form-control" id="inputCvv" placeholder="123">
												</div>
											</div>
											<div class="btn-wrapper">
												<button type="submit" class="btn btn-primary js-save">Save</button>
											</div>
										</div>
									</div>

									{# General #}
									<div class="tab-pane fade" id="v-pills-general" role="tabpanel" aria-labelledby="v-pills-general-tab">
										<div class="d-grid">
											<h4 class="card-heading p-b-10 mb-4">General</h4>
											<div class="form-row">
												<div class="form-group col-2">
													<label>Section Gap</label>
													<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--section-gap]">
												</div>
												<div class="form-group col-2">
													<label>Margin</label>
													<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--margin]">
												</div>
												<div class="form-group col-2">
													<label>Breadcrumb Margin</label>
													<input type="text" class="form-control js-inputVal" name="std_dynamic_form[--breadcrumbmargin]">
												</div>
											</div>
											<div class="btn-wrapper">
												<button type="submit" class="btn btn-primary js-save">Save</button>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			{{form_end(form)}}
			</div>
		</section>
	</div>
{% endblock %}
{% block stylesheets %}
		{{parent()}}
		{# Font Awesome #}
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">		
{% endblock %}
{% block javascripts %}
{{parent()}}
 <script>
	window.setTimeout(function() {
		$(".alert").fadeTo(500, 0).slideUp(500, function(){
			$(this).remove(); 
		});
	}, 5000);

 // COLORS
	const $bodycolor = getProperty('--body-color');
	const $textcolor = getProperty('--text-color');
	const $primary = getProperty('--primary');
	const $secondary = getProperty('--secondary');
	const $tertiary = getProperty('--tertiary');
	const $success = getProperty('--success');
	const $info = getProperty('--info');
	const $warning = getProperty('--warning');
	const $danger = getProperty('--danger');
	const $light = getProperty('--light');
	const $dark = getProperty('--dark');

	
	$("input[data-color]").each(function(){
		const $this = $(this);
		const $thiscolor = getProperty($this.data("color"));
		$this.val($thiscolor);
		$this.spectrum({
			color: $thiscolor,
			showInput: true,
			showAlpha: true,
			showInitial: true,
			allowEmpty:true,
			showPalette: true,
			showSelectionPalette: true,
			maxSelectionSize: 10,
			preferredFormat: "hsl",
			localStorageKey: "spectrum.masterconfig",
			change: function(color) {
				document.documentElement.style.setProperty($this.data("color"),color);
			},
			palette: [
				[$bodycolor, $textcolor],
				[$primary, $secondary, $tertiary],
				[$info, $light, $dark], 
				[$success, $warning, $danger]
			]
		});
	});
	
	
	// Create a function for getting a variable value
	function getProperty(prop) {
		var value = window.getComputedStyle(document.documentElement).getPropertyValue(prop).trim();
		return value;
	}

// FONTS

	// Google fonts combo-box
	function SetFonts(fonts) { 
		for (var i = 0; i < fonts.items.length; i++) {
			var option=$("<option></option>").attr("value", fonts.items[i].family).text(fonts.items[i].family);
			option.data("variants",fonts.items[i].variants);
			option.data("files",fonts.items[i].files);
			$('.js-fontFamily optgroup.js-googlefonts').append(option);
		} 
		$('.js-fontFamily').each(function(){
			const $this = $(this);
			const selectName = extractPropertyName($this.attr('name'));
			$this.find('option[value='+getProperty(selectName)+']').attr('selected', 'selected');
			$(this).trigger('change');
		});

	}
	var script = document.createElement('script');
	script.src = 'https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyC89Djlq71-XMlvafTSigOAcAHHg9xhKbc&callback=SetFonts';
	document.body.appendChild(script);

	// Get font values from css file
	$(".js-inputVal").each(function(){
		const $this = $(this);
		const inputName = extractPropertyName($this.attr('name'));
		$this.val(getProperty(inputName));
	});

	$(".js-textTranform").each(function(){
		const $this = $(this);
		const inputName = extractPropertyName($this.attr('name'));
		if(getProperty(inputName) == "uppercase")
			$this.prop("checked", true);
	});

	// Get font-weight from fontFamily
	$(".js-fontFamily").change(function() {
		const $this = $(this);
		const selectName = extractPropertyName($this.attr('name'));
		const selected=$this.find(':selected');
		const variants = selected.data('variants');
		const files = selected.data('files');
		const styleVariants = $this.closest(".form-row").find('.js-styleVariant');
		styleVariants.empty();
		let selectValue =  selected.val();
		document.documentElement.style.setProperty(selectName, selectValue);

		value=getProperty(extractPropertyName(styleVariants.attr('name')));
		// console.log(value);
		first=true;
		variants.forEach(variant => {
			if (!variant.includes('italic')) {
				file=files[variant];
				if(first){
					styleVariants.next("input").val(file);
					first=false;
				}
				first=false;
				variant = variant.includes('regular') ? '400' : variant;
				// console.log(variant);
				var option=$("<option></option>").attr("value", variant).text(variant);
				option.data("file",file);
				if (value==variant) {
					// console.log('selected');
					styleVariants.next("input").val(file);
					option.attr('selected', 'selected');
				}
				styleVariants.append(option);
			}
		});
	});

	$(".js-styleVariant").change(function() {
		const $this = $(this);
		const selectName = extractPropertyName($this.attr('name'));
		const selected=$this.find(':selected');
		const file = selected.data('file');
		$this.next("input").val(file);
		document.documentElement.style.setProperty(selectName, selected.val());
	});

	$(".js-sticky").each(function(){
		const $this = $(this);
		const inputName = extractPropertyName($this.attr('name'));
		if(getProperty(inputName) == "sticky"){
			$this.prop( "checked", true );
		}

	});
	
// BUTTONS

	$(".js-border, .js-borderRadius, .js-letterSpacing, .js-padding").each(function(){
		const $this = $(this);
		const inputName = extractPropertyName($this.attr('name'));;
		$this.val(getProperty(inputName));

		$this.on('change', function(){
			let inputValue = $this.val();
			document.documentElement.style.setProperty(inputName, inputValue);
		});
	});

	$(".js-borderStyle").each(function(){
		const $this = $(this);
		const selectName = extractPropertyName($this.attr('name'));
		$this.find('option[value='+getProperty(selectName)+']').attr('selected', 'selected');

		$this.on('change', function(){
			let selectValue = $this.val();
			document.documentElement.style.setProperty(selectName, selectValue);
		});
	});

	// ICON - url-encoder for svg

	const symbols = /[\r\n%#()<>?[\\\]^`{|}]/g;
	const icons = document.getElementsByClassName("js-icon");
	for (let i = 0; i < icons.length; i++) {
		icons[i].oninput = function () {
			getResults(icons[i]);
		};
	}

	function getResults (el) {
		const name = '--'+(el.name).replace('-textarea', '');
		if (!el.value) {
			document.documentElement.style.setProperty(name, '');
			return;
		}

		const namespaced = addNameSpace(el.value);
		const escaped = encodeSVG(namespaced);
		const resultCss = `url("data:image/svg+xml,${escaped}")`;
		// document.documentElement.style.setProperty(name, resultCss);
		document.getElementById(name).value = resultCss;
		// console.log(resultCss);

		// const tempWidth = $(el).closest('.form-row').find('.js-iconWidth');
		// const tempHeight = $(el).closest('.form-row').find('.js-iconHeight');
		// const tempInset = $(el).closest('.form-row').find('.js-iconInset'); 
		// tempWidth.val(getProperty(name+"-width"));
		// tempHeight.val(getProperty(name+"-height"));
		// tempInset.val(getProperty(name+"-inset"));	
	}

	$(".js-iconsvg").each(function(){
		const $this = $(this);
		const inputName = extractPropertyName($this.attr('name'));
		$this.val(getProperty(inputName));		
		//decode svg
		const svg = getProperty(inputName);
		const svgDecoded = svg.replace(/url\("data:image\/svg\+xml,(.*)"\)/, '$1');
		const svgDecodedDecoded = decodeSVG(svgDecoded);
		$this.closest('.form-row').find('.js-icon').val(svgDecodedDecoded);
		$this.on('change', function(){
			let inputValue = $this.val();
			document.documentElement.style.setProperty(inputName, inputValue);
		});
	});

	$(".js-iconWidth, .js-iconHeight, .js-iconInset").each(function(){
		const $this = $(this);
		const inputName = extractPropertyName($this.attr('name'));
		$this.val(getProperty(inputName));		
		$this.on('change', function(){
			let inputValue = $this.val();
			document.documentElement.style.setProperty(inputName, inputValue);
		});
	});


	function addNameSpace (data) {
		if (data.indexOf(`http://www.w3.org/2000/svg`) < 0) {
			data = data.replace(/<svg/g, `<svg xmlns='http://www.w3.org/2000/svg$'`);
		}
		return data;
	}

	function encodeSVG (data) {
		data = data.replace(/"/g, `'`);
		data = data.replace(/>\s{1,}</g, `><`);
		data = data.replace(/\s{2,}/g, ` `);
		return data.replace(symbols, encodeURIComponent);
	}

	function decodeSVG (data) {
		data=data.replace(/'/g, '"');
		data=data.replace(/%([0-9A-F]{2})/g, function(match, p1) {
			return String.fromCharCode('0x' + p1);
		});
		return data;


	}
	
	//save document.documentElement.style to css file
	$(".js-save").on('click', function(e){
		// e.preventDefault();
		// const css = window.getComputedStyle(document.documentElement);
		// console.log(getAllStdCSSVariableNames());
	}
	);
function getAllStdCSSVariableNames(styleSheets = document.styleSheets){
   var cssVars = [];
   // loop each stylesheet
   for(var i = 0; i < styleSheets.length; i++){
      // loop stylesheet's cssRules
      try{ // try/catch used because 'hasOwnProperty' doesn't work
         for( var j = 0; j < styleSheets[i].cssRules.length; j++){
            try{
			   //if styleSheets[i] href contains 'variables'
				if(styleSheets[i].href.indexOf('variables') > -1){
				// loop stylesheet's cssRules' style (property names)
				for(var k = 0; k < styleSheets[i].cssRules[j].style.length; k++){
					let name = styleSheets[i].cssRules[j].style[k];
					// test name for css variable signiture and uniqueness
					if(name.startsWith('--') && cssVars.indexOf(name) == -1){
						cssVars.push(name);
					}
				}
				}
            } catch (error) {}
         }
      } catch (error) {}
   }
   return cssVars;
}
function extractPropertyName(name){
	const regex= /\[(.*?)\]/g;
	const match = regex.exec(name);
	return match[1];
}


</script>
{% endblock %}