<html>
  <head>
    {% if title is not false %}
      <title>{{ title }}</title>
    {% else %}
      <title data-lang-item="index_title">{{langs[actLang]['index_title']}}</title>
    {% endif %}
    <meta charset="utf-8">
    <meta http-equiv="Content-type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta data-lang-item="meta_desc" name="description" content="{{ langs[actLang]['meta_desc'] }}">
    <meta data-lang-item="meta_keywords" name="keywords" content="{{ langs[actLang]['meta_keywords'] }}">
    <meta name="author" content="Julien Marin - Projet Afrikalan">
    <link rel="manifest" href="manifest.php">
    <link rel="shortcut icon" href="images/favicon-small.png" sizes="32x32">
    <link rel="shortcut icon" href="images/favicon.png" sizes="64x64 96x96 128x128 192x192">
    
    <script src="js/jquery.min.js"></script>
    <script src="js/options.js"></script>
    <script src="js/Lang.js"></script>
    <script src="js/utils.js"></script>
    <link rel="stylesheet" href="menuassets/css/menus.css">
    {% if suffix=="" %}
    {% for lang in langs %}
    <link rel="alternate" hreflang="{{ lang }}" href="{% if args.official %}https://tuxmath.org/{% endif %}index-{{ lang }}.html?opt_lang={{ lang }}" />
    {% endfor %}
    {% endif %}
  </head>
  <body>
    <div class="o-announce js-announce" style="display: none;">
      <div class="o-announce__icon"><img src="menuassets/img/announce-icon.svg" height=65></div>
      <div class="o-announce__message js-announce__message"></div>
      <div class="o-announce__close"><a class="js-announce-close" href=#><img src="menuassets/img/announce-close.svg" height=20 ></a></div>
    </div>
    <div class="o-title">
      <img src="images/logoTm.svg">
    </div>
    <div class="o-bigtux">
      <img src="menuassets/img/bigtux-anim.png">
    </div>
    <nav class="o-menu">
    {% if indextype=="typeop" %}
      {% for grp in levelGroupsData %}        
        <a href="index{{ suffix }}_{{ grp }}.html" class="o-menu__item o-menu__box u-w100">
          <div class="o-menuitemblock">
            <div class="o-menuitemblock__imgcont">
              <img height=100% src="menuassets/img/icon_lvlgroup_{{ grp }}.svg" class="o-menuitemblock__imgcont__img">
            </div>
            <div data-lang-item="lgroup_{{ grp }}" class="o-menuitemblock__txt">{{langs[actLang]['lgroup_'+grp]}}</div>
          </div>
        </a>
      {% endfor %}
    {% endif %}
    
    {% if indextype=="classlist" %}
      {% for grp, name in levelGroupsData.items() %}        
        <a href="index-{{ grp }}.html" class="o-menu__item o-menu__box u-w100">
          <div class="o-menuitemblock">
            <div class="o-menuitemblock__txt">{{ name }}</div>
          </div>
        </a>
      {% endfor %}
    {% endif %}
    
    {% if suffix!="" %}
      <a href="javascript:history.back()" class="o-menu__item o-menu__box">
        <li class="o-menuitemblock">
          <div class="o-menuitemblock__imgcont">
            <img height=100% src="menuassets/img/icon_back.svg" class="o-menuitemblock__imgcont__img">
          </div>
          <div data-lang-item="menuitem_back" class="o-menuitemblock__txt">{{langs['en']['menuitem_back']}}</div>
        </li>
      </a>
    {% else %}
      <a href="options.html" class="o-menu__item o-menu__box u-w100">
        <div class="o-menuitemblock">
          <div class="o-menuitemblock__imgcont">
            <img height=100% src="menuassets/img/icon_options.svg" class="o-menuitemblock__imgcont__img">
          </div>
          <div data-lang-item="menuitem_options" class="o-menuitemblock__txt">{{langs[actLang]['menuitem_options']}}</div>
        </div>
      </a>
      <a data-lang-target="menuitem_infos__url" href="#" class="o-menu__item o-menu__box u-w100">
        <li class="o-menuitemblock">
          <div class="o-menuitemblock__imgcont">
            <img height=100% src="menuassets/img/icon_helpinfo.svg" class="o-menuitemblock__imgcont__img">
          </div>
          <div data-lang-item="menuitem_infos" class="o-menuitemblock__txt">{{langs[actLang]['menuitem_infos']}}</div>
        </li>
      </a>
    {% endif %}
    {#<header class="o-menu__box o-menu__box--infos">
      This website allows you to play tuxmath online, free and without ads. It is a full rewrite of Tuxmath in javascript language, under AGPL 3.0, provided by Afrikalan. <a data-lang-target="menuitem_infos__url" href="#">More informations</a>. If you look for the original (SDL based) Tux Math, go to <a href="http://www.tux4kids.com">Tux 4 kids</a>.
    </header>#}
    {% if args.official %}
      <div class="o-menuitemblock--getappicons">
        <a href="https://f-droid.org/fr/packages/org.afrikalan.tuxmath"><img src="http://download.tuxfamily.org/afrikalan/assets/badge--f-droid-33px.png" height=32></a>
        <a href="https://play.google.com/store/apps/details?id=org.afrikalan.tuxmath"><img src="http://download.tuxfamily.org/afrikalan/assets/badge--googlePlay-33px.png" height=32></a>
      </div>
    {% endif %}
    </nav>
    
    <script>
      $(function(){
        tmGlob_Options=new TmOptions();
        tmGlob_Lang=new Lang();
        
        $(".js-announce-close").click(function(){ $(".js-announce").hide(); });
        let announces={};
        if (Object.hasOwn(announces, tmGlob_Lang.appliedLang))
        {
          $(".js-announce__message").html(announces[tmGlob_Lang.appliedLang]);
          $(".js-announce").show();
        }
      });
    </script>
  </body>

</html>
