<div class="editor-row">
  <div class="section gf-form-group">
    <h5 class="section-heading">Layout</h5>
    <div class="gf-form-inline">
      <div class="gf-form">
            <label class="gf-form-label width-8">Columns
          <tip>Number of columns</tip>
        </label>
        <input type="number" class="gf-form-input" ng-model="ctrl.panel.polystat.columns" ng-blur="ctrl.validateColumnValue()" ng-disabled="ctrl.panel.polystat.columnAutoSize"
          placeholder="auto">
      </div>
      <gf-form-switch
        class="gf-form" label-class="width-6" label="Auto Size"
        checked="ctrl.panel.polystat.columnAutoSize"
        on-change="ctrl.validateColumnValue()">
      </gf-form-switch>
    </div>
    <div class="gf-form-inline">
      <div class="gf-form">
        <label class="gf-form-label width-8">Rows
          <tip>Number of rows</tip>
        </label>
        <input type="number" class="gf-form-input" ng-model="ctrl.panel.polystat.rows" ng-blur="ctrl.validateRowValue()" ng-disabled="ctrl.panel.polystat.rowAutoSize" placeholder="auto">
      </div>
      <gf-form-switch
        class="gf-form" label-class="width-6" label="Auto Size"
        checked="ctrl.panel.polystat.rowAutoSize" on-change="ctrl.validateRowValue()">
      </gf-form-switch>
    </div>
    <div class="gf-form-inline">
      <div class="gf-form">
        <label class="gf-form-label width-8">Display Limit
          <tip>Max number of metrics to display (0 for no limit, 100 default)</tip>
        </label>
        <input type="number" class="gf-form-input" ng-model="ctrl.panel.polystat.displayLimit" ng-blur="ctrl.validateDisplayLimit()" placeholder="unlimited">
      </div>
    </div>
  </div>

  <div class="section gf-form-group">
    <h5 class="section-heading">Sizing</h5>
    <div class="gf-form-inline">
      <div class="gf-form">
        <label class="gf-form-label width-11">Polygon Size
          <tip>Radius of Polygon</tip>
        </label>
        <input type="number" class="gf-form-input width-6" ng-model="ctrl.panel.polystat.radius" ng-blur="ctrl.validateRadiusValue()" ng-disabled="ctrl.panel.polystat.radiusAutoSize" placeholder="auto">
        <gf-form-switch class="gf-form" label-class="width-4" label="Auto"
          checked="ctrl.panel.polystat.radiusAutoSize" on-change="ctrl.validateRadiusValue()">
        </gf-form-switch>
      </div>
    </div>
    <div class="gf-form-inline">
      <div class="gf-form">
        <label class="gf-form-label width-11">Polygon Border Size
          <tip>Border size of Polygon</tip>
        </label>
        <input type="number" class="gf-form-input width-6" ng-model="ctrl.panel.polystat.polygonBorderSize" ng-blur="ctrl.validateBorderSizeValue()" placeholder="2">
      </div>
    </div>
    <div class="gf-form-inline">
      <div class="gf-form">
        <label class="gf-form-label width-11">Font Size
          <tip>Font Size</tip>
        </label>
        <div class="gf-form-select-wrapper width-6">
          <select class="gf-form-input" ng-model="ctrl.panel.polystat.fontSize" ng-options="f for f in ctrl.fontSizes" ng-disabled="ctrl.panel.polystat.fontAutoScale"
              ng-change="ctrl.refresh()">
          </select>
        </div>
      </div>
    </div>

    <div class="gf-form-inline">
      <div class="gf-form">
        <label class="gf-form-label width-11">Ellipse Chars
          <tip>Number of Characters until ellipse is displayed</tip>
        </label>
        <input type="number" class="gf-form-input width-6" ng-model="ctrl.panel.polystat.ellipseCharacters" ng-disabled="ctrl.panel.polystat.fontAutoScale" placeholder="18" ng-change="ctrl.refresh()">
        <gf-form-switch class="gf-form" label-class="width-4" label="Enabled"
          checked="ctrl.panel.polystat.ellipseEnabled" on-change="ctrl.refresh()" ng-disabled="ctrl.panel.polystat.fontAutoScale">
        </gf-form-switch>
      </div>
    </div>

    <div class="gf-form-inline">
      <div class="gf-form">
        <label class="gf-form-label width-11">Font Color
          <tip>Polygon Font Color. All CSS color attributes are valid</tip>
        </label>
        <input type="text" class="gf-form-input width-10" ng-model="ctrl.panel.polystat.fontColor" ng-disabled="ctrl.panel.polystat.fontAutoColor"
          placeholder="auto" ng-blur="ctrl.validateFontColorValue()"
        >
        <gf-form-switch class="gf-form" label-class="width-4" label="Auto" checked="ctrl.panel.polystat.fontAutoColor"
                        on-change="ctrl.validateFontColorValue()"
        >
        </gf-form-switch>
      </div>
    </div>

  <div class="gf-form-inline">
      <div class="gf-form">
        <gf-form-switch class="gf-form" label-class="width-11" label="Auto Scale Font" checked="ctrl.panel.polystat.fontAutoScale"
            on-change="ctrl.refresh()">
        </gf-form-switch>
      </div>
  </div>
  </div>
	<div class="section gf-form-group">
		<h5 class="section-heading">Sorting</h5>
			<div class="gf-form">
			<label class="gf-form-label width-10">Sort Direction
				<tip>Sort direction</tip>
			</label>
			<div class="gf-form-select-wrapper width-12">
				<select class="gf-form-input" ng-model="ctrl.panel.polystat.hexagonSortByDirection" ng-options="f.value as f.text for f  in ctrl.sortOptions"
          ng-change="ctrl.refresh()">
				</select>
			</div>
			</div>
			<div class="gf-form">
			<label class="gf-form-label width-10">Sort Field
				<tip>Field to sort by</tip>
			</label>
			<div class="gf-form-select-wrapper width-12">
				<select class="gf-form-input" ng-model="ctrl.panel.polystat.hexagonSortByField" ng-options="f.value as f.text for f  in ctrl.sortFields"
          ng-change="ctrl.refresh()">
				</select>
			</div>
			</div>
	</div>


  <div class="section gf-form-group">
  <h5 class="section-heading">Tooltips</h5>
  <div class="gf-form-inline">
    <gf-form-switch class="gf-form" label-class="width-13" label="Enable tooltips" checked="ctrl.panel.polystat.tooltipEnabled"
      on-change="ctrl.refresh()">
    </gf-form-switch>
  </div>
  <div class="gf-form-inline">
    <gf-form-switch class="gf-form" label-class="width-13" label="Show Timestamp" checked="ctrl.panel.polystat.tooltipTimestampEnabled"
      on-change="ctrl.refresh()">
    </gf-form-switch>
  </div>

  <div class="gf-form-inline">
    <div class="gf-form">
      <label class="gf-form-label width-13">Display</label>
      <div class="gf-form-select-wrapper width-12">
        <select class="gf-form-input" ng-model="ctrl.panel.polystat.tooltipDisplayMode" ng-options="f.value as f.text for f in ctrl.displayModes"
          ng-change="ctrl.refresh()"></select>
      </div>
    </div>
    <div class="gf-form" ng-if="ctrl.panel.polystat.tooltipDisplayMode === 'triggered'">
      <label class="gf-form-label width-13">Non Triggered State Text
        <tip>Text to be displayed by tooltip when there are no triggered thresholds and tooltip display mode is set to triggered</tip>
      </label>
      <input type="text" class="gf-form-input" ng-model="ctrl.panel.polystat.tooltipDisplayTextTriggeredEmpty" ng-blur="ctrl.refresh()" placeholder="OK">
    </div>
  </div>

  <div class="gf-form">
    <label class="gf-form-label width-13">Primary Sort Direction
      <tip>Primary sort direction</tip>
    </label>
    <div class="gf-form-select-wrapper width-12">
      <select class="gf-form-input" ng-model="ctrl.panel.polystat.tooltipPrimarySortDirection" ng-options="f.value as f.text for f  in ctrl.sortOptions"
        ng-change="ctrl.refresh()">
      </select>
    </div>
    <label class="gf-form-label width-13">Primary Sort Field
      <tip>Primary Field to sort by</tip>
    </label>
    <div class="gf-form-select-wrapper width-12">
      <select class="gf-form-input" ng-model="ctrl.panel.polystat.tooltipPrimarySortField" ng-options="f.value as f.text for f  in ctrl.sortFields"
        ng-change="ctrl.refresh()">
      </select>
    </div>
  </div>
  <div class="gf-form">
    <label class="gf-form-label width-13">Secondary Sort Direction
      <tip>Secondary sort direction</tip>
    </label>
    <div class="gf-form-select-wrapper width-12">
      <select class="gf-form-input" ng-model="ctrl.panel.polystat.tooltipSecondarySortDirection" ng-options="f.value as f.text for f  in ctrl.sortOptions"
        ng-change="ctrl.refresh()">
      </select>
    </div>
    <label class="gf-form-label width-13">Secondary Sort Field
      <tip>Secondary Field to sort by</tip>
    </label>
    <div class="gf-form-select-wrapper width-12">
      <select class="gf-form-input" ng-model="ctrl.panel.polystat.tooltipSecondarySortField" ng-options="f.value as f.text for f  in ctrl.sortFields"
        ng-change="ctrl.refresh()">
      </select>
    </div>
  </div>
  </div>
  <div class="section gf-form-group">
    <h5 class="section-heading">Global</h5>
    <div class="gf-form-inline">
        <div class="gf-form">
          <label class="gf-form-label width-11">Display</label>
          <div class="gf-form-select-wrapper width-13">
            <select class="gf-form-input" ng-model="ctrl.panel.polystat.globalDisplayMode" ng-options="f.value as f.text for f in ctrl.displayModes"
              ng-change="ctrl.refresh()"></select>
          </div>
        </div>
        <div class="gf-form" ng-if="ctrl.panel.polystat.globalDisplayMode === 'triggered'">
          <label class="gf-form-label width-13">Non Triggered State Text
            <tip>Text to be displayed in polygon when there are no triggered thresholds and global display mode is set to triggered</tip>
          </label>
          <input type="text" class="gf-form-input width-13" ng-model="ctrl.panel.polystat.globalDisplayTextTriggeredEmpty" ng-blur="ctrl.refresh()" placeholder="OK">
        </div>
      </div>

    <div class="gf-form-inline">
      <gf-form-switch class="gf-form" label-class="width-11"
        label="Show Value"
        checked="ctrl.panel.polystat.valueEnabled"
        tooltip="Show Value on Polygon and within Tooltip"
        on-change="ctrl.refresh()">
      </gf-form-switch>
    </div>
    <div class="gf-form">
      <label class="gf-form-label width-11">Shape</label>
      <div class="gf-form-select-wrapper width-13">
        <select class="gf-form-input" ng-model="ctrl.panel.polystat.shape" ng-options="f.value as f.text for f in ctrl.shapes"
          ng-change="ctrl.refresh()"></select>
      </div>
    </div>
    <div class="gf-form-inline">
        <div class="gf-form-inline">
        <gf-form-switch class="gf-form" label-class="width-11" label="Gradient Colors" checked="ctrl.panel.polystat.gradientEnabled"
          on-change="ctrl.refresh()">
        </gf-form-switch>
      </div>
      <div class="gf-form-inline">
        <div class="gf-form">
          <label class="gf-form-label width-11">Polygon Fill Color</label>
          <span class="gf-form-label">
            <spectrum-picker ng-model="ctrl.panel.polystat.polygonGlobalFillColor" ng-change="ctrl.refresh()"></spectrum-picker>
          </span>
        </div>
      </div>
      <div class="gf-form-inline">
        <div class="gf-form">
          <label class="gf-form-label width-11">Polygon Border Color</label>
          <span class="gf-form-label">
            <spectrum-picker ng-model="ctrl.panel.polystat.polygonBorderColor" ng-change="ctrl.refresh()"></spectrum-picker>
          </span>
        </div>
      </div>
    </div>


    <div class="gf-form-inline">
      <div class="gf-form">
        <label class="gf-form-label width-11">Unit</label>
        <div class="gf-form">
          <div class="gf-form-dropdown-typeahead width-13 max-width-20"
            ng-model="ctrl.panel.polystat.globalUnitFormat" dropdown-typeahead2="ctrl.unitFormats"
            dropdown-typeahead-on-select="ctrl.setGlobalUnitFormat($subItem)">
          </div>
        </div>
      </div>
      <div class="gf-form">
        <label class="gf-form-label width-5">Stat</label>
        <div class="gf-form-select-wrapper width-13">
          <select class="gf-form-input" ng-model="ctrl.panel.polystat.globalOperatorName" ng-options="f.value as f.text for f in ctrl.operatorOptions"
            ng-change="ctrl.refresh()"></select>
        </div>
      </div>
    </div>
    <div class="gf-form">
      <label class="gf-form-label width-11">Decimals</label>
      <input type="number" class="gf-form-input width-4" placeholder="auto" data-placement="right" ng-model="ctrl.panel.polystat.globalDecimals" ng-change="ctrl.refresh()" ng-model-onblur>
    </div>

    <div class="gf-form-inline">
      <label class="gf-form-label width-11">Default Clickthrough
        <tip>URL to use when none defined by overrides</tip>
      </label>
      <input type="string" class="gf-form-input width-30" placeholder="url" data-placement="right" ng-model="ctrl.panel.polystat.defaultClickThrough" ng-change="ctrl.render()" ng-model-onblur>
      <gf-form-switch class="gf-form" label="Sanitize" label-class="width-5" checked="ctrl.panel.polystat.defaultClickThroughSanitize" on-change="ctrl.render()">
      </gf-form-switch>
      <gf-form-switch class="gf-form" label-class="width-9" label="Open in new tab" checked="ctrl.panel.polystat.defaultClickThroughNewTab" on-change="ctrl.render()">
      </gf-form-switch>
    </div>
  </div>

  <div class="section gf-form-group">
    <h5 class="section-heading">Global Aliasing</h5>
    <div class="gf-form">
      <label class="gf-form-label width-8">Regex Pattern
        <tip>The values in the specified column are filtered and displayed according to this regular expression. Ex: String: Url|broadcom.com|mirror|location-1 regex: /Url\|(.*?)\|/ Output: broadcom.com</tip>
      </label>
      <input type="text" class="gf-form-input" ng-model="ctrl.panel.polystat.regexPattern" ng-blur="ctrl.refresh()" placeholder="regex">
    </div>
  </div>

  <poly-thresholds
    thresholds="ctrl.panel.polystat.globalThresholds"
    colors="ctrl.panel.colors"
    callback="ctrl.onThresholdsChanged()"/>

</div>
