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

{% block title %}Hello MainController!{% endblock %}
{% block css%}
	<link rel="stylesheet" href="css/main.css">
{% endblock %}
{% block js%}
 {# Vis.js plugin #}

<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>

<script src="{{ asset('js/main.js') }}"></script>
{% endblock %}
{% block body %}
	<label for="step">Choose a step</label>
	<input type="range" id="stepRange" name="step">
	<input type="number" id="stepField" for="step" min=0></output>
	<label for="animationDuration">Choose animation duration</label>
	<input type="range" id="animationDurationRange" name="animationDuration" min=10 max=30>
	<input type="number" id="animationDurationField" for="animationDuration" min=10 max=30></output>
	<button id="playAnimation" onclick="playAnimation()">Run</button>
	<div id="mynetwork"></div>
{% endblock %}