{% 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>
        // Execute when DOM content is fully loaded
        document.addEventListener("DOMContentLoaded", function(event){
            // Get DOM elements
            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">
			<iframe id="chartDiv" src={{ "https://spacek.blue/charts/" ~ field_value(chartForm.code) }}></iframe>
			<div id="settings_div">
                {{ form_row(chartForm.name) }}
                {{ form_row(chartForm.code) }}
				{{ form_row(chartForm.metadata) }}
				<!--<button id="saveBtn">Save</button>
				<button id="drawBtn">Draw</button>-->
			</div>
		</div>
		<div id="secondaryDiv">
			<div id="tableDiv">
				<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>
			</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 %}