<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="about_panel.css" />
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    </head>
    
    <body class="panel">
        <header>
            <p class="center"><img src="img/logo120_text.png" alt="Grammalecte"></p>
            <p class="underline center">
                <b>Version ${version}</b>
            </p>
            <p id="links" class="center">
                <a id="spelling" class="bluebutton" href="#" onclick="return false;" data-l10n-id="spelling"></a> ·
                <a id="grammar" class="bluebutton" href="#" onclick="return false;" data-l10n-id="grammar"></a> ·
                <a id="conjugueur" class="redbutton" href="#" onclick="return false;" data-l10n-id="conjugueur"></a>
            </p>
        </header>
        
        <div id="help_section">
            <p data-l10n-id="useContextMenu"></p>
            <p class="right"><img src="img/contextmenu.png" title="menu contextuel sur zone de texte" /></p>
            <p><b data-l10n-id="shortcuts"></b></p>
            <p><span class="key" data-l10n-id="keyTF"></span> &#10097; <span class="goto" data-l10n-id="keyLabelTF"></span></p>
            <p><span class="key" data-l10n-id="keyGC"></span> &#10097; <span class="goto" data-l10n-id="keyLabelGC"></span></p>
            <p><span class="key" data-l10n-id="keyCJ"></span> &#10097; <span class="goto" data-l10n-id="keyLabelCJ"></span></p>
        </div>

        <div id="grammar_section">
            <h1 class="center" data-l10n-id="grammar_options"></h1>
            ${optionsHTML}
            <p class="center" style="margin: 10px 0;"><a id="default_options" href="#" onclick="return false;" data-l10n-id="default_options"></a></p>
        </div>
        
        <div id="spelling_section">
            <h1 class="center" data-l10n-id="spelling_options"></h1>
            <p id="dictionaries_info" data-l10n-id="dictionaries_info"></p>
            <div class="dict_section" id="fr-FR-modern_box">
                <p><input type="checkbox" id="fr-FR-modern" /> <label for="fr-FR-modern" data-l10n-id="dict_modern"></label></p>
                <p class="dict_description" data-l10n-id="dict_modern_descr"></p>
            </div>
            <div class="dict_section" id="fr-FR-classic_box">
                <p><input type="checkbox" id="fr-FR-classic" /> <label for="fr-FR-classic" data-l10n-id="dict_classic"></label></p>
                <p class="dict_description" data-l10n-id="dict_classic_descr"></p>
            </div>
            <div class="dict_section" id="fr-FR-reform_box">
                <p><input type="checkbox" id="fr-FR-reform" /> <label for="fr-FR-reform" data-l10n-id="dict_reform"></label></p>
                <p class="dict_description" data-l10n-id="dict_reform_descr"></p>
            </div>
            <div class="dict_section" id="fr-FR-classic-reform_box">
                <p><input type="checkbox" id="fr-FR-classic-reform" /> <label for="fr-FR-classic-reform" data-l10n-id="dict_classic_reform"></label></p>
                <p class="dict_description" data-l10n-id="dict_classic_reform_descr"></p>
            </div>
        </div>

        <footer id="promo">
            <p class="center">
                <span data-l10n-id="general_info"></span> &nbsp; · &nbsp;
                <a id="website" class="simplelink" href="http://www.dicollecte.org/" onclick="return false;" data-l10n-id="website"></a>
            </p>
        </footer>
        
        <footer id="thanks">
            <p class="center" data-l10n-id="thanks1"></p>
            <p class="center">
                <a id="mainsponsor" href="http://lamouette.org/" onclick="return false;">
                    <img src="img/LaMouette.png" style="border: 1px solid #C0C0C0" />
                </a>
            </p>
            <p class="center">
                <a id="mainsponsor2" href="https://www.algoo.fr/" onclick="return false;">
                    <img src="img/Algoo_logo.png" style="border: 1px solid #C0C0C0" />
                </a>
            </p>
            <p class="center">
                <a id="othersponsors" class="link" href="https://www.dicollecte.org/#thanks" onclick="return false;">
                    <b data-l10n-id="thanks2"></b>
                </a>
            </p>
        </footer>
    </body>
</html>