{% extends 'base.html.twig' %}

{% block stylesheets %}
	{{ parent() }}
	<link href="{{ asset('styles/style.css') }}" rel="stylesheet"/>
	<link href="{{ asset('styles/edit_chart.css') }}" rel="stylesheet"/>
{% endblock %}

{% block javascripts %}
	{{ parent() }}
	<script type="text/javascript" src={{ asset('/scripts/table.js') }}></script>
	<script type="text/javascript" src={{ asset('/scripts/edit_chart.js') }}></script>
	<script>
		// Execute when DOM content is fully loaded
		document.addEventListener("DOMContentLoaded", function (event) { // Get DOM elements

			loadEventListeners()
			
			let tableElement = document.getElementById("dataTable")
			let rcMenu = document.getElementById("rcMenu")

			let table = new Table(tableElement, rcMenu)
		})
	</script>
{% endblock %}

{% block title %}
	Edit chart
{% endblock %}

{% block body %}
	{{ parent() }}
	<main>
		{{ form_start(chartForm) }}
		<div id="mainDiv">
			<div id="settings_div">
				<h1>Nastavení grafu</h1>
				{{ form_row(chartForm.name) }}
				{{ form_row(chartForm.metadata) }}
				<!--<button id="saveBtn">Save</button>
								<button id="drawBtn">Draw</button>-->
			</div>
			<iframe id="chartDiv" src={{ path('charts_display', {'id': id}) }}></iframe>
		</div>
		<div id="secondaryDiv">
			<div id="tableDiv">
				{% if chartForm.table is defined %}
					<table id="dataTable">
						<thead>
							<tr>
								{% for col in chartForm.table %}
									<th>{{ form_row(col.col_name) }}{{ form_row(col.color) }}</th>
								{% endfor %}
							</tr>
						</thead>
						{% for i in 0..chartForm.table[0].values|length-1 %}
							<tr>
								{% for col in chartForm.table %}
									<td>{{ form_row(col.values[i]) }}</td>
								{% endfor %}
							</tr>
						{% endfor %}
					</table>
				{% else %}
					<strong>Příliš mnoho hodnot, použijte API</strong>
				{% endif %}
			</div>
		</div>
		{{ form_end(chartForm) }}
		<div id="rcMenu">
			<ul>
				<li><a id="rcAddRow" href="">add row</a></li>
				<li><a id="rcDelRow" href="">delete row</a></li>
				<li><a id="rcAddCol" href="">add column</a></li>
				<li><a id="rcDelCol" href="">delete column</a></li>
			</ul>
		</div>
	</main>
{% endblock %}