#set ($brikitThemeName = $themePress.themeName($spaceKey))

############################################
## Designer panel construction
############################################

## Add a heading to the designer, annotated with the $themeName variable if specified
#macro (designerHeading $title)
	<thead>
		<tr><th><span class="designer-subhead">$title</span></th></tr>
	</thead>
#end

## Add a panel to the designer
#macro (designerPanel $titleHTML $selector $indentLevel $fileLocation)
	<tr>
		<td>
			## PRESS-786: renamed from "clickable" to "clickable-control" as something in Confluence is targeting .clickable
			<div class="clickable-control" data-selector="$!selector">
				<div class="accordion-title">
					<div class="#if ($indentLevel != -1) indent nest$indentLevel #end">$titleHTML</div>
				</div>
				<div class="designer-panel">
					#parse("$fileLocation")
				</div>
			</div>
		</td>
	</tr>
#end

## Add add-on panels to the designer
#macro (brikitThemeTabAddOnPanel $addOnPanel)
	#if ($brikitCore.developerMode)
		#set ($panelLocation = "$brikitCore.parseFileLocation/$addOnPanel.templateLocation/$addOnPanel.template")
	#else
		#set ($panelLocation = "$addOnPanel.templateLocation/$addOnPanel.template")
	#end
	#designerPanel($addOnPanel.name, $addOnPanel.selector, -1, $panelLocation)
#end

## Add built-in panels to the designer
#macro (brikitThemeTabPanel $title $selector $indentLevel $includeFileName)
	#designerPanel($title, $selector, $indentLevel, "$brikitCore.parseFileLocation/html/designer/panels/theme-tab/$includeFileName")
#end

#macro (brikitArchitectTabPanel $title $selector $indentLevel $includeFileName)
	#designerPanel($title, $selector, $indentLevel, "$brikitCore.parseFileLocation/html/designer/panels/architect-tab/$includeFileName")
#end

#macro (brikitPageTabPanel $title $selector $indentLevel $includeFileName)
	#designerPanel($title, $selector, $indentLevel, "$brikitCore.parseFileLocation/html/designer/panels/page-tab/$includeFileName")
#end

############################################
## Feature Tours
############################################

#macro (featureTour $lessonPlan $buttonText $clearBelow $extraClass)
	<button class="aui-button aui-button-subtle feature-tour $!extraClass" data-brikit-lesson-plan="$lessonPlan"><span class="aui-icon aui-icon-small aui-iconfont-info">Feature tour </span> $buttonText</button>
	#if ($clearBelow)
		<br class="clear" />
	#end
#end

############################################
## Field Set Expanders
############################################

#macro (designerFieldSetOpen $title $extraClass)
	<div class="expanding-field-set-container">
		<span class="expand-control-icon icon">&nbsp;</span><h5 class="field-set-toggle $!extraClass">$title</h5>
		<fieldset class="group">
#end

#macro (designerFieldSetClose)
		</fieldset>
	</div>
#end

############################################
## Popup help labels
############################################

#macro (labelWithHelp $label $property $helpProperty $extraClass $required)
	#if ($label)
		#set ($helpKey = "#if ($helpProperty)$helpProperty#{else}$property#end")
		<label #if ($extraClass) class="$extraClass" #end><a href="#" class="help-link" id="help-$helpKey" for="$property" 
			data-key="$helpKey"
			><span class="label-text">$label</span></a>#if ($required)<span class="aui-icon icon-required"> required</span>#end<span id="error-$helpKey" class="aui-icon aui-icon-error field-error" style="display:none">Error</span></label>
	#end
#end

#macro (legendWithHelp $label $property $helpProperty)
	#if ($label)
		#set ($helpKey = "#if ($helpProperty)$helpProperty#{else}$property#end")
		<legend><span><a href="#" class="help-link" id="help-$helpKey" for="$property" data-key="$helpKey"><span class="label-text">$label</span></a></span></legend>
	#end
#end

############################################
## Text input fields
############################################

#macro (designerTextField $label $property $helpProperty $type $extraClass $initialValue $disabled)
	#set ($fieldType = "#if ($type)$type#{else}text#end")
	<div class="field-group property-field-group">
		#if ($brikitCore.isSet($label)) #labelWithHelp($label, $property, $helpProperty) #end
    	<input class="$fieldType $!extraClass #if ($disabled)disabled#end" type="$fieldType" name="$property" id="$property" value="#if($initialValue)$initialValue#else$!themeProperties.get($property)#end" #if ($disabled)disabled="disabled"#end  />
	</div>
#end

#macro (designerTextarea $label $property $helpProperty $placeholder $extraClass)
	<div class="field-group property-field-group">
		#labelWithHelp($label, $property, $helpProperty)
		<textarea class="textarea $!extraClass" name="$property" id="$property" 
			#if ($placeholder)placeholder="$placeholder"#end>$!themeProperties.get($property)</textarea>
		#if ($description)
	    	<div class="description">$description</div>
		#end
	</div>
#end

#macro (designerColorPicker $label $property $helpProperty $isPaletteColor $extraClass $initialValue)
	<div class="field-group property-field-group">
		#labelWithHelp($label, $property, $helpProperty)
		#set ($namedValue = "")
		#if ($initialValue)
			#set ($namedValue = $initialValue)
		#else
			#set ($namedValue = $themeProperties.get($property))
		#end
		#if (!$isPaletteColor)
			#set ($namedValue = $themePress.getColorName($namedValue, $themeName))
		#end
    	<input class="text color $!extraClass" type="text" name="$property" id="$property" 
			#if ($isPaletteColor) data-palette="true" #end value="$namedValue" />
	</div>
#end

############################################
## Checkbox fields
############################################

#macro (designerCheckbox $label $property $helpProperty $extraClass $initialValue)
    <div class="field-group property-field-group">
		#labelWithHelp($label, $property, $helpProperty)
        <input class="checkbox $!extraClass" type="checkbox" name="$property" id="$property" 
			#if ($initialValue  == "true" || $brikitCore.isSet($themeProperties.get($property))) checked="checked" #end />
    </div>                                
#end

#macro (designerCheckboxNonTheme $label $property $helpProperty $checked $extraClass)
    <div class="field-group property-field-group">
		#legendWithHelp($label, $property, $helpProperty)
        <input class="checkbox $!extraClass" type="checkbox" name="$property" id="$property" #if ($checked) checked="checked" #end />
    </div>                                
#end

#macro (designerCheckboxWithLegend $label $property $helpProperty $extraClass)
    <div class="checkbox-with-legend property-field-group">
        <input class="checkbox $!extraClass" type="checkbox" name="$property" id="$property" 
			#if ($brikitCore.isSet($themeProperties.get($property))) checked="checked" #end />
		#labelWithHelp($label, $property, $helpProperty)
	</div>
#end

#macro (designerCheckboxNonThemeWithLegend $label $property $helpProperty $checked $extraClass)
    <div class="checkbox-with-legend property-field-group">
        <input class="checkbox $!extraClass" type="checkbox" name="$property" id="$property" #if ($checked) checked="checked" #end />
		#labelWithHelp($label, $property, $helpProperty)
	</div>
#end

############################################
## Select fields
############################################

## Display a select list with options, adding an empty/null value option at the top of the list
#macro (designerSelectField $label $property $helpProperty $options $extraClass $initialValue $translateOptions $displayOptionsMap)
	<div class="field-group property-field-group">
		#labelWithHelp($label, $property, $helpProperty)
		#set ($value = "")
		<select id="$property" class="select $!extraClass" name="$property" >
			#if ($brikitCore.isSet($initialValue))
				#set ($value = $initialValue)
			#else
				#set ($value = "$!themeProperties.get($property)")
			#end
			#foreach ($option in $options)
				#if (!$brikitCore.isSet($option))
					<option value="" #if (!$brikitCore.isSet($value)) selected="selected" #end></option>
				#else
					#set ($humanText = "")
					#if ($translateOptions)
						#set ($humanText = $brikitCore.text("com.brikit.themepress.designer.select.${property}.${option}"))
					#elseif ($displayOptionsMap)
						#set ($humanText = "$!displayOptionsMap.get($option)")
					#end
					#if (!$brikitCore.isSet($humanText))
						#set ($humanText = $option)
					#end
					<option value="$option" #if ($value == $option) selected="selected" #end>$humanText</option>
				#end
			#end
		</select>
	</div>
#end

#macro (designerTextTransform $label $property $helpProperty)
	#designerSelectField($label $property $helpProperty ["", "lowercase", "uppercase", "capitalize"] "text-transform")
#end

#macro (designerTextAlign $label $property $helpProperty)
	#designerSelectField($label $property $helpProperty ["", "left", "right", "center", "justify"] "text-align")
#end

#macro (designerFontStyle $label $property $helpProperty)
	#designerSelectField($label $property $helpProperty ["", "normal", "italic", "oblique"] "font-style")
#end

#macro (designerFontFamilySelectField $label $property $helpProperty)
	#set ($fontFamilies = $themePress.getNamedFonts($spaceKey))
	#designerSelectField($label $property $helpProperty $themeProperties.fontFamilyNamesForPickList false false false $themeProperties.namedFontFamilyVariables)
#end

#macro (designerGroupMultiSelect $id $groups $addURL $removeURL)
	<div id="$id" class="group-multi-select" data-add-url="$addURL" data-remove-url="$removeURL">
		<div class="selected-groups">
			#foreach ($group in $groups)
				<span class="group-multi-select-choice aui-label aui-label-closeable" data-group="$group">$group<span tabindex="0" class="aui-icon aui-icon-close"></span></span>
			#end
		</div>
	
		<input class="group-multi-select-search-field autocomplete-group text" type="text" 
			placeholder="$brikitCore.text("com.brikit.themepress.designer.search.group.placeholder")" />
	</div>
#end

#macro (designerSpaceCategoryMultiSelect $id $categories $addURL $removeURL)
	<div id="$id" class="category-multi-select" data-add-url="$addURL" data-remove-url="$removeURL">
		<div class="selected-categories">
			#foreach ($category in $categories)
				<span class="category-multi-select-choice aui-label aui-label-closeable" data-category="$category">$category<span tabindex="0" class="aui-icon aui-icon-close"></span></span>
			#end
		</div>
	
		<select class="category-multi-select-search-field text" type="text"
			placeholder="$brikitCore.text("com.brikit.themepress.designer.search.space.category.placeholder")">
			<option data-category=""></option>
			#set ($allCategories = $brikitCore.spaceCategories)
			#foreach ($category in $allCategories)
				#if (!$categories.contains($category))
					<option data-category="$category">$category</option>
				#end
			#end
		</select>
	</div>
#end



############################################
## Image select fields
############################################

#macro (imageURLThumbnail $fullImageURL $height $width)
	<div style="background-image: url($fullImageURL); background-size: contain; background-repeat: no-repeat; background-position: center; width: ${width}px; height: ${height}px"></div> 
#end

#macro (imageThumbnail $image $height $width $sourceThemeName)
	#if (!$sourceThemeName)
		#set ($sourceThemeName = $themeProperties.themeName)
	#end
	#imageURLThumbnail("$brikitCore.directURL/designs/themes/$brikitCore.urlEncode($sourceThemeName)/images/$brikitCore.urlEncode($image)" $height $width)
#end

#macro (designerURLImageSelectField $label $property $helpProperty $extraClass $imageName $fullImageURL)
	<div class="field-group property-field-group $!extraClass">
		#labelWithHelp($label $property $helpProperty)
		<span class="image-thumbnail-holder">
			#if ($brikitCore.isSet($imageName))
				<span class="image-thumbnail-container">
					<a href="$fullImageURL" data-image="$imageName" class="image-thumbnail" title="$imageName">#imageURLThumbnail($fullImageURL, 30, 30)</a>
				</span>
				<a href="$fullImageURL" data-image="$imageName" class="image-thumbnail magnifier" title="$imageName"><span class="aui-icon aui-icon-small aui-iconfont-search"></span></a>
			#else
				<a href="#" data-image="" class="image-thumbnail no-image"><span class="aui-icon aui-icon-small aui-iconfont-search"></span></a>
			#end
		</span>
		<input class="text image-field #if ($brikitCore.isSet($extraClass)) $extraClass #else reload-designer #end" type="hidden" name="$property" id="$property" value="$!imageName" />
	</div>
#end

#macro (designerImageSelectField $label $property $helpProperty $extraClass)
	#set ($imageValue = false) ## Needed to clear previously set values
	#set ($imageValue = $themeProperties.get($property))
	#designerURLImageSelectField($label $property $helpProperty $extraClass $imageValue "$brikitCore.directURL/designs/themes/$brikitCore.urlEncode($brikitThemeName)/images/$brikitCore.urlEncode($imageValue)")
#end

#macro (designerShowArchitectPages $label $property $architectPageType)
    <div class="field-group property-field-group architect-all-sources-list">

		#labelWithHelp($label $property)

        #set ($architectPages = $themePress.architectPages($architectPageType, $spaceKey))
        #foreach ($architectPage in $architectPages)
	        <div class="radio">
                <a href="$req.contextPath$architectPage.urlPath" title="View Page"><span class="aui-icon aui-icon-small aui-iconfont-view view-page-link">View</span></a>
	            <label>$themePress.getDisplayableArchitectPageTitle($architectPage)</label>
	        </div>
        #end

    </div>
#end

#macro (layoutPageRadioButton $architectPage $selectorType $label)
	#set ($displayTitle = $themePress.getDisplayableArchitectPageTitle($architectPage))
	<div class="radio">
	    <input class="$selectorType" type="$selectorType" #if ($architectPageName == $architectPage.getDisplayTitle()) checked="checked" #end name="$architectPageType" data-page-title="$architectPage.getDisplayTitle()" id="architect-radio-$architectPage.id" href="$req.contextPath/plugins/brikit/architect/savearchitectsetting.action?" archSourceName="$displayTitle" archSourceType="$label">
			<label for="architect-radio-$architectPage.id">$displayTitle</label>
	        <a href="$req.contextPath$architectPage.urlPath" title="View Page"><span class="aui-icon aui-icon-small aui-iconfont-view view-page-link">View</span></a>
	    </input>
	</div>
#end

#macro (designerArchitectPageSelectField $label $property $architectPageType $currentSelection $multiSelect $includeMobilePhoneVersions)
	#if ($multiSelect)
		#set ($selectorType = "checkbox")
		#set ($architectPageName = "")
	#else
		#set ($selectorType = "radio")
		#if ($currentSelection)
			#set ($architectPageName = $currentSelection)
		#else
			#set ($architectPageName = $themePress.getArchitectPageName($page, $architectPageType))
		#end
	#end
    #set ($architectPages = $themePress.architectPages($architectPageType, $spaceKey, $includeMobilePhoneVersions))
	#if ($architectPageType.startsWith(".brikit.layout"))
		#set ($frames = $themePress.architectPages(".brikit.frame", $spaceKey))
		#set ($grids = $themePress.architectPages(".brikit.grid", $spaceKey))
	#else
		#set ($frames = [])
		#set ($grids = [])
	#end
    #set ($architectHomePage = $themePress.getArchitectHomePage())

    #if ($architectPages.size() > 0)

		<div class="field-group property-field-group architect-source-select">
			#if ($frames.size() > 0)
				#set ($frameLabel = $label.replace("Layout", "Frame"))
				#labelWithHelp($frameLabel $property)

	            #foreach ($architectPage in $frames)
					#layoutPageRadioButton($architectPage $selectorType $frameLabel)
	            #end
			#end

			#if ($grids.size() > 0)
				#set ($gridLabel = $label.replace("Layout", "Grid"))
				#labelWithHelp($gridLabel $property)

	            #foreach ($architectPage in $grids)
					#layoutPageRadioButton($architectPage $selectorType $gridLabel)
	            #end
			#end

			#labelWithHelp($label $property)

            #foreach ($architectPage in $architectPages)
				#layoutPageRadioButton($architectPage $selectorType $label)
            #end

		</div>
		#if ($themePress.overridesLayout($page) && $property == "brikitLayoutSourcePage")
			<div class="aui-message warning">
			    <p class="title">
			        <span class="aui-icon icon-warning"></span> Page Override
			    </p>
			    <p>The current page is overriding this design.</p>
			    <p>(See: <strong>Page</strong> tab > <strong>Page Design</strong>)</p>
			</div>
		#end
    #else
        <div class="aui-message">
            <p class="title">
                <span class="aui-icon icon-warning"></span> No Sources Configured
            </p>
            <p>There are no sources defined for the $label.</p>
			<p><a class="aui-button" href="$req.contextPath$architectHomePage.urlPath">Visit All Sources</a></p>
        </div>
    #end

#end

############################################
## Standardized Field Options
############################################

#macro (textUnderlineOptionFields $field)
	<h5>Text Underline</h5>
	#designerTextField("Width", 				"brikit${field}TextUnderlineSize")
	#designerSelectField("Style", 			"brikit${field}TextUnderlineStyle", false, ["", "solid", "dotted", "dashed", "double", "css underline"])
	#designerColorPicker("Color", 			"brikit${field}TextUnderlineColor")
#end

#macro (sizeOptionFields $field $suppressHeight $suppressWidth $extraClass)
	#if (!$suppressHeight)
		#designerTextField("Height", 	"brikit${field}Height",	false, false, $extraClass)
	#end
	#if (!$suppressWidth)
		#designerTextField("Width", 	"brikit${field}Width",	false, false, $extraClass)
	#end
#end

#macro (boxOptionFields $field $suppressMargin $suppressPadding)
	#if (!$suppressMargin)
		#designerTextField("Margin", 	"brikit${field}Margin")
	#end
	#if (!$suppressPadding)
		#designerTextField("Padding", 	"brikit${field}Padding")
	#end
#end

#macro (borderOptionFields $field $addRadius $addShadow)
	#designerTextField("Width", 			"brikit${field}BorderSize")
	#designerSelectField("Style", 			"brikit${field}BorderStyle", false, ["", "solid", "dotted", "dashed", "double"])
	#designerColorPicker("Color", 			"brikit${field}BorderColor")
	#if ($addRadius)
		#designerTextField("Corner Radius", 	"brikit${field}BorderRadius")
	#end
	#if ($addShadow)
		#boxShadowOptionFields($field, "Shadow Values")
	#end
#end

#macro (bottomBorderOptionFields $field)
	#designerTextField("Width", 				"brikit${field}BottomBorderSize")
	#designerSelectField("Style", 			"brikit${field}BottomBorderStyle", false, ["", "solid", "dotted", "dashed", "double"])
	#designerColorPicker("Color", 			"brikit${field}BottomBorderColor")
#end

#macro (leftBorderOptionFields $field)
	#designerTextField("Width", 				"brikit${field}LeftBorderSize")
	#designerSelectField("Style", 			"brikit${field}LeftBorderStyle", false, ["", "solid", "dotted", "dashed", "double"])
	#designerColorPicker("Color", 			"brikit${field}LeftBorderColor")
#end

#macro (topBorderOptionFields $field)
	#designerTextField("Width", 				"brikit${field}TopBorderSize")
	#designerSelectField("Style", 			"brikit${field}TopBorderStyle", false, ["", "solid", "dotted", "dashed", "double"])
	#designerColorPicker("Color", 			"brikit${field}TopBorderColor")
#end

#macro (boxShadowOptionFields $field $title)
	#designerTextField("#if ($title)$title#{else}Values#end",	"brikit${field}BoxShadowValues")
#end

#macro (backgroundImageOptionFields $field)
	#designerImageSelectField("Image", 			"brikit${field}BackgroundImage")
	#designerTextField("Image Position", 		"brikit${field}BackgroundImagePosition")
	#designerSelectField("Image Repeat", 		"brikit${field}BackgroundImageRepeat", false, ["", "repeat", "repeat-x", "repeat-y", "no-repeat"])
#end

## Add the background options to the designer
#macro (backgroundOptionFields $field $addGradient $addBackgroundSize)
	#designerColorPicker("Color", 				"brikit${field}BackgroundColor")
	#backgroundImageOptionFields($field)
	#if ($addBackgroundSize)
		#designerTextField("Image Size", 	"brikit${field}BackgroundSize")
	#end
	#if ($addGradient)
	<h5>Gradient</h5>
		#designerColorPicker("Top Color", 	 	"brikit${field}GradientTopColor")
		#designerColorPicker("Bottom Color", 	"brikit${field}GradientBottomColor")
		#designerTextField("Start", 		 	"brikit${field}GradientTop")
		#designerTextField("Stop", 			 	"brikit${field}GradientBottom")
	#end
#end

## Add dropdown options for float
#macro (floatOptionFields $field)
	#designerSelectField("Float", 		"brikit${field}Float", false, ["", "left", "right"])
#end

## Add dropdown options for lists
#macro (listOptionFields $field)
	#designerSelectField("Style Type", 	"brikit${field}ListStyleType", false, ["", "circle", "disc", "square", "none"])
	#designerCheckbox("Display Inline", 		"brikit${field}ListDisplayInline", false)
#end

#macro (absolutePositionOptionFields $field)
	#designerSelectField("Vertical Position",		"brikit${field}VerticalPosition", false, ["", "top", "bottom"])
	#designerTextField("Vertical Margin", 			"brikit${field}VerticalMargin")
	#designerSelectField("Horizontal Position",		"brikit${field}HorizontalPosition", false, ["", "left", "right"])
	#designerTextField("Horizontal Margin", 		"brikit${field}HorizontalMargin")
#end

#macro (fontOptionFields $field $hideFontSize $showLineHeight $showTextShadow)
	#designerColorPicker("Text Color", 				"brikit${field}Color")
	#designerFontFamilySelectField("Font Family", 	"brikit${field}FontFamily")
	#if (!$hideFontSize)
		#designerTextField("Font Size", 			"brikit${field}FontSize")
	#end
	#designerTextField("Font Weight", 				"brikit${field}FontWeight")
	#designerTextTransform("Text Transform", 		"brikit${field}TextTransform")
	#if ($showLineHeight)
		#designerTextField("Line Height", 			"brikit${field}LineHeight")
	#end
	#if ($showTextShadow)
		#designerTextField("Text Shadow Values", 	"brikit${field}TextShadowValues")
	#end
#end

#macro (containerOptionFields $field $includeHeight $includeOverflow)

	#designerFieldSetOpen("Size" "size-field-set-$field")
		#if ($includeHeight)
			#sizeOptionFields("${field}Backdrop", false, true)
		#end
		#boxOptionFields("${field}Backdrop")
		#if ($includeOverflow)
			#designerCheckbox("Hide Overflow", 	"brikit${field}HideOverflow")
		#end
	#designerFieldSetClose

	#designerFieldSetOpen("Background" "background-field-set-$field")
		#backgroundOptionFields("${field}Backdrop", true)
	#designerFieldSetClose

	#designerFieldSetOpen("Border" "border-field-set-$field")
		#borderOptionFields("${field}Backdrop")
	#designerFieldSetClose
<br />
	#designerFieldSetOpen("Content Container (Override Defaults)" "content-container-field-set-$field")

		<h5>Size</h5>
		#boxOptionFields("${field}")

		<h5>Background</h5>
		#backgroundOptionFields("${field}", true)

		<h5>Border</h5>
		#borderOptionFields("${field}", true, true)

	#designerFieldSetClose
#end

#macro (designerHeadingOptionFieldsFontSize $headerLevel)
	#designerTextField("H$headerLevel", 	"brikitHeader${headerLevel}FontSize")
#end

#macro (designerHeadingOptionFieldsLineHeight $headerLevel)
	#designerTextField("H$headerLevel", 	"brikitHeader${headerLevel}LineHeight")
#end

#macro (designerHeadingOptionFieldsMargin $headerLevel)
	#designerTextField("H$headerLevel", 		"brikitHeader${headerLevel}Margin")
#end