{% extends "base.twig" %}

{% block content %}
	
	
	<div class="grid-container">
	  <div class="grid-x grid-margin-x">

		<div class="cell small-12">
	    	<br><h1 style="margin:0;">Horizon </h1>
			<h2 style="margin:0;">EBI model {{ input.model }}</h2>
			
			<ul>
				<li>Startbedrag &euro; {{ input.start }}</li>
				<li>Maandelijks &euro; {{ input.month }}</li>
				<li>Doel &euro; {{ input.target }}</li>
			</ul>
			<p style="font-size:0.75rem;"><em>Tijdsduur berekening: {{ time }}s</em></p>
			<hr>
			
	    </div>

	    <div class="cell small-12 medium-6">
			<h2>Vermogensontwikkeling</h2>
			<div>
			  <canvas id="ebi-chart"></canvas>
			</div>
			<script>
			  const ctx = document.getElementById('ebi-chart');

			  new Chart(ctx, {
			    type: 'line',
			    data: {
			      labels: [{{ years }}],
			      datasets: [
				{	
					tension : 0.5,
			        label: 'Gemiddelde Beurs (50% percentiel)',
			        data: [{{ avg }}],
			        borderWidth: 1
			      },
				  {
					tension : 0.5,
  			        label: 'Positieve Beurs (85% percentiel)',
  			        data: [{{ good }}],
  			        borderWidth: 1
  			      }
				 ,{
					tension : 0.5,
			        label: 'Slechte Beurs (15% percentiel)',
			        data: [{{ bad }}],
			        borderWidth: 1
			      },
				]
			    },
			    options: {
					plugins: {
					            legend: {
					                display: true,
					                position: 'bottom'
					            }
					        },
			      scales: {
			        y: {
			          beginAtZero: true
			        }
			      }
			    }
			  });
			</script>
			
			
	    </div>
		
	    <div class="cell small-12 medium-6">
			<h2>Resultatenontwikkeling</h2>
			<div>
			  <canvas id="ebi-chart-2"></canvas>
			</div>
			<script>
			  const ctx2 = document.getElementById('ebi-chart-2');

			  new Chart(ctx2, {
			    type: 'line',
			    data: {
			      labels: [{{ years }}],
			      datasets: [
			
				  {
					tension : 0.5,
			        label: 'Gemiddelde Beurs (50% percentiel)',
  			        data: [{{ avg_interest }}],
  			        borderWidth: 1
  			      },
				  {
  			       	tension : 0.5,
				    label: 'Positieve Beurs (85% percentiel)',
  			        data: [{{ good_interest }}],
  			        borderWidth: 1
  			      },
				  {
					tension : 0.5,
			        label: 'Slechte Beurs (15% percentiel)',
  			        data: [{{ bad_interest }}],
  			        borderWidth: 1
  			      }
				]
			    },
			    options: {
			      scales: {
			        y: {
			          beginAtZero: true
			        }
			      },
				plugins: {
				            legend: {
				                display: true,
				                position: 'bottom'
				            }
				        },
			    }
			  });
			</script>
			
			
	    </div>

	    <div class="cell small-12 medium-6">
			<br>
			<h2>Kans bereiken wensvermogen</h2>
			<div>
			  <canvas id="ebi-chart-3"></canvas>
			</div>
			<script>
			  const ctx3 = document.getElementById('ebi-chart-3');

			  new Chart(ctx3, {
			    type: 'line',
			    data: {
			      labels: [{{ years }}],
			      datasets: [
			
				  {
					  tension : 0.5,
			        label: 'Kans op bereiken wensvermogen',
  			        data: [{{ target_reached }}],
  			        borderWidth: 1
  			      }
				  
				]
			    },
			    options: {
			      scales: {
			        y: {
			          beginAtZero: true
			        }
			      },
				plugins: {
				            legend: {
				                display: true,
				                position: 'bottom'
				            }
				        },
			    }
			  });
			</script>
			
			
	    </div>

	    <div class="cell small-12 medium-6">
			<h2>Gemiddeld Jaarrendement</h2>
			<div>
			  <canvas id="ebi-chart4"></canvas>
			</div>
			<script>
			  const ctx4 = document.getElementById('ebi-chart4');




			  new Chart(ctx4, {
			    type: 'line',
			    data: {
			      labels: [{{ years }}],
			      datasets: [
				{
					tension : 0.5,
			        label: 'Gemiddelde Beurs (50% percentiel)',
			        data: [{{ return_50percentile }}],
			        borderWidth: 1
			      },
				  {
					tension : 0.5,
  			        label: 'Positieve Beurs (85% percentiel)',
  			        data: [{{ return_85percentile }}],
  			        borderWidth: 1
  			      }
				 ,{
					tension : 0.5,
			        label: 'Slechte Beurs (15% percentiel)',
			        data: [{{ return_15percentile }}],
			        borderWidth: 1
			      },
				]
			    },
			    options: {
					plugins: {
					            legend: {
					                display: true,
					                position: 'bottom'
					            }
					        },
			      scales: {
			        y: {
			          beginAtZero: true
			        }
			      }
			    }
			  });
			</script>
			
			
	    </div>

	
	  </div>
	</div>
  
{% endblock %}