<!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="{{ url_for('static', filename='assets/css/main.css') }}"
    />
    <link
      rel="shortcut icon"
      href="{{ url_for('static', filename='favicon.ico') }}"
    />
    <style>
      #loader-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #1a1a1a; /* Dark background */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 9999; /* Ensures it stays on top of everything */
        transition:
          opacity 0.5s ease,
          visibility 0.5s ease;
      }

      /* The spinning visual indicator */
      .loader {
        width: 50px;
        height: 50px;
        border: 5px solid #333;
        border-top: 5px solid #3498db; /* Blue accent color */
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }

      /* Descriptive status text */
      .loader-text {
        color: #ffffff;
        font-family: sans-serif;
        margin-top: 15px;
        font-size: 14px;
        letter-spacing: 1px;
      }

      /* Keyframe for rotation animation */
      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }

      /* Smooth fade-out state triggered by JS */
      .loader-hidden {
        opacity: 0;
        visibility: hidden;
      }

      .no-wrap-scroll {
        white-space: nowrap; /* Prevents text from breaking into new lines */
        overflow-x: auto; /* Adds a horizontal scrollbar when content overflows */
        width: 100%; /* Or set a specific max-width/fixed width */
      }
    </style>
  </head>

  <body class="is-preload">
    <!-- Full-screen preloader container -->
    <div id="loader-wrapper">
      <div class="loader"></div>
      <p class="loader-text">Loading, Generating Audios, please wait...</p>
    </div>

    <!-- 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>Delete unwanted Rows and Modify definitions</strong>
          </p>
          <form id="text_form" method="POST">
            <div class="fields">
              <div id="table" class="field">
                <textarea
                  class="no-wrap-scroll"
                  name="text"
                  id="text"
                  rows="15"
                ></textarea>
              </div>
            </div>
            <ul class="actions">
              <li>
                <input
                  id="process_button"
                  type="submit"
                  value="Process"
                  class="button primary"
                />
              </li>
            </ul>
          </form>
        </div>

        <footer>
          <form id="settings_form" method="GET">
            <ul class="items">
              <li>
                <h3>Language</h3>
                <select id="language_id" name="language_id">
                  {% if 'en' in languages %}
                  <option value="en">English</option>
                  {% endif %} {% if 'es' in languages %}
                  <option value="es">Spanish</option>
                  {% endif %} {% if 'ru' in languages %}
                  <option value="ru">Russian</option>
                  {% endif %} {% if 'fr' in languages %}
                  <option value="fr">French</option>
                  {% endif %}
                </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="{{ url_for('mainapp.app') }}">Back</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="{{ url_for('static', filename='assets/js/jquery.min.js') }}/"></script>
    <script src="{{ url_for('static', filename='assets/js/jquery.scrolly.min.js') }}/"></script>
    <script src="{{ url_for('static', filename='assets/js/browser.min.js') }}/"></script>
    <script src="{{ url_for('static', filename='assets/js/breakpoints.min.js') }}/"></script>
    <script src="{{ url_for('static', filename='assets/js/util.js') }}/"></script>
    <script src="{{ url_for('static', filename='assets/js/main.js') }}/"></script>
    <script src="{{ url_for('static', filename='assets/js/app.js') }}/"></script>
    <script>
      // Quizlet is disabled for the moment
      $("#out2").prop('disabled', true);
      //Get datafor the controls
      const serverData = {{ data | tojson }};
      if (serverData.state === "new") {
        $("#process_button").prop('disabled', true);
        $('#text').val(serverData.text);
      }
      if (serverData.state === "complete" ) {
        // Set values to inputs
        if (serverData.language_id !== "" ) {
          $('#language_id').val(serverData.language_id);
          $('#language_id').prop('readonly', true);
        }
        $('#text').val(serverData.text);
      }
      // Loader while procesing
      $('#text_form').on('submit', function(e) {
        // Add the class that triggers the CSS fade transition
        $("#loader-wrapper").removeClass("loader-hidden");
          document.cookie = 'download_started=; Max-Age=0; path=/';
          const checkDownload = setInterval(() => {
          if (document.cookie.includes('download_started=true')) {
            clearInterval(checkDownload);
            console.log('File successfully downloaded!');
            $("#loader-wrapper").addClass("loader-hidden");
            this.disabled = false;
            document.cookie = 'download_started=; Max-Age=0; path=/';
              }
        }, 500);
      });
      $(window).on("load", function() {
        $("#loader-wrapper").addClass("loader-hidden");
      });
    </script>
  </body>
</html>
