{% extends "layout.html" %}
{% block body %}

<img style="width: 100%; border-radius: 8px;"
     src="/welcome/static/img/banner.png"
     alt="Debian Image banner" />

<!-- This odd, yet very efficient mechanism ensures that translations,
     settings and summaries for each page gets loaded -->
<div hx-get="/users" hx-target="#none" hx-trigger="load"></div>
<div hx-get="/disks" hx-target="#none" hx-trigger="load"></div>
<div hx-get="/software" hx-target="#none" hx-trigger="load"></div>
<div hx-get="/summary" hx-target="#none" hx-trigger="load"></div>
<!-- TODO: Add hook to fix next tab again after loading summary -->

<div style="display: none;" id="none"></div>

<p><b> {{ string_dict['welcome_text'] }} </b></p>
<p>{{ string_dict['confirm_text'] }} </p> <br />

<!-- pywebview api example
<button onclick='pywebview.api.log("Woah dude")'>Click me</button>
-->

<div style="left: 25px; display: flex; align-items: center; gap: 1rem;">
  <img style="width: 80px;" src="/welcome/static/img/lang_w.svg" alt="Language icon" />
  <form action="/welcome" method="POST" style="display: flex; flex-direction: column; gap: 0.5rem;">
  <label for="lang">{{ string_dict['language_text'] }}</label>
  <div class="control is-link">
    <div class="select">
      <select id="lang" name="lang" hx-post="/welcome" hx-target="body" style="width: 220px;">
          {% for lang in string_dict['lang_list'] %}
        <option value="{{ lang }}" {% if lang == selected_lang %} selected {% endif %}>
          {{ string_dict['lang_list'][lang] }}
        </option>
        {% endfor %}
      </select>
    </div>
  </div>
</form>
</div>

<br />

<div style="left: 25px; display: flex; align-items: center; gap: 1rem;">
  <img style="width: 80px;" src="/welcome/static/img/keyboard.svg" alt="Language icon" />
  <form action="/welcome" method="POST" style="display: flex; flex-direction: column; gap: 0.5rem;">
  <label for="keyboard">{{ string_dict['keylayout_text'] }}</label>
  <div class="control is-link">
    <div class="select">
    <select name="keyboard" hx-post="/welcome" hx-target="body" style="width: 220px;">
        <option value="al" {% if keyboard == "al" %} selected {% endif %}>al - Albanian</option>
        <option value="et" {% if keyboard == "et" %} selected {% endif %}>et - Amharic</option>
		<option value="am" {% if keyboard == "am" %} selected {% endif %}>am - Armenian</option>
		<option value="ara" {% if keyboard == "ara" %} selected {% endif %}>ara - Arabic</option>
		<option value="eg" {% if keyboard == "eg" %} selected {% endif %}>eg - Arabic (Egypt)</option>
		<option value="iq" {% if keyboard == "iq" %} selected {% endif %}>iq - Arabic (Iraq)</option>
		<option value="ma" {% if keyboard == "ma" %} selected {% endif %}>ma - Arabic (Morocco)</option>
		<option value="sy" {% if keyboard == "sy" %} selected {% endif %}>sy - Arabic (Syria)</option>
		<option value="az" {% if keyboard == "az" %} selected {% endif %}>az - Azerbaijani</option>
		<option value="ml" {% if keyboard == "ml" %} selected {% endif %}>ml - Bambara</option>
		<option value="bd" {% if keyboard == "bd" %} selected {% endif %}>bd - Bangla</option>
		<option value="by" {% if keyboard == "by" %} selected {% endif %}>by - Belarusian</option>
		<option value="be" {% if keyboard == "be" %} selected {% endif %}>be - Belgian</option>
		<option value="dz" {% if keyboard == "dz" %} selected {% endif %}>dz - Berber (Algeria, Latin)</option>
		<option value="ba" {% if keyboard == "ba" %} selected {% endif %}>ba - Bosnian</option>
		<option value="brai" {% if keyboard == "brai" %} selected {% endif %}>brai - Braille</option>
		<option value="bg" {% if keyboard == "bg" %} selected {% endif %}>bg - Bulgarian</option>
		<option value="mm" {% if keyboard == "mm" %} selected {% endif %}>mm - Burmese</option>
		<option value="cn" {% if keyboard == "cn" %} selected {% endif %}>cn - Chinese</option>
		<option value="hr" {% if keyboard == "hr" %} selected {% endif %}>hr - Croatian</option>
		<option value="cz" {% if keyboard == "cz" %} selected {% endif %}>cz - Czech</option>
		<option value="dk" {% if keyboard == "dk" %} selected {% endif %}>dk - Danish</option>
		<option value="af" {% if keyboard == "af" %} selected {% endif %}>af - Dari</option>
		<option value="mv" {% if keyboard == "mv" %} selected {% endif %}>mv - Dhivehi</option>
		<option value="nl" {% if keyboard == "nl" %} selected {% endif %}>nl - Dutch</option>
		<option value="bt" {% if keyboard == "bt" %} selected {% endif %}>bt - Dzongkha</option>
		<option value="au" {% if keyboard == "au" %} selected {% endif %}>au - English (Australia)</option>
		<option value="cm" {% if keyboard == "cm" %} selected {% endif %}>cm - English (Cameroon)</option>
		<option value="gh" {% if keyboard == "gh" %} selected {% endif %}>gh - English (Ghana)</option>
		<option value="nz" {% if keyboard == "nz" %} selected {% endif %}>nz - English (New Zealand)</option>
		<option value="ng" {% if keyboard == "ng" %} selected {% endif %}>ng - English (Nigeria)</option>
		<option value="za" {% if keyboard == "za" %} selected {% endif %}>za - English (South Africa)</option>
		<option value="gb" {% if keyboard == "gb" %} selected {% endif %}>gb - English (UK)</option>
        <option value="us" {% if keyboard == "us" %} selected {% endif %}>us - English (US)</option>
		<option value="epo" {% if keyboard == "epo" %} selected {% endif %}>epo - Esperanto</option>
		<option value="ee" {% if keyboard == "ee" %} selected {% endif %}>ee - Estonian</option>
		<option value="fo" {% if keyboard == "fo" %} selected {% endif %}>fo - Faroese</option>
		<option value="ph" {% if keyboard == "ph" %} selected {% endif %}>ph - Filipino</option>
		<option value="fi" {% if keyboard == "fi" %} selected {% endif %}>fi - Finnish</option>
		<option value="fr" {% if keyboard == "fr" %} selected {% endif %}>fr - French</option>
		<option value="ca" {% if keyboard == "ca" %} selected {% endif %}>ca - French (Canada)</option>
		<option value="cd" {% if keyboard == "cd" %} selected {% endif %}>cd - French (Democratic Republic of the Congo)</option>
		<option value="tg" {% if keyboard == "tg" %} selected {% endif %}>tg - French (Togo)</option>
		<option value="ge" {% if keyboard == "ge" %} selected {% endif %}>ge - Georgian</option>
		<option value="de" {% if keyboard == "de" %} selected {% endif %}>de - German</option>
		<option value="at" {% if keyboard == "at" %} selected {% endif %}>at - German (Austria)</option>
		<option value="ch" {% if keyboard == "cn" %} selected {% endif %}>ch - German (Switzerland)</option>
		<option value="gr" {% if keyboard == "gr" %} selected {% endif %}>gr - Greek</option>
		<option value="il" {% if keyboard == "il" %} selected {% endif %}>il - Hebrew</option>
		<option value="hu" {% if keyboard == "hu" %} selected {% endif %}>hu - Hungarian</option>
		<option value="is" {% if keyboard == "is" %} selected {% endif %}>is - Icelandic</option>
		<option value="in" {% if keyboard == "in" %} selected {% endif %}>in - Indian</option> 
		<option value="id" {% if keyboard == "id" %} selected {% endif %}>id - Indonesian (Latin)</option>
		<option value="ie" {% if keyboard == "ie" %} selected {% endif %}>ie - Irish</option>
		<option value="it" {% if keyboard == "it" %} selected {% endif %}>it - Italian</option>
		<option value="jp" {% if keyboard == "jp" %} selected {% endif %}>jp - Japanese</option>
		<option value="kz" {% if keyboard == "kz" %} selected {% endif %}>kz - Kazakh</option>
		<option value="kh" {% if keyboard == "kh" %} selected {% endif %}>kh - Khmer (Cambodia)</option>
		<option value="kr" {% if keyboard == "kr" %} selected {% endif %}>kr - Korean</option>
		<option value="kg" {% if keyboard == "kg" %} selected {% endif %}>kg - Kyrgyz</option>
		<option value="la" {% if keyboard == "la" %} selected {% endif %}>la - Lao</option>
		<option value="lv" {% if keyboard == "lv" %} selected {% endif %}>lv - Latvian</option>
		<option value="lt" {% if keyboard == "lt" %} selected {% endif %}>lt - Lithuanian</option>
		<option value="mk" {% if keyboard == "mk" %} selected {% endif %}>mk - Macedonian</option>
		<option value="my" {% if keyboard == "my" %} selected {% endif %}>my - Malay (Jawi, Arabic Keyboard)</option>
		<option value="mt" {% if keyboard == "mt" %} selected {% endif %}>mt - Maltese</option>
		<option value="md" {% if keyboard == "md" %} selected {% endif %}>md - Moldavian</option>
		<option value="mn" {% if keyboard == "mn" %} selected {% endif %}>mn - Mongolian</option>
		<option value="me" {% if keyboard == "me" %} selected {% endif %}>me - Montenegrin</option>
		<option value="np" {% if keyboard == "np" %} selected {% endif %}>np - Nepali</option>
		<option value="gn" {% if keyboard == "gn" %} selected {% endif %}>gn - N'Ko (AZERTY)</option>
		<option value="no" {% if keyboard == "no" %} selected {% endif %}>no - Norwegian</option>
		<option value="ir" {% if keyboard == "ir" %} selected {% endif %}>ir - Persian</option>
		<option value="pl" {% if keyboard == "pl" %} selected {% endif %}>pl - Polish</option>
		<option value="pt" {% if keyboard == "pt" %} selected {% endif %}>pt - Portuguese</option>
		<option value="br" {% if keyboard == "br" %} selected {% endif %}>br - Portuguese (Brazil)</option>
		<option value="ro" {% if keyboard == "ro" %} selected {% endif %}>ro - Romanian</option>
		<option value="ru" {% if keyboard == "ru" %} selected {% endif %}>ru - Russian</option>
		<option value="rs" {% if keyboard == "rs" %} selected {% endif %}>rs - Serbian</option>
		<option value="lk" {% if keyboard == "lk" %} selected {% endif %}>lk - Sinhala (phonetic)</option>
		<option value="sk" {% if keyboard == "sk" %} selected {% endif %}>sk - Slovak</option>
		<option value="si" {% if keyboard == "si" %} selected {% endif %}>si - Slovenian</option>
		<option value="es" {% if keyboard == "es" %} selected {% endif %}>es - Spanish</option>
		<option value="latam" {% if keyboard == "latam" %} selected {% endif %}>latam - Spanish (Latin American)</option>
		<option value="ke" {% if keyboard == "ke" %} selected {% endif %}>ke - Swahili (Kenya)</option>
		<option value="tz" {% if keyboard == "tz" %} selected {% endif %}>tz - Swahili (Tanzania)</option>
		<option value="se" {% if keyboard == "se" %} selected {% endif %}>se - Swedish</option>
		<option value="tw" {% if keyboard == "tw" %} selected {% endif %}>tw - Taiwanese</option>
		<option value="tj" {% if keyboard == "tj" %} selected {% endif %}>tj - Tajik</option>
		<option value="th" {% if keyboard == "th" %} selected {% endif %}>th - Thai</option>
		<option value="bw" {% if keyboard == "bw" %} selected {% endif %}>bw - Tswana</option>
		<option value="tm" {% if keyboard == "tm" %} selected {% endif %}>tm - Turkmen</option>
		<option value="tr" {% if keyboard == "tr" %} selected {% endif %}>tr - Turkish</option>
		<option value="ua" {% if keyboard == "ua" %} selected {% endif %}>ua - Ukrainian</option>
		<option value="pk" {% if keyboard == "pk" %} selected {% endif %}>pk - Urdu (Pakistan)</option>
		<option value="uz" {% if keyboard == "uz" %} selected {% endif %}>uz - Uzbek</option>
		<option value="vn" {% if keyboard == "vn" %} selected {% endif %}>vn - Vietnamese</option>
		<option value="sn" {% if keyboard == "sn" %} selected {% endif %}>sn - Wolof</option>
      </select>
    </div>
  </div>
</form>
</div>

{% endblock %}
