{% set percentFormat = table.settings.percentFormat | default('#.##%') %}
{% set currencyFormat = table.settings.currencyFormat | default('$#,###.##') %}
{% set numberFormat = table.settings.numberFormat | default('#,###.##') %}
{% set regexp1 = '/[0-9]{1}/' %}
{% set replace1 = '#' %}
{% set regexp2 = '/\\s+/' %}
{% set replace2 = '' %}
<div id="previewDiagramDialog" class="supsystic-plugin" style="display: none; z-index:10" title="{{ environment.translate('Diagram') }}">
	<div class="tab-switch" data-tabs>
		<a class="active" href="#type">{{ environment.translate('Type') }}</a>
		<a href="#settings">{{ environment.translate('Settings') }}</a>
	</div>
	<div class="tabs">
		<div id="typeTab" class="tab active" data-tab="#type">
			<select name="" id="chartType" hidden>
				<option value="AreaChart">{{ environment.translate('Area Chart') }}</option>
				<option value="LineChart">{{ environment.translate('Line Chart') }}</option>
				<option value="PieChart">{{ environment.translate('Pie Chart') }}</option>
				<option value="BarChart">{{ environment.translate('Bar Chart') }}</option>
				<option value="ColumnChart">{{ environment.translate('Column Chart') }}</option>
				<option value="BubbleChart">{{ environment.translate('Bubble Chart') }}</option>
				<option value="BarChart3d">{{ environment.translate('3d Bar Chart') }}</option>
				<option value="DonutChart3d">{{ environment.translate('3d Donut Chart') }}</option>
				<option value="PieChart3d">{{ environment.translate('3d Pie Chart') }}</option>
				<option value="PyramidChart3d">{{ environment.translate('3d Pyramid') }}</option>
			</select>
			<div class="selectChartType">
				<div class="chart">
					<label>{{ environment.translate('Area Chart') }}</label>
					<div class="chart-container" id="AreaChart" data-chart-type="google">
						<img class="dtsImgForChartPreview" src="{{ moduleLocation }}/assets/img/charts-preview/area-chart.jpg"/>
					</div>
				</div>
				<div class="chart">
					<label>{{ environment.translate('Line Chart') }}</label>
					<div class="chart-container" id="LineChart" data-chart-type="google">
						<img class="dtsImgForChartPreview" src="{{ moduleLocation }}/assets/img/charts-preview/line-chart.jpg"/>
					</div>
				</div>
				<div class="chart">
					<label>{{ environment.translate('Pie Chart') }}</label>
					<div class="chart-container" id="PieChart" data-chart-type="google">
						<img class="dtsImgForChartPreview" src="{{ moduleLocation }}/assets/img/charts-preview/pie-chart.jpg"/>
					</div>
				</div>
				<div class="chart">
					<label>{{ environment.translate('Bar Chart') }}</label>
					<div class="chart-container" id="BarChart" data-chart-type="google">
						<img class="dtsImgForChartPreview" src="{{ moduleLocation }}/assets/img/charts-preview/bar-chart.jpg"/>
					</div>
				</div>
				<div class="chart">
					<label>{{ environment.translate('Column Chart') }}</label>
					<div class="chart-container" id="ColumnChart" data-chart-type="google">
						<img class="dtsImgForChartPreview" src="{{ moduleLocation }}/assets/img/charts-preview/column-chart.jpg"/>
					</div>
				</div>
				<div class="chart">
					<label>{{ environment.translate('Bubble Chart') }}</label>
					<div class="chart-container" id="BubbleChart" data-chart-type="google">
						<img class="dtsImgForChartPreview" src="{{ moduleLocation }}/assets/img/charts-preview/bubble-chart.jpg"/>
					</div>
				</div>
				<div class="chart">
					<label>{{ environment.translate('3d Bar Chart') }}</label>
					<div class="chart-container" id="BarChart3d" data-chart-type="zing">
						<img class="dtsImgForChartPreview" src="{{ moduleLocation }}/assets/img/charts-preview/3d-bar-chart.jpg"/>
					</div>
				</div>
				<div class="chart">
					<label>{{ environment.translate('3d Donut Chart') }}</label>
					<div class="chart-container" id="DonutChart3d" data-chart-type="zing">
						<img class="dtsImgForChartPreview" src="{{ moduleLocation }}/assets/img/charts-preview/3d-donut-chart.jpg"/>
					</div>
				</div>
				<div class="chart">
					<label>{{ environment.translate('3d Pie Chart') }}</label>
					<div class="chart-container" id="PieChart3d" data-chart-type="zing">
						<img class="dtsImgForChartPreview" src="{{ moduleLocation }}/assets/img/charts-preview/3d-pie-chart.jpg"/>
					</div>
				</div>
				<div class="chart">
					<label>{{ environment.translate('3d Pyramid') }}</label>
					<div class="chart-container" id="PyramidChart3d" data-chart-type="zing">
						<img class="dtsImgForChartPreview" src="{{ moduleLocation }}/assets/img/charts-preview/3d-pyramid-chart.jpg"/>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
			<label for="switchRowsColumns">
				<input type="checkbox" id="switchRowsColumns">
				<span>{{ environment.translate('Switch rows / columns') }}</span>
			</label>
			<label for="useFirstRow">
				<input type="checkbox" id="useFirstRow">
				<span>{{ environment.translate('Use first row as headers') }}</span>
			</label>
			<label for="useFirstColumn">
				<input type="checkbox" id="useFirstColumn">
				<span>{{ environment.translate('Use first column as labels') }}</span>
			</label>
		</div>
		<div id="settingsTab" class="tab" data-tab="#settings">
            <div class="optionContainer">
                <label for="width">
                    {{ environment.translate('Width') }}
                    <i class="fa fa-question supsystic-tooltip" data-toggle="tooltip" data-placement="top" data-html="" data-original-title="" title="{{ environment.translate('Set the value in px or %, for example, 400 (equals to 400px) or 90%. Leave this field empty to use default width value.') }}"></i>
                </label>
                <input type="text" name="chart_width" value="" />
            </div>
            <div class="optionContainer">
                <label for="heidht">
                    {{ environment.translate('Height') }}
                    <i class="fa fa-question supsystic-tooltip" data-toggle="tooltip" data-placement="top" data-html="" data-original-title="" title="{{ environment.translate('Set the value in px or %, for example, 200 (equals to 200px) or 80%. Leave this field empty to use default height value.') }}"></i>
                </label>
                <input type="text" name="chart_height" value="" />
            </div>
            <div class="optionContainer">
                <label for="width">
                    {{ environment.translate('Offset Top') }}
                    <i class="fa fa-question supsystic-tooltip" data-toggle="tooltip" data-placement="top" data-html="" data-original-title="" title="{{ environment.translate('Offset for axes\' area by top.') }}{{ environment.translate('Set the numeric value from 0 to 100, for example 10 (equals to 10%). Leave this field empty to use default offset value.') }}"></i>
                </label>
                <input type="text" name="chartArea[top]" value="" />
            </div>
            <div class="optionContainer">
                <label for="width">
                    {{ environment.translate('Offset Left') }}
                    <i class="fa fa-question supsystic-tooltip" data-toggle="tooltip" data-placement="top" data-html="" data-original-title="" title="{{ environment.translate('Offset for axes\' area by left.') }}{{ environment.translate('Set the numeric value from 0 to 100, for example 10 (equals to 10%). Leave this field empty to use default offset value.') }}"></i>
                </label>
                <input type="text" name="chartArea[left]" value="" />
            </div>
            <div class="optionContainer">
                <label for="heidht">
                    {{ environment.translate('Offset Right') }}
                    <i class="fa fa-question supsystic-tooltip" data-toggle="tooltip" data-placement="top" data-html="" data-original-title="" title="{{ environment.translate('Offset for axes\' area by right.') }}{{ environment.translate('Set the numeric value from 0 to 100, for example 10 (equals to 10%). Leave this field empty to use default offset value.') }}"></i>
                </label>
                <input type="text" name="chartArea[right]" value="" />
            </div>
            <div class="optionContainer">
                <label for="heidht">
                    {{ environment.translate('Offset Bottom') }}
                    <i class="fa fa-question supsystic-tooltip" data-toggle="tooltip" data-placement="top" data-html="" data-original-title="" title="{{ environment.translate('Offset for axes\' area by bottom.') }}{{ environment.translate('Set the numeric value from 0 to 100, for example 10 (equals to 10%). Leave this field empty to use default offset value.') }}"></i>
                </label>
                <input type="text" name="chartArea[bottom]" value="" />
            </div>
            <div class="optionContainer">
                <label for="range">
                    {{ environment.translate('Remove Data') }}
                    <i class="fa fa-question supsystic-tooltip" data-toggle="tooltip" data-placement="top" data-html="" data-original-title=""
                       title="{{ environment.translate('
                       You can set the rows and cols from the selected range, which is need to be removed from diagram.<br /><br />
                       For example: 1r,2c<br /><br />
                       In this case the first row and the second column will be removed from diagram.<br /><br />
                       Leave this field blank to use all selected rows and columns.') }}"></i>
                </label>
                <input type="text" name="range" value="" />
            </div>
            <div class="optionContainer">
                <label for="title">{{ environment.translate('Diagram Title') }}</label>
                <input type="text" name="title" value="" />
            </div>
            <div class="optionContainer">
                <label for="legendPosition">{{ environment.translate('Legend Position') }}</label>
                <select name="legend[position]" id="legendPosition" data-def="top">
                    <option value="none">{{ environment.translate('No legend') }}</option>
                    <option selected value="top">{{ environment.translate('Above the chart') }}</option>
                    <option value="bottom">{{ environment.translate('Below the chart') }}</option>
                    <option value="left">{{ environment.translate('Left of the chart') }}</option>
                    <option value="right">{{ environment.translate('Right of the chart') }}</option>
                    <option value="labeled" class="PieChart" style="display: none;">{{ environment.translate('Lines between slices and values') }}</option>
                    <option value="in" class="LineChart" style="display: none;">{{ environment.translate('Inside by the top left corner') }}</option>
                </select>
            </div>
            <div class="optionContainer hideForBubbleChart">
                <label for="legendToggling">
                    {{ environment.translate('Legend Toggling') }}
                    <i class="fa fa-question supsystic-tooltip" data-toggle="tooltip" data-placement="top" data-html="" data-original-title=""
                       title="{{ environment.translate('
                        You can set what happens when the user clicks a legend item/marker:<br />
                        - Hide: hides the selected node,<br />
                        - Remove: repaints the chart without the selected series,<br />
                        - Disabled: disables legend toggling') }}"></i>
                </label>
                <select name="legend[toggling]" id="legendToggling" data-def="disabled">
                    <option value="hide" class="BarChart3d DonutChart3d PieChart3d PyramidChart3d">{{ environment.translate('Hide') }}</option>
                    <option value="remove">{{ environment.translate('Remove') }}</option>
                    <option selected value="disabled">{{ environment.translate('Disabled') }}</option>
                </select>
            </div>
            <div class="optionContainer hideForPieChart">
                <label for="hAxis[title]">{{ environment.translate('Axis X Title') }}</label>
                <input type="text" name="hAxis[title]" value="" />
            </div>
            <div class="optionContainer hideForPieChart">
                <label for="hAxis[format]">{{ environment.translate('Axis X Format') }}</label>
                <select name="hAxis[format]" data-def="none">
                    <option value="none">{{ environment.translate('Plain') }}</option>
                    <option value="{{ percentFormat | preg_replace(regexp1, replace1) | preg_replace(regexp2, replace2) }}" data-type="percent">{{ environment.translate('Percent') }}</option>
                    <option value="{{ currencyFormat | preg_replace(regexp1, replace1) | preg_replace(regexp2, replace2) }}" data-type="currency">{{ environment.translate('Currency') }}</option>
                    <option value="{{ numberFormat | preg_replace(regexp1, replace1) | preg_replace(regexp2, replace2) }}" data-type="number">{{ environment.translate('Number') }}</option>
                    <option value="short">{{ environment.translate('Short Number') }}</option>
                    <option class="AreaChart LineChart PieChart BarChart ColumnChart BubbleChart" value="long">{{ environment.translate('Long Number') }}</option>
                    <option value="scientific">{{ environment.translate('Scientific') }}</option>
                </select>
            </div>
            <div class="optionContainer hideForPieChart hideForBubbleChart hideForBarChart3d hideForDonutChart3d hideForPieChart3d hideForPyramidChart3d">
                <label for="hAxis[showTextEvery]">
                    {{ environment.translate('Axis Х Mode') }}
                    <i class="fa fa-question supsystic-tooltip" data-toggle="tooltip" data-placement="top" data-html="" data-original-title="" title="{{ environment.translate('How many horizontal axis labels to show, where 1 means show every label, 2 means show every other label, and so on. Left the field empty to try to show as many labels as possible without overlapping.') }}"></i>
                </label>
                <input type="text" name="hAxis[showTextEvery]" value="" />
            </div>
            <div class="optionContainer hideForPieChart">
                <label for="vAxis[title]">{{ environment.translate('Axis Y Title') }}</label>
                <input type="text" name="vAxis[title]" value="" />
            </div>
            <div class="optionContainer hideForPieChart">
                <label for="vAxis[format]">{{ environment.translate('Axis Y Format') }}</label>
                <select name="vAxis[format]" data-def="none">
                    <option value="none">{{ environment.translate('Plain') }}</option>
                    <option value="{{ percentFormat | preg_replace(regexp1, replace1) | preg_replace(regexp2, replace2) }}" data-type="percent">{{ environment.translate('Percent') }}</option>
                    <option value="{{ currencyFormat | preg_replace(regexp1, replace1) | preg_replace(regexp2, replace2) }}" data-type="currency">{{ environment.translate('Currency') }}</option>
                    <option value="{{ numberFormat | preg_replace(regexp1, replace1) | preg_replace(regexp2, replace2) }}" data-type="number">{{ environment.translate('Number') }}</option>
                    <option value="short">{{ environment.translate('Short Number') }}</option>
                    <option class="AreaChart LineChart PieChart BarChart ColumnChart BubbleChart" value="long">{{ environment.translate('Long Number') }}</option>
                    <option value="scientific">{{ environment.translate('Scientific') }}</option>
                </select>
            </div>
            <div class="optionContainer LineChart AreaChart">
                <label for="pointSize">{{ environment.translate('Point Size') }}</label>
                <input type="text" name="pointSize" value="5" data-def="5" />
            </div>
            <div class="optionContainer LineChart AreaChart">
                <label for="pointShape[type]">
                    {{ environment.translate('Point Shape') }}
                </label>
                <select name="pointShape[type]" data-def="circle">
                    <option value="circle">{{ environment.translate('Circle') }}</option>
                    <option value="triangle">{{ environment.translate('Triangle') }}</option>
                    <option value="square">{{ environment.translate('Square') }}</option>
                    <option value="diamond">{{ environment.translate('Diamond') }}</option>
                    <option value="star">{{ environment.translate('Star') }}</option>
                    <option value="polygon">{{ environment.translate('Polygon') }}</option>
                </select>
            </div>
            <div class="optionContainer" style="display: none;">
                <label for="pointShape[sides]">
                    {{ environment.translate('Point Sides') }}
                    <i class="fa fa-question supsystic-tooltip" data-toggle="tooltip" data-placement="top" data-html="" data-original-title="" title="{{ environment.translate('Number of sides which will be have points of chart in star or polygon shape. Please, use values greater than 2.') }}"></i>
                </label>
                <input type="text" name="pointShape[sides]" value="5" data-def="5" placeholder="5" />
            </div>
            <div class="optionContainer" style="display: none;">
                <label for="pointShape[dent]">
                    {{ environment.translate('Point Dent') }}
                    <i class="fa fa-question supsystic-tooltip" data-toggle="tooltip" data-placement="top" data-html="" data-original-title="" title="{{ environment.translate('Set how concave the star will be if you have chosen the star shape of chart points. Please, use values from 0.1 to 1.') }}"></i>
                </label>
                <input type="text" name="pointShape[dent]" value="0.5" data-def="0.5" placeholder="0.5" />
            </div>
            <div class="PieChart" style="display: none;">
                <div class="optionContainer">
                    <label for="is3D">{{ environment.translate('3D Diagram') }}</label>
                    <select name="is3D" data-def="false">
                        <option value="false">{{ environment.translate('No') }}</option>
                        <option value="true">{{ environment.translate('Yes') }}</option>
                    </select>
                </div>
                <div class="optionContainer">
                    <label for="pieSliceText">{{ environment.translate('Text on Slice') }}</label>
                    <select name="pieSliceText" data-def="percentage">
                        <option value="percentage">{{ environment.translate('Percentage of slice size out of total') }}</option>
                        <option value="value">{{ environment.translate('Quantitative value of slice') }}</option>
                        <option value="label">{{ environment.translate('Name of slice') }}</option>
                        <option value="none">{{ environment.translate('Not displaying') }}</option>
                    </select>
                </div>
            </div>
			<div class="BarChart3d DonutChart3d PieChart3d PyramidChart3d" style="display: none;">
				<div class="optionContainer">
					<label for="aspect3dX">{{ environment.translate('3d angle X') }}</label>
					<input type="text" name="aspect3d[xAngle]" value="-20" id="aspect3dX"/>
				</div>
				<div class="optionContainer">
					<label for="aspect3dY">{{ environment.translate('3d angle Y') }}</label>
					<input type="text" name="aspect3d[yAngle]" value="0" id="aspect3dY"/>
				</div>
				<div class="optionContainer">
					<label for="aspect3dZ">{{ environment.translate('3d angle Z') }}</label>
					<input type="text" name="aspect3d[zAngle]" value="0" id="aspect3dZ"/>
				</div>
			</div>
            <div class="optionContainer BarChart ColumnChart" style="display: none;">
                <label for="isStacked">
                    <span>{{ environment.translate('Stacked Columns') }}</span>
                    <i class="fa fa-question supsystic-tooltip" title="{{ environment.translate('A stacked column chart is a column chart that places related values atop one another.<br /><br />
                        "Relative Mode" formats each value as a fraction of 1.<br /><br />
                        "Percent Mode" formats each value as a percentage of 100%. ') }}" data-toggle="tooltip" data-placement="top" data-html="" data-original-title=""></i>
                </label>
                <select name="isStacked" id="isStacked" data-def="false">
                    <option value="false">{{ environment.translate('Disable') }}</option>
                    <option value="absolute">{{ environment.translate('Enable') }}</option>
                    <option value="percent">{{ environment.translate('Percent Mode') }}</option>
                    <option value="relative">{{ environment.translate('Relative Mode') }}</option>
                </select>
            </div>
            <div class="optionContainer">
                <label for="en_custom_colors">{{ environment.translate('Use Custom Colors') }}</label>
                <input type="checkbox" id="enCustomColors" name="en_custom_colors" />
            </div>
            <div class="optionContainer chartColors" style="display: none;">
                <div id="chartColorContainerExample" class="colorPickerShell" style="display: none;">
                    <div class="chartColorArea colorPickerArea"></div>
                    <input type="text" name="colors[]" />
                </div>
            </div>
            <div style="clear: both;"></div>
		</div>
	</div>
	<div class="preview-diagram">
		<div id="diagram">
			<span>{{ environment.translate('Select chart type') }}</span>
		</div>
	</div>
	<div class="clearfix"></div>
</div>