{% 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 src={{ asset('/scripts/edit_graph.js') }}></script>-->
{% endblock %}

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

{% block body %}
	<main>
		<div id="mainDiv">
			<div id="graphDiv">
				<canvas id="graphCanvas"></canvas>
				<div id="graphLegend"></div>
				<div id="dataDiv"></div>
			</div>
		<!--</div>
		<div id="secondaryDiv">-->
			{{ form_start(form) }}
			<div id="settings_div">
				{{ form_row(form.metadata) }}
				<button id="saveBtn">Save</button>
				<button id="drawBtn">Draw</button>
				<br>
				<input accept=".xls,.xlsx,.csv,.txt" id="upload" name="files[]" type="file">
				<br>
				<label for="export_types">export to
				</label>
				<select id="export_types" name="graph_types">
					<option value="txt">txt</option>
					<option value="xlsx">xlsx</option>
					<option value="png">png</option>
					<option value="xml">xml</option>
					<option value="csv">csv</option>
				</select>
				<br>
				<button id="exportBtn">Export</button>
			</div>
			<div id="tableDiv">
				<table id="dataTable">
					<tr>
						{% for col in form.table %}
							<th>{{ form_row(col.col_name) }}</th>
						{% endfor %}
					</tr>
					{% for i in 0..form.table[0].values|length-1 %}
						<tr>
							{% for col in form.table %}
								<td>{{ form_row(col.values[i]) }}</td>
							{% endfor %}
						</tr>
					{% endfor %}
				</table>
			</div>
            {{ form_end(form) }}
		</div>
		<div id="rcMenu">
			<ul>
				<li><a id="rcDelRow" href="">delete row</a></li>
				<li><a id="rcAddRow" href="">add row</a></li>
				<li><a id="rcDelCol" href="">remove column</a></li>
				<li><a id="rcAddCol" href="">copy column</a></li>
			</ul>
		</div>
	</main>
{% endblock %}