<!doctype html>

<html>
  <head>
    <title>HSK card creator</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, user-scalable=no"
    />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="stylesheet" href="static/assets/css/main.css" />
    <link
      rel="shortcut icon"
      href="{{ url_for('static', filename='favicon.ico') }}"
    />
  </head>

  <body class="is-preload">
    <!-- Wrapper -->
    <div id="wrapper">
      <!-- Section -->
      <section id="first" style="padding-top: 3em">
        <header>
          <h2>Select the deck type</h2>
        </header>

        <div id="text_area" class="content">
          <p>
            <strong>Paste here the word list</strong>
          </p>
          <form id="taxt_form" method="POST">
            <div class="fields">
              <div class="field">
                <textarea name="text" id="text" rows="15"></textarea>
              </div>
            </div>
            <ul class="actions">
              <li>
                <input
                  id="process"
                  type="submit"
                  value="Process"
                  class="button primary"
                />
              </li>
            </ul>
          </form>
        </div>

        <footer>
          <form action="/app">
            <ul class="items">
              <li>
                <h3>Deck Type</h3>
                <div>
                  <input
                    type="radio"
                    id="type1"
                    name="deck_type"
                    value="dictionary"
                    checked
                  />
                  <label for="type1">Dictionary Deck</label>
                </div>
                <div>
                  <input
                    type="radio"
                    id="type2"
                    name="deck_type"
                    value="phrases"
                  />
                  <label for="type2">Phrases List</label>
                </div>
                <div>
                  <input
                    type="radio"
                    id="type3"
                    name="deck_type"
                    value="paragraph"
                  />
                  <label for="type3">Paragraph Dictation</label>
                </div>
              </li>
              <li>
                <h3>Language</h3>
                <select id="language" name="language">
                  <option value="en">English</option>
                  <option value="es">Spanish</option>
                  <option value="ru">Russian</option>
                  <option value="fr">French</option>
                </select>
              </li>
              <li>
                <h3>Output</h3>
                <div>
                  <input
                    type="radio"
                    id="out1"
                    name="output_type"
                    value="anki"
                    checked
                  />
                  <label for="out1">Anki Deck</label>
                </div>
                <div>
                  <input
                    type="radio"
                    id="out2"
                    name="output_type"
                    value="quiz"
                  />
                  <label for="out2">Quizlet deck</label>
                </div>
              </li>
              <li>
                <input
                  id="settings_button"
                  type="submit"
                  value="Lock-in Settings"
                />
                <br />
                <a href="/app">Reset Settings</a>
              </li>
            </ul>
          </form>
        </footer>
      </section>

      <!-- Copyright -->
      <div class="copyright">
        &copy; HSK creator. Wolfang Torres. All rights reserved 2026. Design:
        <a href="https://html5up.net">HTML5 UP</a>.
      </div>
    </div>

    <!-- Scripts -->
    <script src="static/assets/js/jquery.min.js"></script>
    <script src="static/assets/js/jquery.scrolly.min.js"></script>
    <script src="static/assets/js/browser.min.js"></script>
    <script src="static/assets/js/breakpoints.min.js"></script>
    <script src="static/assets/js/util.js"></script>
    <script src="static/assets/js/main.js"></script>
    <script src="static/assets/js/app.js"></script>
    <script>
      const serverData = {{ data | tojson }};
      if (serverData.state === "new") {
        $("#text_area").hide();
        $("#text").prop('disabled', true);
        $("#process").prop('disabled', true);
      }
      if (serverData.state === "complete") {
        // Set values to inputs
        if (serverData.deck_type === "dictionary") {
          $('#type1').prop('checked', true);
        }
        if (serverData.deck_type === "phrases") {
          $('#type2').prop('checked', true);
        }
        if (serverData.deck_type === "paragraph") {
          $('#type3').prop('checked', true);
        }
        $('#language').val(serverData.language);
        if (serverData.output_type === "anki") {
          $('#out1').prop('checked', true);
        }
        if (serverData.output_type === "quiz") {
          $('#out2').prop('checked', true);
        }
        // Disable inputs
        $('#type1').prop('disabled', true);
        $('#type2').prop('disabled', true);
        $('#type3').prop('disabled', true);
        $('#language').prop('disabled', true);
        $('#out1').prop('disabled', true);
        $('#out2').prop('disabled', true);
        $("#settings_button").prop('disabled', true);
      }

      $('#taxt_form').addEventListener('submit', function(e) {
        // Get current URL query parameters
        const currentParams = new URLSearchParams(window.location.search);
        // Loop through current parameters and append them to the form
        currentParams.forEach((value, key) => {
          // Check if the input already exists to prevent duplicates
          if (!this.querySelector(`input[name="${key}"]`)) {
            const hiddenInput = document.createElement('input');
            hiddenInput.type = 'hidden';
            hiddenInput.name = key;
            hiddenInput.value = value;
            this.appendChild(hiddenInput);
            }
        });
      });
    </script>
  </body>
</html>
