{% 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() }}
{% endblock %}

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

{% block body %}
	{{ parent() }}
	<main>
		{{ form_start(form) }}
		<div id="mainDiv">
			<!--<div id="graphDiv">
				<canvas id="graphCanvas"></canvas>
				<div id="graphLegend"></div>
				<div id="dataDiv"></div>
			</div>-->
			<object id="graphDiv" data={{ "https://spacek.blue/charts/" ~ field_value(form.code) }}></object>
			<div id="settings_div">
                {{ form_row(form.name) }}
                {{ form_row(form.code) }}
				{{ form_row(form.metadata) }}
				<!--<button id="saveBtn">Save</button>
				<button id="drawBtn">Draw</button>-->
			</div>
		</div>
		<div id="secondaryDiv">
			<div id="tableDiv">
				<table id="dataTable">
					<tr>
						{% for col in form.table %}
							<th>{{ form_row(col.col_name) }}{{ form_row(col.color) }}</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>
		</div>
        {{ form_end(form) }}
		<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>
		<script>
			window.addEventListener('mousedown', function(e) {
                let menu = document.getElementById("rcMenu")

                menu.style.display = "none"
            })

			document.getElementById("dataTable").addEventListener('contextmenu', function(e) {
				const pos = {
					x: e.clientX,
					y: e.clientY
				}

                let menu = document.getElementById("rcMenu")
				let table = document.getElementById("dataTable")
                menu.style.display = "block"

				if (pos.x + menu.clientWidth <= table.clientWidth)
                    menu.style.left = pos.x + "px"
                else 
                    menu.style.left = pos.x - menu.clientWidth + "px"

                if (pos.y + menu.clientHeight <= window.innerHeight + document.documentElement.scrollTop)
                    menu.style.top = pos.y + "px"
                else
                    menu.style.top = pos.y - menu.clientHeight + "px"
				
                //menu.style.top = e.clientY + document.documentElement.scrollTop + 'px'
                //menu.style.left = e.clientX + document.documentElement.scrollLeft + 'px'
                //rcTarget = e.currentTarget

                e.preventDefault()
				e.stopPropagation()
            })
		</script>
	</main>
{% endblock %}