{% extends "base/base.html" %}

{% set tabtitle = "Comparateur des calculatrices CASIO" %}

{% block title %}
<h1>Comparateur des calculatrices CASIO</h1>
{% endblock %}

{% block content %}
<section>
	<p>
		Cette page recense la majorité des calculatrices CASIO distribuées en
		France depuis 2005. Le tableau comparatif contient tous les détails
		logiciels et matériels des modèles, ainsi que de nombreux liens vers
		les ressources associées.
	</p>

	<h4>Sélection des modèles</h4>
	<p>
		<button onclick="select_set(default_set)">Afficher les modèles actuels</button>
		<button onclick="select_all()">Tout afficher</button>
	</p>

	<div>
		<a id="calcdb-permalink" href="https://www.planet-casio.com/Fr/infos/comparateur?g25+e2,g35+e2,g90+e,cp400+e">Lien permanent vers cette configuration</a>
	</div>

	<div id="calcdb-checkboxes">
		<div>
			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="g25ppro" data-name="g25+pro">
			<img src="/static/icons/calc/g25+pro.png">
			<span>Graph 25+ Pro</span>
		</div>
		<div>
			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="g25pe" data-name="g25+e">
			<img src="/static/icons/calc/g25+e.png">
			<span>Graph 25+E</span>
		</div>
		<div>
			<input type="checkbox" onchange="toggle_calc(this)" checked="" data-calc="g25pe2" data-name="g25+e2">
			<img src="/static/icons/calc/g25+e2.png">
			<span>Graph 25+E II</span>
		</div>
		<div>
			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="g35p" data-name="g35+">
			<img src="/static/icons/calc/g35+.png">
			<span>Graph 35+</span>
		</div>
		<div>
			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="g35pusb3" data-name="g35+usb3">
			<img src="/static/icons/calc/g35+usb3.png">
			<span>Graph 35+ USB (SH3)</span>
		</div>
		<div>
			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="g35pusb4" data-name="g35+usb4">
			<img src="/static/icons/calc/g35+usb4.png">
			<span>Graph 35+ USB (SH4)</span>
		</div>
		<div>
			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="g35pe" data-name="g35+e">
			<img src="/static/icons/calc/g35+e.png">
			<span>Graph 35+E</span>
		</div>
		<div>
			<input type="checkbox" onchange="toggle_calc(this)" checked="" data-calc="g35pe2" data-name="g35+e2">
			<img src="/static/icons/calc/g35+e2.png">
			<span>Graph 35+E II</span>
		</div>
		<div>
			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="g75" data-name="g75">
			<img src="/static/icons/calc/g75.png">
			<span>Graph 75</span>
		</div>
		<div>
			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="g75p" data-name="g75+">
			<img src="/static/icons/calc/g75+.png">
			<span>Graph 75+</span>
		</div>
		<div>
			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="g75pe" data-name="g75+e">
			<img src="/static/icons/calc/g75+e.png">
			<span>Graph 75+E</span>
		</div>
		<div>
			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="g85" data-name="g85">
			<img src="/static/icons/calc/g85.png">
			<span>Graph 85</span>
		</div>
		<div>
			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="g85sd" data-name="g85sd">
			<img src="/static/icons/calc/g85sd.png">
			<span>Graph 85 SD</span>
		</div>
		<div>
			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="g95" data-name="g95">
			<img src="/static/icons/calc/g95.png">
			<span>Graph 95 (SD)</span>
		</div>
		<div>
			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="cg20" data-name="cg20">
			<img src="/static/icons/calc/cg20.png">
			<span>Prizm</span>
		</div>
		<div>
			<input type="checkbox" onchange="toggle_calc(this)" checked="" data-calc="g90pe" data-name="g90+e">
			<img src="/static/icons/calc/g90+e.png">
			<span>Graph 90+E</span>
		</div>
		<div>
			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="cp300" data-name="cp300">
			<img src="/static/icons/calc/cp300.png">
			<span>Classpad 300</span>
		</div>
		<div>
			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="cp330" data-name="cp330">
			<img src="/static/icons/calc/cp330.png">
			<span>Classpad 330</span>
		</div>
		<div>
			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="cp330p" data-name="cp330+">
			<img src="/static/icons/calc/cp330+.png">
			<span>Classpad 330+</span>
		</div>
		<div>
			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="cp400" data-name="cp400">
			<img src="/static/icons/calc/cp400.png">
			<span>Classpad 400</span>
		</div>
		<div>
			<input type="checkbox" onchange="toggle_calc(this)" checked="" data-calc="cp400pe" data-name="cp400+e">
			<img src="/static/icons/calc/cp400+e.png">
			<span>Classpad 400+E</span>
		</div>
	</div>

	<h4>Tableau comparatif</h4>
	<div id="calcdb">
		{% include "calcdb-fr.html" %}
	</div>
</section>
{% endblock %}