<!-- TPL General  -->
<script id="tpl-general" type="text/template">
    <hgroup>
      <h2 class="gheader h4" id="overall-heading">{{head}}</h2>
      <p>{{#from}}{{from}}{{/from}}{{#to}} – {{to}}{{/to}}</p>
    </hgroup>
	<ul role="list" class="row"></ul>
</script>

<!-- TPL General Items -->
<script id="tpl-general-items" type="text/template">
  <li class="col-sm-6 col-md-2 {{#className}}{{className}}{{/className}}{{^className}}gray{{/className}}" aria-live="polite" aria-atomic="true">
    <div>
      <span><i class="fa fa-bar-chart"></i> {{#label}}{{label}}{{/label}}</span>
      <span id="{{id}}">{{value}}</span>
    </div>
  </li>
</script>

<!-- TPL Panel Table -->
<script id="tpl-table-row" type="text/template">
	{{#rows}}
		<tr class="{{#className}}{{className}} {{/className}}{{#hasSubItems}}{{#items}}expandable{{/items}}{{/hasSubItems}} level-{{level}}" data-panel="{{panel}}" {{#key}}data-key="{{key}}" {{/key}} {{#nodeKey}}data-node-key="{{nodeKey}}" {{/nodeKey}} data-level="{{level}}">
			{{#hasSubItems}}
			<td class="row-expandable text-center {{#items}}clickable{{/items}}">
				{{#items}}<i class="fa {{#expanded}}fa-caret-down{{/expanded}}{{^expanded}}fa fa-caret-right{{/expanded}}"></i>{{/items}}
				{{^items}}<i></i>{{/items}}
			</td>
			{{/hasSubItems}}
			{{^hasSubItems}}
			{{#showPlaceholder}}
			<td class="row-expandable text-center">
				<i></i>
			</td>
			{{/showPlaceholder}}
			{{/hasSubItems}}
			<td class="row-idx text-right">
				{{#idx}}{{idx}}{{/idx}}
			</td>
			{{#cells}}
				<td class="{{className}}" {{#colspan}}colspan="{{colspan}}"{{/colspan}}>
					<span class="value">{{{value}}}</span>{{#percent}}<span class="percent"> ({{percent}})</span>{{/percent}}
				</td>
			{{/cells}}
		</tr>
	{{/rows}}
</script>

<!-- TPL Panel Table Meta -->
<script id="tpl-table-row-meta" type="text/template">
	{{#row}}
		{{#hasSubItems}}
		<th class=""></th>
		{{/hasSubItems}}
		<th class="meta-label">{{key}}.</th>
		{{#cells}}
			<th class="{{className}}" {{#colspan}}colspan="{{colspan}}"{{/colspan}}>
				{{#value}}
					<span>{{value}} {{#percent}}<span class="text-muted">({{percent}}%)</span>{{/percent}}</span>
				{{/value}}
				{{^value}}
					<span class="text-muted">&mdash;</span>
				{{/value}}
			</th>
		{{/cells}}
	{{/row}}
</script>

<!-- TPL Panel Table Totals -->
<script id="tpl-table-row-totals" type="text/template">
	{{#row}}
		{{#hasSubItems}}
		<td class=""></td>
		{{/hasSubItems}}
		<td class="meta-label">Tot.</td>
		{{#cells}}
			<td class="{{className}}" {{#colspan}}colspan="{{colspan}}"{{/colspan}}>
				{{#label}}
					<span>{{label}}</span>&nbsp;
				{{/label}}
				<span>{{value}}</span>
			</td>
		{{/cells}}
	{{/row}}
</script>

<!-- TPL Table thead -->
<script id="tpl-table-thead" type="text/template">
	{{#hasSubItems}}
		<th></th>
	{{/hasSubItems}}
		<th>#</th>
	{{#items}}
		<th class="{{dataType}} {{#key}}sortable{{/key}}" data-key="{{key}}" {{#sort}}data-order="{{#asc}}asc{{/asc}}{{^asc}}desc{{/asc}}"{{/sort}}>
			{{label}} <i class="fa fa-{{^sort}}sort{{/sort}}{{#sort}}{{#asc}}caret-up{{/asc}}{{^asc}}caret-down{{/asc}}{{/sort}}"></i>
		</th>
	{{/items}}
</script>

<!-- TPL Panel Options DropDown -->
<script id="tpl-panel-opts" type="text/template">
	<li class="dropdown-header">{{ labels.chart_opts }}</li>
	<li><a href="javascript:void(0);" data-panel="{{id}}" data-chart="{{showChart}}"><i class="fa fa-{{#showChart}}check-{{/showChart}}square-o"></i> {{labels.chart}}</a></li>

	{{#plot.length}}
	<li class="dropdown-header">{{ labels.type }}</li>
	<li><a href="javascript:void(0);" data-panel="{{id}}" data-chart-type="area-spline"><i class="fa fa-circle{{^area-spline}}-o{{/area-spline}}"></i> {{labels.area_spline}}</a></li>
	<li><a href="javascript:void(0);" data-panel="{{id}}" data-chart-type="bar"><i class="fa fa-circle{{^bar}}-o{{/bar}}"></i> {{labels.bar}}</a></li>
	{{#hasMap}}
	<li><a href="javascript:void(0);" data-panel="{{id}}" data-chart-type="wmap"><i class="fa fa-circle{{^wmap}}-o{{/wmap}}"></i> {{labels.wmap}}</a></li>
	<li><a href="javascript:void(0);" data-panel="{{id}}" data-chart-type="gmap"><i class="fa fa-circle{{^gmap}}-o{{/gmap}}"></i> {{labels.gmap}}</a></li>
	{{/hasMap}}
	<li class="dropdown-header">{{labels.plot_metric}}</li>
	{{#plot}}
	<li><a href="javascript:void(0);" data-panel="{{id}}" data-plot="{{className}}" class="panel-plot-{{className}}"><i class="fa fa-circle{{^selected}}-o{{/selected}}"></i> {{label}}</a></li>
	{{/plot}}
	{{/plot.length}}

	<li class="dropdown-header">{{labels.table_columns}}</li>
	{{#items}}
	<li><a href="javascript:void(0);" data-panel="{{id}}" data-metric="{{key}}"><i class="fa fa-{{^hide}}check-{{/hide}}square-o"></i> {{label}}</a></li>
	{{/items}}
</script>

<!-- TPL Table colgroup -->
<script id="tpl-table-colgroup" type="text/template">
	{{#hasSubItems}}
	<col style="width: 2%;"> <!-- right-caret -->
	{{/hasSubItems}}
	<col style="width: 3%;"> <!-- row # -->
	{{#items}}
		<col style="width:{{colWidth}}">
	{{/items}}
</script>

<!-- TPL Panel -->
<script id="tpl-panel" type="text/template">
	<div class="row">
		<div class="col-md-12">
			<header>
				<hgroup>
				  <h2 id="{{id}}" class="gheader">{{head}}</h2>
				  <small class="text-muted">{{desc}}</small>
				</hgroup>
				<div>
					<div class="dropdown">
						<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-panel="{{id}}" aria-label="{{labels.panel_opts}}, {{head}}">
							<i class="fa fa-gear" aria-hidden="true"></i> {{labels.panel_opts}} <span class="fa fa-caret-down" aria-hidden="true"></span>
						</button>
						<ul class="dropdown-menu dropdown-menu-right panel-opts-{{id}}">
						</ul>
					</div>
				</div>
			</header>
		</div>
	</div>
	{{#chart}}
	<div class="row">
		<div class="col-md-12">
			<div id="chart-{{id}}" class="chart-wrap"></div>
		</div>
	</div>
	{{/chart}}
	{{#table}}
	<div class="row clearfix table-wrapper {{#autoHideTables}}hidden-xs{{/autoHideTables}}">
		<div class="col-md-12">
			<div class="table-responsive">
				<table data-panel="{{id}}" class="table table-borderless table-hover table-{{id}}">
					<colgroup>
					</colgroup>
					<thead >
						<tr class="thead-cols"></tr>
						<tr class="thead-min"></tr>
						<tr class="thead-max"></tr>
						<tr class="thead-avg"></tr>
					</thead>
					<tbody class="tbody-data">
					</tbody>
					<tfoot class="tfoot-totals">
						<tr class="tfoot-totals">
						</tr>
					</tfoot>
				</table>
			</div>

			<ul class="pagination pagination-sm pull-left">
				<li class="disabled">
					<a class="panel-first" href="javascript:void(0);" aria-label="{{labels.first}}" data-panel="{{id}}" title="{{labels.first}}">
						<i class="fa fa-angle-double-left"></i>
					</a>
				</li>
				<li class="disabled">
					<a class="panel-prev" href="javascript:void(0);" aria-label="{{labels.previous}}" data-panel="{{id}}" title="{{labels.previous}}">
						<i class="fa fa-angle-left"></i>
					</a>
				</li>
				<li>
					<a class="panel-next" href="javascript:void(0);" aria-label="{{labels.next}}" data-panel="{{id}}" title="{{labels.next}}">
						<i class="fa fa-angle-right"></i>
					</a>
				</li>
				<li>
					<a class="panel-last" href="javascript:void(0);" aria-label="{{labels.last}}" data-panel="{{id}}" title="{{labels.last}}">
						<i class="fa fa-angle-double-right"></i>
					</a>
				</li>
			</ul>
		</div>
	</div>
	{{/table}}
</script>

<!-- TPL Nav Bar wrapper -->
<script id="tpl-nav-wrap" type="text/template">
	<button type="button"class="nav-bars" aria-label="{{ button_menu }}"><i class="fa fa-bars" aria-hidden="true"></i></button>
	<button type="button"class="nav-gears" aria-label="{{ button_settings }}"><i class="fa fa-cog" aria-hidden="true"></i></button>
	<i class="nav-ws-status fa fa-stop" aria-live="polite" aria-label="{{ websocket_disconnected }}" title="{{ websocket_disconnected }}"></i>
	<div class="nav-list"></div>
	<div class="powered hidden-xs hidden-sm">by <a href="https://goaccess.io/">GoAccess</a> <span>v{{version}}</span> and <a href="https://gwsocket.io/">GWSocket</a></div>
</script>

<!-- TPL Nav Bar items -->
<script id="tpl-nav-menu" type="text/template">
	<h3>{{labels.panels}}</h3>
	<ul>
		<!-- Overall stats - not draggable -->
		<li {{#overall_current}}class="active"{{/overall_current}}>
			<span class="drag-handle" style="visibility: hidden;">
				<i class="fa fa-bars"></i>
			</span>
			<a href="#"><i class="fa fa-bar-chart"></i> {{labels.thead}}</a>
			<span title="{{labels.toggle_panel}}" class="toggle-panel {{#overall_hidden}}active{{/overall_hidden}}" data-panel="general"><i class="fa fa-circle-o"></i></span>
		</li>

		<!-- Panel items - draggable -->
		{{#nav}}
		<li {{#current}}class="active"{{/current}}>
			<span class="drag-handle" title="{{labels.drag_to_reorder}}">
				<i class="fa fa-bars"></i>
			</span>
			<a href="#{{key}}"><i class="fa fa-{{icon}}"></i> {{head}}</a>
			<span title="{{labels.toggle_panel}}" class="toggle-panel {{#hidden}}active{{/hidden}}" data-panel="{{key}}"><i class="fa fa-circle-o"></i></span>
		</li>
		{{/nav}}
	</ul>
</script>

<!-- TPL Nav Bar options -->
<script id="tpl-nav-opts" type="text/template">
	<h3><i class="fa fa-hashtag"></i> {{labels.theme}}</h3>
	<ul>
		<li {{#darkGray}}class="active"{{/darkGray}}>
			<a href="javascript:void(0);" class="theme-dark-gray"><i class="fa fa-circle{{^darkGray}}-o{{/darkGray}}"></i> {{labels.dark_gray}}</a>
		</li>
		<li {{#bright}}class="active"{{/bright}}>
			<a href="javascript:void(0);" class="theme-bright"><i class="fa fa-circle{{^bright}}-o{{/bright}}"></i> {{labels.bright}}</a>
		</li>
		<li {{#darkBlue}}class="active"{{/darkBlue}}>
			<a href="javascript:void(0);" class="theme-dark-blue"><i class="fa fa-circle{{^darkBlue}}-o{{/darkBlue}}"></i> {{labels.dark_blue}}</a>
		</li>
		<li {{#darkPurple}}class="active"{{/darkPurple}}>
			<a href="javascript:void(0);" class="theme-dark-purple"><i class="fa fa-circle{{^darkPurple}}-o{{/darkPurple}}"></i> {{labels.dark_purple}}</a>
		</li>
	</ul>
	<h3><i class="fa fa-list-alt"></i> {{labels.panels}}</h3>
	<ul class="perpage-wrap">
		<li class="dropdown-header"><i class="fa fa-list"></i> {{labels.items_per_page}}</li>
		<li {{#perPage3}}class="active"{{/perPage3}}>
			<a href="javascript:void(0);" data-perpage="3"><i class="fa fa-circle{{^perPage3}}-o{{/perPage3}}"></i> 3</a>
		</li>
		<li {{#perPage5}}class="active"{{/perPage5}}>
			<a href="javascript:void(0);" data-perpage="5"><i class="fa fa-circle{{^perPage5}}-o{{/perPage5}}"></i> 5</a>
		</li>
		<li {{#perPage7}}class="active"{{/perPage7}}>
			<a href="javascript:void(0);" data-perpage="7"><i class="fa fa-circle{{^perPage7}}-o{{/perPage7}}"></i> 7</a>
		</li>
		<li {{#perPage10}}class="active"{{/perPage10}}>
			<a href="javascript:void(0);" data-perpage="10"><i class="fa fa-circle{{^perPage10}}-o{{/perPage10}}"></i> 10</a>
		</li>
		<li {{#perPage15}}class="active"{{/perPage15}}>
			<a href="javascript:void(0);" data-perpage="15"><i class="fa fa-circle{{^perPage15}}-o{{/perPage15}}"></i> 15</a>
		</li>
		<li {{#perPage20}}class="active"{{/perPage20}}>
			<a href="javascript:void(0);" data-perpage="20"><i class="fa fa-circle{{^perPage20}}-o{{/perPage20}}"></i> 20</a>
		</li>
		<li {{#perPage24}}class="active"{{/perPage24}}>
			<a href="javascript:void(0);" data-perpage="24"><i class="fa fa-circle{{^perPage24}}-o{{/perPage24}}"></i> 24</a>
		</li>
		<li class="dropdown-header"><i class="fa fa-table"></i> {{labels.tables}}</li>
		<li {{#showTables}}class="active"{{/showTables}}>
			<a href="javascript:void(0);" data-show-tables="1"><i class="fa fa-{{#showTables}}check-{{/showTables}}square-o"></i> {{labels.display_tables}}</a>
		</li>
		<li {{#autoHideTables}}class="active"{{/autoHideTables}}>
			<a href="javascript:void(0);" data-autohide-tables="1" title="{{labels.ah_small_title}}">
				<i class="fa fa-{{#autoHideTables}}check-{{/autoHideTables}}square-o"></i> {{labels.ah_small}}
			</a>
		</li>
	</ul>
	<h3><i class="fa fa-th-large"></i> {{labels.layout}}</h3>
	<ul>
		<li {{#horizontal}}class="active"{{/horizontal}}>
			<a href="javascript:void(0);" class="layout-horizontal"><i class="fa fa-circle{{^horizontal}}-o{{/horizontal}}"></i> {{labels.horizontal}}</a>
		</li>
		<li {{#wide}}class="active"{{/wide}}>
			<a href="javascript:void(0);" class="layout-wide"><i class="fa fa-circle{{^wide}}-o{{/wide}}"></i> {{labels.wide}}</a>
		</li>
		<li {{#vertical}}class="active"{{/vertical}}>
			<a href="javascript:void(0);" class="layout-vertical"><i class="fa fa-circle{{^vertical}}-o{{/vertical}}"></i> {{labels.vertical}}</a>
		</li>
	</ul>
	<h3><i class="fa fa-cog"></i> {{labels.file_opts}}</h3>
	<ul>
		<li><a href="javascript:void(0);" class="export-json"><i class="fa fa-code"></i> {{labels.export_json}}</a></li>
	</ul>
</script>

<!-- TPL Chart tooltip -->
<script id="tpl-chart-tooltip" type="text/template">
	<table class="chart-tooltip">
		<tbody>
			<tr>
				<th colspan="2">{{data.0}}</th>
			</tr>
			<tr>
				<td class="name"><span class="blue"></span>hits</td>
				<td class="value">{{data.1}}</td>
			</tr>
			{{#data.2}}
			<tr>
				<td class="name"><span class="red"></span>visitors</td>
				<td class="value">{{data.2}}</td>
			</tr>
			{{/data.2}}
		</tbody>
	</table>
</script>
