{{#Name=History}}
{{#Description=Graph or changes table for recorded device history}}
{{#Version=1.0}}
{{#Author=HomeSeer}}
{{#CanBeDeleted=False}}
{{#SaveList=save_show_title,save_title_size,save_title_color,save_title_bold}}

 {{# Only the cosmetic keys are in SaveList above.  "Save display settings to all cards" copies }}
    {{# every listed key to every other History card, so the devices, the range and the content mode }}
    {{# must NOT appear there - one card's device list would be stamped onto all of them. }}

{{default_height=280}}
{{includefileraw Dashboards/Cards/Custom/Common/CommonHeader.html}}

{{# ---- title, through the auto-generated settings dialog ---- }}
{{sections[index]="Title"}}
{{card_title=      get_value 'save_title'       'History'  'Text'  'text'}}
{{show_title=      get_value 'save_show_title'  'on'       'Show'  'toggle'}}
{{title_size=      get_value 'save_title_size'  '16'       'Size'  'text'}}
{{title_color=     get_value 'save_title_color' '#000000'  'Color' 'color'}}
{{title_bold=      get_value 'save_title_bold'  'on'       'Bold'  'toggle'}}

 {{# ---- everything else is hand-written markup further down, so it is read directly rather }}
       {{# than through get_value, which would also queue it into the auto-generated section. }}

       {{# Every default is applied with an "is it empty" test rather than relying on first_run: }}
       {{# first_run is only true while the widget has NO saved values at all, so a setting added }}
       {{# to this card in a later version reads back as "" for every card already on a dashboard. }}
{{hdevices=get_saved_value 'save_hdevices' widget_id}}

{{content=get_saved_value 'save_content' widget_id}}
{{if content==''}}{{content='graph'}}{{end}}

{{chrome=get_saved_value 'save_chrome' widget_id}}
{{# Minimal by default: a card is usually a tile, and full chrome cannot fit its legend and }}
{{# zoom bar into one without squeezing the plot to nothing. }}
{{if chrome==''}}{{chrome='minimal'}}{{end}}

{{# Grid lines behind the graph: shown unless turned off, as on the History pages. }}
{{gridlines=get_saved_value 'save_gridlines' widget_id}}
{{if gridlines==''}}{{gridlines='on'}}{{end}}

{{range_mode=get_saved_value 'save_range_mode' widget_id}}
{{if range_mode==''}}{{range_mode='rel'}}{{end}}

{{rel_n=get_saved_value 'save_rel_n' widget_id}}
{{if rel_n==''}}{{rel_n='24'}}{{end}}

{{rel_unit=get_saved_value 'save_rel_unit' widget_id}}
{{if rel_unit==''}}{{rel_unit='hours'}}{{end}}

{{abs_start=get_saved_value 'save_start' widget_id}}
{{if abs_start==''}}{{abs_start='0'}}{{end}}
{{abs_end=get_saved_value 'save_end' widget_id}}
{{if abs_end==''}}{{abs_end='0'}}{{end}}

{{pagesize=get_saved_value 'save_pagesize' widget_id}}
{{if pagesize==''}}{{pagesize='25'}}{{end}}

{{# Seconds between auto refreshes, 0 = off. Off by default: a dashboard may hold several of }}
{{# these, and a chart nobody asked to be live should not be re-fetching a month of history. }}
{{refresh_secs=get_saved_value 'save_refresh_secs' widget_id}}
{{if refresh_secs==''}}{{refresh_secs='0'}}{{end}}

 {{# The refs, in the order they are stored - that order drives colour and tab order, which is }}
    {{# exactly why they live in one ordered string rather than one saved key per device. }}
{{hrefs=[]}}
{{hcount=0}}
{{if hdevices != ''}}
	{{for hchunk in (hdevices | string.split ';')}}
		{{if hchunk != ''}}
			{{hfields = hchunk | string.split ':'}}
			{{hrefs[hcount] = hfields[0]}}
			{{hcount = hcount + 1}}
		{{end}}
	{{end}}
{{end}}

 {{# The tile's own height, which the card must apply itself - the grid only sets it on the }}
    {{# outer .grid-item. }}
{{card_h=280}}
{{if w.height > 0}}{{card_h=w.height}}{{end}}
{{# The chart needs its height in PIXELS, not 100%: it reads the style back to decide how much }}
{{# room it has, and parseInt('100%') is 100 - it would size itself for a 100px box and then }}
{{# overflow the tile. Whatever the title takes is subtracted here instead. }}
{{chart_h=card_h - 4}}
{{if show_title=='on'}}{{chart_h=card_h - 28}}{{end}}
{{if chart_h < 60}}{{chart_h=60}}{{end}}

<style>
.hcard{{w.id}} {
	height: {{card_h}}px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.hcard{{w.id}} .hcard-title {
	flex: 0 0 auto;
	padding: 2px 6px 0 6px;
	color: {{title_color}};
	font-size: {{title_size}}px;
	{{if title_bold=='on'}}font-weight: bold;{{end}}
}
.hcard{{w.id}} .hcard-body { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.hcard{{w.id}} .hcard-empty { padding: 12px; }
/* The changes list scrolls inside the tile rather than pushing it open. */
.hcard{{w.id}} .hcard-panes { height: 100%; overflow-y: auto; }
.hcard{{w.id}} .nav-tabs {
	flex-wrap: wrap; border-bottom: 1px solid #dee2e6; box-shadow: none; background: transparent;
}
.hcard{{w.id}} .nav-tabs .nav-link {
	max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	color: #495057; background: transparent; box-shadow: none; text-transform: none;
	font-weight: 400; font-size: .8rem; padding: .25rem .55rem; margin: 0;
	border: 1px solid transparent; border-radius: .25rem .25rem 0 0;
}
.hcard{{w.id}} .nav-tabs .nav-link.active {
	color: #495057; background: #fff; border-color: #dee2e6 #dee2e6 #fff;
}
.hcard{{w.id}} table { font-size: .8rem; }
{{if dbs.edit_mode}}
/* Settings dialog only. Scoped to this card's dialog so two History cards cannot restyle
   each other, and so nothing leaks onto the dashboard itself. */
#dialogs{{w.id}} .hs-swatch { display:inline-block; width:14px; height:14px; border-radius:3px; vertical-align:middle; }
#dialogs{{w.id}} .hs-dev-name { overflow:visible; text-overflow:clip; white-space:normal; }
#dialogs{{w.id}} .hist-grp { display: flex; flex-wrap: wrap; align-items: center; margin-top: .15rem; }
#dialogs{{w.id}} .hist-unit { display: inline-flex; align-items: center; white-space: nowrap; margin-right: 1rem; }
#dialogs{{w.id}} .hist-unit small { margin-right: .4rem; }
{{end}}
</style>

<div class="hcard{{w.id}}">
	{{if show_title=='on'}}
	<div class="hcard-title">{{card_title}}</div>
	{{end}}

	<div class="hcard-body">
		{{if hcount == 0}}
		<div class="text-muted hcard-empty">No devices selected. Edit this card to choose some.</div>

		{{else if content == 'changes'}}
		 {{# Tabs are built here rather than in JavaScript so device names land in an HTML text }}
		    {{# node - no JS string escaping to get wrong for a name containing a quote. }}
		<div class="hcard-panes">
			{{if hcount > 1}}
			<ul class="nav nav-tabs" id="hcardtabs{{w.id}}" role="tablist">
				{{hi=0}}
				{{for hr in hrefs}}
				<li class="nav-item">
					<a class="nav-link{{if hi==0}} active{{end}}" data-toggle="tab" data-ref="{{hr}}"
					   href="#hcardpane{{hr}}_{{w.id}}" role="tab">{{device_name_full hr true}}</a>
				</li>
				{{hi=hi+1}}
				{{end}}
			</ul>
			{{end}}
			<div class="tab-content" id="hcardpanes{{w.id}}">
				{{hi=0}}
				{{for hr in hrefs}}
				<div class="tab-pane{{if hi==0}} active{{end}}" id="hcardpane{{hr}}_{{w.id}}"
				     role="tabpanel" data-ref="{{hr}}">
					<div class="row mt-1 mb-1 no-gutters align-items-center">
						<div class="col text-right pr-2">
							<button type="button" class="btn btn-sm btn-default my-0 hist-page-prev">Previous</button>
							<span class="text-muted mx-2 hist-page-info"></span>
							<button type="button" class="btn btn-sm btn-default my-0 hist-page-next">Next</button>
						</div>
					</div>
					<div class="table-responsive">
						<table class="table table-sm table-striped mb-0">
							<thead><tr>
								<th>Time</th>
								<th class="hist-col-value">Status</th>
								<th class="hist-col-raw">Value</th>
								<th class="hist-col-string">Status String</th>
							</tr></thead>
							<tbody class="hist-table-body">
								<tr><td colspan="4" class="text-muted">Loading&hellip;</td></tr>
							</tbody>
						</table>
					</div>
				</div>
				{{hi=hi+1}}
				{{end}}
			</div>
		</div>

		{{else}}
		<div id="hcard_chart_{{id_unique}}" style="width:100%; height:{{chart_h}}px;"></div>
		{{end}}
	</div>
</div>

 {{# The server's culture, for every date this card draws.  The History pages get this from the }}
    {{# range dialog include, which a card does not use.  It has to be set BEFORE any chart draws: }}
    {{# hs-history-chart.js registers its ECharts locale once per page, and a chart that draws }}
    {{# first would leave the time axis in English for every card after it. }}
<script>window.HS_LOCALE = window.HS_LOCALE || {{system_locale_json}};</script>

<script>
// The two history modules, fetched once per page however many History cards are on it.  Not a
// <script src> tag: two cards would each re-evaluate the modules and reset their internal
// one-shot caches (the ECharts loader promise and the locale registration).
window.HSHistLoad = window.HSHistLoad || $.when(
	$.ajax({ url: '/bootstrap/js/hs-history-chart.js', dataType: 'script', cache: true }),
	$.ajax({ url: '/bootstrap/js/hs-history-ui.js', dataType: 'script', cache: true })
);

// Everything one card owns that outlives a single render, keyed by widget id: its chart, its
// auto-refresh timer and its device-callback registration.
//
// The card's HTML is replaced wholesale on every refresh - page_common.js empties the container
// before writing, so the old chart's DOM node is already detached and echarts.getInstanceByDom
// cannot find it. Holding the previous record here is the only way to tear it down, and without
// that the timer and the registration would accumulate one copy per render.
window.HSHistCards = window.HSHistCards || {};

window.HSHistCardRecord = window.HSHistCardRecord || function () {
	return {
		chart: null, timer: null, unregister: null,
		dispose: function () {
			if (this.chart) { try { this.chart.dispose(); } catch (e) { } this.chart = null; }
			if (this.timer) { clearInterval(this.timer); this.timer = null; }
			if (this.unregister) { try { this.unregister(); } catch (e) { } this.unregister = null; }
		}
	};
};

// The device list as the card stores it: ref:axis:style:type:color;...  As the dialog writes it,
// every field is digits, a word from a fixed vocabulary or hex digits, so the string can sit in a
// JS literal as it is - and normaliseDevice checks every field again on the way in. The colour is
// stored without its '#' and left empty for the palette colour of the device's position; a list
// saved before colours existed has four fields and reads back with none.
window.HSHistCardUnpack = window.HSHistCardUnpack || function (packed) {
	var out = [];
	String(packed || '').split(';').forEach(function (chunk) {
		if (!chunk) { return; }
		var f = chunk.split(':');
		var ref = parseInt(f[0], 10);
		if (!(ref > 0)) { return; }
		out.push(HSHistoryUI.normaliseDevice({
			axis: (f[1] === '1' ? 1 : (f[1] === '0' ? 0 : null)),
			style: f[2], type: f[3],
			color: f[4] ? '#' + f[4] : null
		}, ref));
	});
	return out;
};

(function () {
	var WID = '{{w.id}}';
	var CONTENT = '{{content}}';
	var PAGESIZE = parseInt('{{pagesize}}', 10) || 25;
	var RANGE = {{if range_mode=='abs'}}{ start: {{abs_start}}, end: {{abs_end}} }{{else}}{ rel: {{rel_n}}, unit: '{{rel_unit}}' }{{end}};

	// The stored device list - HSHistCardUnpack describes its format.
	var PACKED = '{{hdevices}}';

	// A relative window slides with the clock, so it goes stale even when nothing changes; a
	// fixed From/To window does not.
	var RANGE_SLIDES = {{if range_mode=='abs'}}false{{else}}true{{end}};

	// Below a few seconds this would hammer the history database for no visible gain - the
	// dashboard only notices a device change every 3s anyway.
	var REFRESH = parseInt('{{refresh_secs}}', 10) || 0;
	if (REFRESH > 0 && REFRESH < 5) { REFRESH = 5; }

	if (window.HSHistCards[WID]) {
		try { window.HSHistCards[WID].dispose(); } catch (e) { }
		delete window.HSHistCards[WID];
	}
	var rec = window.HSHistCards[WID] = window.HSHistCardRecord();

	/**
	 * Redraw on a timer, but only when there is something new to show.
	 *
	 * The device callback sets a flag rather than refreshing: the dashboard reports each changed
	 * ref separately, so a card watching five devices would otherwise redraw five times for one
	 * tick. The flag collapses them into a single redraw, and the interval is the floor on how
	 * often that can happen.
	 *
	 * With a fixed From/To window and no change, the chart on screen is already correct and
	 * re-fetching it would be pure waste - so that is the one case that does nothing.
	 */
	function startAutoRefresh(refs, redraw) {
		if (!REFRESH) { return; }
		var dirty = false;
		if (typeof registerDeviceCallback === 'function') {
			// Keep the unregister function: this card's script re-runs on every render, and
			// dropping it would leave a dead callback registered per render for the life of
			// the page.
			rec.unregister = registerDeviceCallback(refs.join(','), function () { dirty = true; });
		}
		rec.timer = setInterval(function () {
			if (!dirty && !RANGE_SLIDES) { return; }
			dirty = false;
			try { redraw(); } catch (e) { }
		}, REFRESH * 1000);
	}

	window.HSHistLoad.done(function () {
		var devices = window.HSHistCardUnpack(PACKED);
		if (!devices.length) { return; }

		var refs = devices.map(function (d) { return d.ref; });

		if (CONTENT === 'changes') {
			startChanges(devices, refs);
		} else {
			rec.chart = HSHistoryChart.create('hcard_chart_{{id_unique}}', {
				devices: devices,
				range: RANGE,
				chrome: '{{chrome}}',
				gridLines: {{if gridlines=='off'}}false{{else}}true{{end}},
				// The tile clips its content, so the tooltip has to be drawn outside it or a
				// card only a couple of hundred pixels tall shows a couple of lines of it.
				tooltipToBody: true
			});
			// refresh() re-fetches and redraws in place. update_custom_card would rebuild the
			// card's HTML instead, which disposes the chart and throws away the viewer's zoom.
			startAutoRefresh(refs, function () { rec.chart.refresh(); });
		}
	});

	function startChanges(devices, refs) {
		var $root = $('#hcardpanes{{w.id}}');
		if (!$root.length) { return; }
		var pages = {};
		devices.forEach(function (d) { pages[d.ref] = 0; });
		var activeRef = devices[0].ref;

		function load(ref) {
			var $pane = $('#hcardpane' + ref + '_{{w.id}}');
			if (!$pane.length) { return; }
			HSHistoryUI.loadTable($pane, ref, RANGE, pages[ref], PAGESIZE);
		}

		// Only the visible pane is fetched; the rest wait until their tab is shown.  'show'
		// rather than 'shown' so the request is already in flight as the pane swaps in.
		$('#hcardtabs{{w.id}}').on('show.bs.tab', 'a[data-toggle="tab"]', function () {
			var ref = parseInt($(this).data('ref'), 10);
			activeRef = ref;
			if ($('#hcardpane' + ref + '_{{w.id}} .hist-table-body tr').length <= 1) { load(ref); }
		});
		$root.on('click', '.hist-page-prev', function () {
			var ref = parseInt($(this).closest('.tab-pane').data('ref'), 10);
			if (pages[ref] > 0) { pages[ref]--; load(ref); }
		});
		$root.on('click', '.hist-page-next', function () {
			var ref = parseInt($(this).closest('.tab-pane').data('ref'), 10);
			pages[ref]++;
			load(ref);
		});

		load(activeRef);

		// Only the pane on screen, and at the page the reader is on rather than snapping back
		// to the first - the others reload when their tab is next opened.
		startAutoRefresh(refs, function () { load(activeRef); });
	}
})();
</script>

{{if dbs.edit_mode}}
 {{# ------------------------------------------------------------------ settings dialog ---- }}
    {{# A copy of Common/CommonSettingsDialog.html with this card's own controls added, which is }}
    {{# what that file's own closing comment says to do when a card needs more than the three }}
    {{# auto-generated control types. }}

    {{# EVERY save_* input below is rendered unconditionally and hidden with CSS when it does not }}
    {{# apply.  save_custom_card_edits wipes all saved values and then restores only what the form }}
    {{# posted, so a control the dialog leaves out is erased.  A hidden input still posts; a }}
    {{# disabled one does not. }}
<div id="dialogs{{w.id}}">
<div class="modal pg-show-modal" id="edit_custom_card{{w.id}}" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog modal-lg cascading-modal">
		<div class="modal-content">
			<form id="add_to_dashboard">
			<div class="modal-c-tabs">
				<ul class="nav md-tabs tabs-2 light-blue darken-3" role="tablist">
					<li class="nav-item">
						<a class="nav-link active" data-toggle="tab" href="#panel{{w.id}}2" role="tab"><i class="fas fa-edit mr-1"></i>
						Display</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-toggle="tab" href="#panel{{w.id}}1" role="tab"><i class="fas fa-border-all mr-1"></i>
						Format</a>
					</li>
				</ul>
				<div class="tab-content mt-n4">
					<div class="tab-pane fade" id="panel{{w.id}}1" role="tabpanel">
						<div class="modal-body">
							{{includefileraw Dashboards/Cards/Internal/card_appearance_settings.html}}
						</div>
					</div>

					<div class="tab-pane fade in show active" id="panel{{w.id}}2" role="tabpanel">
						<div class="modal-body">
							<input type="hidden" id="edit_camera_card_widget_id_{{w.id}}" name="edit_camera_card_widget_id_{{w.id}}" value="{{w.id}}">

							{{# ---- auto-generated section, do not modify ---- }}
							{{index=0}}
							{{for sn in save_names}}
								{{if sections[index] != null}}
									<div style="width:100%" class="streakhs grey lighten-2">{{sections[index]}}</div>
								{{end}}
								<div class="row no-gutters">
									{{if control_types[index] == 'color'}}
									<div class="col-md-3 justify-content-center align-content-center">{{titles[index]}}</div>
									<div class="md-form input-group col-md justify-content-center text-center">
										<input type="text" id="{{sn}}_{{w.id}}" class="form-control" name="{{sn}}" value="{{current_values[index]}}">
									</div>
									<div class="md-form input-group col-md justify-content-center text-center">
										<button onclick="ShowColorPickerDialog('#{{sn}}-{{w.id}}','{{current_values[index]}}','#{{sn}}_{{w.id}}');" type="button" id="{{sn}}-{{w.id}}" class="color-square-btn" style="background-color:{{current_values[index]}};"></button>
									</div>
									{{else if control_types[index] == 'toggle'}}
									<div class="col-md-9 justify-content-center align-content-center">{{titles[index]}}</div>
									<div class="col-md-3">
										<span class="switch"><label>
											<input type="checkbox" name="{{sn}}" {{if current_values[index]=="on"}}checked{{end}}>
											<span class="lever"></span>
										</label></span>
									</div>
									{{else if control_types[index] == 'text'}}
									<div class="col-md-3 justify-content-center align-content-center">{{titles[index]}}</div>
									<div class="col-md-9 md-form input-group justify-content-center text-center">
										<input type="text" id="{{sn}}_{{w.id}}" class="form-control" name="{{sn}}" value="{{current_values[index]}}">
									</div>
									{{end}}
								</div>
								{{index=index+1}}
							{{end}}

							{{# ---- this card's own controls ---- }}
							<div style="width:100%" class="streakhs grey lighten-2">Content</div>
							<div class="row no-gutters align-items-center mb-2">
								<div class="col-md-3">Show</div>
								<div class="col-md-9">
									<div class="btn-group btn-group-sm" role="group">
										<button type="button" class="btn my-0 hc-content" data-v="graph">Graph</button>
										<button type="button" class="btn my-0 hc-content" data-v="changes">Changes</button>
									</div>
									<input type="hidden" name="save_content" id="hc_content_{{w.id}}" value="{{content}}">
								</div>
							</div>
							<div class="row no-gutters align-items-center mb-2" id="hc_chrome_row_{{w.id}}">
								<div class="col-md-3">Chart detail</div>
								<div class="col-md-9">
									<div class="btn-group btn-group-sm" role="group">
										<button type="button" class="btn my-0 hc-chrome" data-v="minimal">Minimal</button>
										<button type="button" class="btn my-0 hc-chrome" data-v="full">Full</button>
									</div>
									<input type="hidden" name="save_chrome" id="hc_chrome_{{w.id}}" value="{{chrome}}">
									<small class="text-muted d-block">Minimal drops the legend, the zoom bar and the timeline labels so the plot fits a small card.</small>
								</div>
							</div>
							<div class="row no-gutters align-items-center mb-2" id="hc_grid_row_{{w.id}}">
								<div class="col-md-3">Grid lines</div>
								<div class="col-md-9">
									<div class="btn-group btn-group-sm" role="group">
										<button type="button" class="btn my-0 hc-grid" data-v="on">Show</button>
										<button type="button" class="btn my-0 hc-grid" data-v="off">Hide</button>
									</div>
									<input type="hidden" name="save_gridlines" id="hc_grid_{{w.id}}" value="{{gridlines}}">
								</div>
							</div>
							<div class="row no-gutters align-items-center mb-2" id="hc_pagesize_row_{{w.id}}">
								<div class="col-md-3">Rows per page</div>
								<div class="col-md-9" style="max-width:150px;">
									<select class="mdb-select md-form mb-0 hc-select{{w.id}}" name="save_pagesize" id="hc_pagesize_{{w.id}}">
										<option value="10" {{if pagesize=='10'}}selected{{end}}>10 rows</option>
										<option value="25" {{if pagesize=='25'}}selected{{end}}>25 rows</option>
										<option value="50" {{if pagesize=='50'}}selected{{end}}>50 rows</option>
										<option value="100" {{if pagesize=='100'}}selected{{end}}>100 rows</option>
										<option value="250" {{if pagesize=='250'}}selected{{end}}>250 rows</option>
									</select>
								</div>
							</div>

							<div class="row no-gutters align-items-center mb-2">
								<div class="col-md-3">Auto refresh</div>
								<div class="col-md-9">
									<input type="text" class="form-control mb-0 d-inline-block" style="width:70px;"
									       name="save_refresh_secs" id="hc_refresh_{{w.id}}" value="{{refresh_secs}}">
									<span class="ml-2">seconds</span>
									<small class="text-muted d-block">0 turns it off. A Last X range reloads on this interval, because its window keeps moving; a From / To range only reloads when one of its devices has changed.</small>
								</div>
							</div>
							<div style="width:100%" class="streakhs grey lighten-2">Range</div>
							<div class="row no-gutters align-items-center mb-2">
								<div class="col-md-3">Range type</div>
								<div class="col-md-9">
									<div class="btn-group btn-group-sm" role="group">
										<button type="button" class="btn my-0 hc-rmode" data-v="rel">Last X</button>
										<button type="button" class="btn my-0 hc-rmode" data-v="abs">From / To</button>
									</div>
									<input type="hidden" name="save_range_mode" id="hc_rmode_{{w.id}}" value="{{range_mode}}">
								</div>
							</div>
							<div class="row no-gutters align-items-center mb-2" id="hc_rel_{{w.id}}">
								<div class="col-md-3">Last</div>
								<div class="col-md-2 pr-2">
									<input type="text" class="form-control mb-0" name="save_rel_n" id="hc_rel_n_{{w.id}}" value="{{rel_n}}">
								</div>
								<div class="col-md-3">
									<select class="mdb-select md-form mb-0 hc-select{{w.id}}" name="save_rel_unit" id="hc_rel_unit_{{w.id}}">
										<option value="minutes" {{if rel_unit=='minutes'}}selected{{end}}>minutes</option>
										<option value="hours" {{if rel_unit=='hours'}}selected{{end}}>hours</option>
										<option value="days" {{if rel_unit=='days'}}selected{{end}}>days</option>
										<option value="months" {{if rel_unit=='months'}}selected{{end}}>months</option>
										<option value="years" {{if rel_unit=='years'}}selected{{end}}>years</option>
									</select>
								</div>
							</div>
							<div id="hc_abs_{{w.id}}">
								<div class="row no-gutters align-items-center mb-2">
									<div class="col-md-3">From</div>
									<div class="col-md-4 pr-2">
										<input placeholder="date" type="text" class="form-control mb-0" id="hc_sd_{{w.id}}">
									</div>
									<div class="col-md-3">
										<input placeholder="time" type="text" class="form-control mb-0" id="hc_st_{{w.id}}">
									</div>
								</div>
								<div class="row no-gutters align-items-center mb-2">
									<div class="col-md-3">To</div>
									<div class="col-md-4 pr-2">
										<input placeholder="date" type="text" class="form-control mb-0" id="hc_ed_{{w.id}}">
									</div>
									<div class="col-md-3">
										<input placeholder="time" type="text" class="form-control mb-0" id="hc_et_{{w.id}}">
									</div>
								</div>
							</div>
							 {{# The epochs the card actually reads.  Written by JS from the pickers whenever }}
							    {{# they change, so the form posts numbers rather than culture-formatted text. }}
							<input type="hidden" name="save_start" id="hc_start_{{w.id}}" value="{{abs_start}}">
							<input type="hidden" name="save_end" id="hc_end_{{w.id}}" value="{{abs_end}}">

							<div style="width:100%" class="streakhs grey lighten-2">Devices</div>
							<div class="row no-gutters align-items-center mb-2">
								<div class="col-md-9 pr-2">
									<select class="mdb-select md-form mb-0" id="hc_pick_{{w.id}}" searchable="Search for a device here...">
										<option disabled selected value="0">Select a device</option>
										{{ for g in history_devices }}
										<optgroup label="{{g.label}}">
											{{ for d in g.devices }}
											<option value="{{d.ref}}" data-full="{{d.full}}">{{d.name}}</option>
											{{ end }}
										</optgroup>
										{{ end }}
									</select>
								</div>
								<div class="col-md-3">
									<button type="button" class="btn btn-sm btn-primary my-0" id="hc_add_{{w.id}}">Add</button>
								</div>
							</div>
							<div class="row no-gutters mb-2">
								<div class="col">
									<small class="text-muted">Only devices that record history, or still hold recorded data, are listed.</small>
								</div>
							</div>
							<div class="row no-gutters">
								<div class="col" id="hc_list_{{w.id}}"></div>
							</div>
							<input type="hidden" name="save_hdevices" id="hc_devices_{{w.id}}" value="{{hdevices}}">
						</div>
					</div>

					{{save_action='save_custom_card_edits'}}
					{{includefileraw includes/dashboard_dialogs_footer.html}}
				</div>
			</div>
			</form>
		</div>
	</div>
</div>
</div>

{{includefileraw Dashboards/Cards/Custom/Common/CommonScript.html}}

<script>
(function () {
	var WID = '{{w.id}}';
	var $dlg = $('#edit_custom_card' + WID);

	// The device rows the dialog edits.  Parsed from the same packed string the card reads, and
	// written back to the hidden input after every change.
	var devices = [];

	// The inverse of HSHistCardUnpack.
	function pack() {
		return devices.map(function (d) {
			return [d.ref, (d.axis === null ? '' : d.axis), (d.style || ''), (d.type || ''), (d.color ? d.color.slice(1) : '')].join(':');
		}).join(';');
	}

	function commit() {
		$('#hc_devices_' + WID).val(pack());
	}

	// The full location-qualified name: several rooms have a feature called "Control", and the
	// picker's own option text leaves the location to the group heading.
	function deviceName(ref) {
		var $o = $('#hc_pick_' + WID + ' option[value="' + ref + '"]');
		if (!$o.length) { return 'Ref ' + ref + ' (no longer available)'; }
		return $o.attr('data-full') || $.trim($o.text());
	}

	function renderRows() {
		// How a device is drawn only means something when the card is drawing it. In Changes
		// mode the rows are just the list, in order, with a way to remove one.
		rowOpts.showDrawing = ($('#hc_content_' + WID).val() !== 'changes');
		HSHistoryUI.renderDeviceRows($('#hc_list_' + WID), devices, rowOpts);
	}

	var rowOpts = {
		showName: true,
		nameFor: deviceName,
		getDevices: function () { return devices; },
		// The grid lines row follows the rows: it goes when the last graphed device becomes a timeline.
		afterRender: function () { applyVisibility(); },
		onChange: commit,
		onRemove: function (ref) {
			devices = devices.filter(function (d) { return d.ref !== ref; });
			commit();
			renderRows();
		}
	};

	function setToggle(cls, hiddenId, v) {
		$dlg.find('.' + cls).each(function () {
			var on = ($(this).data('v') === v);
			$(this).toggleClass('btn-success', on).toggleClass('btn-default', !on);
		});
		$('#' + hiddenId + '_' + WID).val(v);
	}

	// Rows are hidden, never removed and never disabled: save_custom_card_edits wipes every
	// saved value and restores only the posted fields, so a control that stopped posting would
	// take its setting with it.
	function applyVisibility() {
		var content = $('#hc_content_' + WID).val();
		var mode = $('#hc_rmode_' + WID).val();
		$('#hc_chrome_row_' + WID).toggle(content === 'graph');
		// Grid lines belong to the value axes, and a chart of nothing but timelines has none.
		var graphed = !devices.length || devices.some(function (d) { return (d.type || 'graph') === 'graph'; });
		$('#hc_grid_row_' + WID).toggle(content === 'graph' && graphed);
		$('#hc_pagesize_row_' + WID).toggle(content === 'changes');
		$('#hc_rel_' + WID).toggle(mode === 'rel');
		$('#hc_abs_' + WID).toggle(mode === 'abs');
	}

	HSHistLoad.done(function () {
		devices = window.HSHistCardUnpack($('#hc_devices_' + WID).val());

		// Bound once on the container, so rebuilt rows need no rebinding.
		HSHistoryUI.bindDeviceRows($('#hc_list_' + WID), rowOpts);
		renderRows();

		var L = HSHistoryUI.locale();
		$('#hc_sd_' + WID + ', #hc_ed_' + WID).pickadate({
			format: L.pickerDatePattern, closeOnSelect: true, close: 'Done'
		});
		$('#hc_st_' + WID + ', #hc_et_' + WID).pickatime({
			twelvehour: HSHistoryUI.twelveHour(), autoclose: true
		});

		// Seed the pickers: a stored absolute window if there is one, otherwise the last day so
		// the fields are never blank the first time From / To is chosen.
		var s = parseInt($('#hc_start_' + WID).val(), 10);
		var e = parseInt($('#hc_end_' + WID).val(), 10);
		if (!(s > 0 && e > s)) { e = Date.now(); s = e - 86400000; }
		HSHistoryUI.setDateField('#hc_sd_' + WID, new Date(s));
		$('#hc_st_' + WID).val(HSHistoryUI.tstr(new Date(s)));
		HSHistoryUI.setDateField('#hc_ed_' + WID, new Date(e));
		$('#hc_et_' + WID).val(HSHistoryUI.tstr(new Date(e)));
		syncAbs();

		applyVisibility();
		setToggle('hc-content', 'hc_content', $('#hc_content_' + WID).val());
		setToggle('hc-chrome', 'hc_chrome', $('#hc_chrome_' + WID).val());
		setToggle('hc-grid', 'hc_grid', $('#hc_grid_' + WID).val());
		setToggle('hc-rmode', 'hc_rmode', $('#hc_rmode_' + WID).val());
	});

	// Read the pickers back through their own models rather than by parsing what they display -
	// "03/09/2026" is a different day in different cultures.
	function syncAbs() {
		var s = HSHistoryUI.readDateTime('#hc_sd_' + WID, '#hc_st_' + WID, false);
		var e = HSHistoryUI.readDateTime('#hc_ed_' + WID, '#hc_et_' + WID, true);
		if (!isNaN(s) && !isNaN(e) && e > s) {
			$('#hc_start_' + WID).val(s);
			$('#hc_end_' + WID).val(e);
		}
	}

	$dlg.on('click', '.hc-content', function () {
		setToggle('hc-content', 'hc_content', $(this).data('v'));
		applyVisibility();
		renderRows();
	});
	$dlg.on('click', '.hc-chrome', function () { setToggle('hc-chrome', 'hc_chrome', $(this).data('v')); });
	$dlg.on('click', '.hc-grid', function () { setToggle('hc-grid', 'hc_grid', $(this).data('v')); });
	$dlg.on('click', '.hc-rmode', function () {
		setToggle('hc-rmode', 'hc_rmode', $(this).data('v'));
		applyVisibility();
	});
	$dlg.on('change', '#hc_sd_' + WID + ', #hc_st_' + WID + ', #hc_ed_' + WID + ', #hc_et_' + WID, syncAbs);

	$dlg.on('click', '#hc_add_' + WID, function () {
		var ref = parseInt($('#hc_pick_' + WID).val(), 10);
		if (!(ref > 0)) { return; }
		if (devices.some(function (d) { return d.ref === ref; })) { return; }
		if (devices.length >= HSHistoryChart.maxDevices) { return; }
		devices.push(HSHistoryUI.normaliseDevice(null, ref));
		commit();
		renderRows();
	});

	// The selects live inside a modal that is built after page_common.js has already run
	// materialSelect(), so they have to be initialised here or MDB leaves them hidden.
	$('.hc-select' + WID).materialSelect();
	$('#hc_pick_' + WID).materialSelect();
})();
</script>
{{end}}