<!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>
      /* Base tree styling */
      .tree {
        --spacing: 1.5rem;
        --radius: 4px;
        padding-left: 1rem;
      }

      .tree ul {
        margin-left: calc(var(--spacing) / -2);
        padding-left: 0;
        list-style: none;
      }

      .tree li {
        display: block;
        position: relative;
        padding-left: calc(var(--spacing) * 1.5);
        margin-top: 0.25rem;
      }

      /* Vertical connecting lines */
      .tree ul li::before {
        content: "";
        position: absolute;
        left: calc(var(--spacing) / 2);
        top: 0;
        bottom: 0;
        border-left: 1px solid #ccc;
      }

      /* Hide the vertical line after the last item
      .tree ul li:last-child::before {
        display: none;
      } */

      /* Horizontal branch lines */
      .tree ul li::after {
        content: "";
        position: absolute;
        left: calc(var(--spacing) / 2);
        top: calc(var(--spacing) / 2);
        width: calc(var(--spacing) * 0.8);
        border-top: 1px solid #ccc;
      }

      /* Folder Summary Customization */
      .tree summary {
        display: block;
        cursor: pointer;
        outline: none;
        font-weight: bold;
      }

      /* Custom toggle markers using pseudo-elements */
      .tree details[closed] > summary::before {
        content: "📁 ";
        display: inline-block;
      }

      .tree details[open] > summary::before {
        content: "📂 ";
        display: inline-block;
      }

      /* File items customization */
      .tree .file::before {
        content: "📄 ";
      }

      .tree .file {
        font-weight: normal;
        display: inline-block;
      }
    </style>
  </head>

  <body class="is-preload">
    <!-- Wrapper -->
    <div id="wrapper">
      <!-- Section -->
      <section id="first">
        <!-- File broser -->
        <header>
          <h2>Files</h2>
        </header>

        <div class="content">
          <h3>Current Path: {{ listing_path or "-" }}</h3>
          <br />
          <ul class="items">
            <li>
              <form id="text_form" method="POST">
                <div class="fields">
                  <div>
                    <input type="radio" id="type1" name="type" value="file" />
                    <label for="type1">Create File</label>
                    <input type="radio" id="type2" name="type" value="folder" />
                    <label for="type2">Create Folder</label>
                  </div>
                  <br />
                  <label for="name">File Name:</label>
                  <input type="text" id="name" name="name" required size="10" />
                  <input
                    id="create_file_button"
                    type="submit"
                    value="Create"
                    class="button primary"
                  />
                </div>
              </form>
              <br />
              <strong>Input files:</strong>
              <ul>
                {% for file in file_data['input'] %}
                <li>
                  {% if file.suffixes %}
                  <a
                    href="{{ url_for('mainapp.create', listing_path=file , deck_type=file.suffixes[0][1:]) }}"
                  >
                    {{ file.name }}
                  </a>
                  {% else %} {{ file.name }} {% endif %}
                </li>
                {% endfor %}
              </ul>
            </li>
            <li>
              <strong>Resources files:</strong>
              <ul>
                {% for file in file_data['resources'] %} {% if file.suffix ==
                ".wav" %}
                <audio controls>
                  <source
                    src="{{ url_for('mainapp.resource', listing_path=file) }}"
                    type="audio/wav"
                  />
                  Your browser does not support the audio element.
                </audio>
                {% elif file.suffix == ".tsv" %}
                <li>
                  <a href="{{ url_for('mainapp.process', listing_path=file) }}"
                    >{{ file.name }}</a
                  >
                </li>
                {% else %}
                <li>{{ file.name }}</li>
                {% endif %} {% endfor %}
              </ul>
            </li>
            <li>
              <strong>Output files:</strong>
              <ul>
                {% for file in file_data['output'] %}
                <li>
                  {% if file.suffix %}
                  <a href="{{ url_for('mainapp.download', listing_path=file) }}"
                    >{{ file.name }}</a
                  >
                  {% else %} {{ file.name }} {% endif %}
                </li>
                {% endfor %}
              </ul>
            </li>
          </ul>
        </div>

        <footer>
          <div class="tree">
            <ul>
              <!-- Root Folder -->
              {% for file1 in root_files %}
              <li>
                <details
                  {%
                  if
                  root_files[file1]
                  %}
                  open{%
                  else
                  %}closed{%
                  endif
                  %}
                >
                  <summary>
                    <a
                      href="{{ url_for('mainapp.file_list', listing_path=file1) }}"
                      >{{ file1 }}</a
                    >
                  </summary>
                  <ul>
                    {% for file2 in root_files[file1] %} {% if file2.suffix %}
                    <li class="file">
                      <a
                        href="{{ url_for('mainapp.file_list', listing_path=file2) }}#first"
                        >{{ file2.name }}</a
                      >
                    </li>
                    {% else %}
                    <li>
                      <details
                        {%
                        if
                        root_files[file1][file2]
                        %}
                        open{%
                        else
                        %}closed{%
                        endif
                        %}
                      >
                        <summary>
                          <a
                            href="{{ url_for('mainapp.file_list', listing_path=file2) }}#first"
                            >{{ file2.name }}</a
                          >
                        </summary>
                        <ul>
                          {% for file3 in root_files[file1][file2] %}
                          <li class="file">
                            <a
                              href="{{ url_for('mainapp.file_list', listing_path=file3) }}#first"
                              >{{ file3.name }}</a
                            >
                          </li>
                          {% endfor %}
                        </ul>
                      </details>
                    </li>
                    {% endif %} {% endfor %}
                  </ul>
                </details>
              </li>
              {% endfor %}
            </ul>
          </div>
        </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></script>
  </body>
</html>
