{% 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>en-us</option>
      <option>en-uk</option>
      </select>
    </div>
  </div>
</form>
</div>

{% endblock %}