{% extends "layouts/default.html" %}
{% block title %}{_ "QR Code Generator" _}{% endblock %}
{% block content %}
<form name="qr-form" id="qr-form">
  {{  token | safe  }}
</form>

<div class="container">
  <h1 class="title">QR Generator</h1>

  <div class="columns">
    <div class="column is-half">
      <!-- textarea -->
      <div class="field">
        <label class="label" for="string">Text Data</label>
        <div class="control">
          <textarea class="textarea"
                    id="string"
                    name="string"
                    form="qr-form"
                    hx-post="/qr"
                    hx-include="[name='qr-form']"
                    hx-target="#results"
                    hx-trigger="keyup changed delay:500ms">{{ string }}</textarea>
        </div>
      </div>

      <!-- form options -->
      <div class="columns">
        <!-- form option -->
        <div class="column is-narrow">
          <div class="field is-narrow">
            <label class="label" for="ec-level">EC Level</label>
            <div class="control">
              <div class="select">
                <select id="ec-level"
                        name="ec-level"
                        form="qr-form"
                        hx-post="/qr"
                        hx-include="[name='qr-form']"
                        hx-target="#results"
                        hx-trigger="change throttle:500ms">
                  <option {% if ec-level == "L" %}selected="selected"{% endif %} value="L">L</option>
                  <option {% if ec-level == "M" %}selected="selected"{% endif %} value="M">M</option>
                  <option {% if ec-level == "Q" %}selected="selected"{% endif %} value="Q">Q</option>
                  <option {% if ec-level == "H" %}selected="selected"{% endif %} value="H">H</option>
                </select>
              </div>
            </div>
          </div>
        </div>

        <!-- form option -->
        <div class="column">
          <div class="field">
            <label class="label" for="encoding-mode">Encoding Mode</label>
            <div class="control">
              <div class="select">
                <select id="encoding-mode"
                        name="encoding-mode"
                        form="qr-form"
                        hx-post="/qr"
                        hx-include="[name='qr-form']"
                        hx-target="#results"
                        hx-trigger="change throttle:500ms">
                  <option {% if encoding-mode == "ALPHANUMERIC" %}selected="selected"{% endif %} value="ALPHANUMERIC">ALPHANUMERIC</option>
                  <option {% if encoding-mode == "8-BIT-BYTE" %}selected="selected"{% endif %} value="8-BIT-BYTE">8-BIT-BYTE</option>
                </select>
              </div>
            </div>
          </div>
        </div>

        <!-- form option -->
        <div class="column">
          <div class="field is-narrow">
            <label class="label" for="mask-number">Mask Number</label>
            <div class="control">
              <input class="input"
                     id="mask-number"
                     name="mask-number"
                     form="qr-form"
                     max="7"
                     min="-1"
                     type="number"
                     value="{{ mask-number }}"
                     hx-post="/qr"
                     hx-include="[name='qr-form']"
                     hx-target="#results"
                     hx-trigger="change throttle:500ms">
            </div>
          </div>
        </div>

        <!-- form option -->
        <div class="column">
          <div class="field is-narrow">
            <label class="label" for="min-version">Min. Version</label>
            <div class="control">
              <input class="input"
                     id="min-version"
                     name="min-version"
                     form="qr-form"
                     type="number"
                     min="1"
                     max="40"
                     value="{{ min-version }}"
                     hx-include="[name='qr-form']"
                     hx-post="/qr"
                     hx-target="#results"
                     hx-trigger="change throttle:500ms">
            </div>
          </div>
        </div>
      </div>

      <!-- Submit button -->
      <div class="field">
        <div class="control">
          <button class="button is-primary"
                  hx-post="/qr"
                  hx-include="[name='qr-form']"
                  hx-target="#results"
                  hx-trigger="click">Generate</button>
        </div>
      </div>

      <hr>

      <div class="message is-info">
        <div class="message-header">
          Helpful Links:
        </div>
        <div class="message-body">
          <ul>
            <li><a href="https://www.thonky.com/qr-code-tutorial/alphanumeric-table">Table of Alphanumeric Values</a></li>
          </ul>
        </div>
      </div>
    </div>

    <!-- Right hand side: QR Image -->
    <div class="column is-half">
      <div class="columns is-centered">
        <div class="column is-fullwidth">
          <div class="card image is-4x3" id="results">
            <img src="/public/qr.png" alt="QR Code">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}