<body class="bg-custom">
  <!-- Google Tag Manager (noscript) -->
  <noscript>
    <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5SMGNX2X" height="0" width="0" style="display:none;visibility:hidden"></iframe>
  </noscript>
  <!-- End Google Tag Manager (noscript) -->

  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-light fixed-top shadow-sm" style="background-color: white;" id="mainNav">
    <div class="container px-5">
      <a class="navbar-brand fw-bold" href="https://fluencytool.my-senpai.com/">Fluency Tool</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" 
              aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        Menu <i class="bi-list"></i>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link" href="https://fluencytool.my-senpai.com/">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="https://fluencytool.my-senpai.com/blog/">Blog</a></li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" 
               data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Tools</a>
            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
              <a class="dropdown-item custom-dropdown-item" href="https://fluencytool.my-senpai.com/readingtool/">Japanese Analyzer</a>
              <a class="dropdown-item custom-dropdown-item" href="https://fluencytool.my-senpai.com/hangman2/">Hangman Kanji Game</a>
              <a class="dropdown-item custom-dropdown-item" href="https://fluencytool.my-senpai.com/kanaquiz/">Kana Challenge Game</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Main Content Container (adds top padding to account for the fixed navbar) -->
  <div class="container app-wrapper" style="padding-top: 80px;">
    <!-- Title and Settings -->
    <header class="d-flex justify-content-between align-items-center">
      <h1 class="text-primary-custom m-0">Kana Quiz</h1>
      <button id="settings_button" class="btn btn-link p-0 ms-2">
        <img src="assets/images/settings.svg" alt="Settings" style="width:30px; height:30px;">
      </button>
    </header>

    <!-- Selection Container -->
    <div id="selection-container">
      <!-- Script Selection -->
      <section class="mb-3">
        <div class="row g-2">
          <div class="col">
            <button id="hiragana_button" class="btn btn-outline-dark w-100">Hiragana</button>
          </div>
          <div class="col">
            <button id="katakana_button" class="btn btn-outline-dark w-100">Katakana</button>
          </div>
        </div>
      </section>
      <!-- Level Selection -->
      <section class="mb-3">
        <div class="row g-2">
          <div class="col">
            <button id="button_single_sounds" class="btn btn-outline-dark w-100">Single Sounds</button>
          </div>
          <div class="col">
            <button id="button_words" class="btn btn-outline-dark w-100">Words</button>
          </div>
        </div>
      </section>
    </div>

    <!-- Start Button -->
    <section class="mb-3">
      <button id="start_button" class="btn btn-outline-dark w-100">Start</button>
    </section>

    <!-- Timer and Level Text -->
    <section class="mb-3 text-center">
      <p id="timer_text" class="text-accent-custom fs-3 mb-2">00:00</p>
    </section>

    <!-- Correct/Incorrect Counter and Level -->
    <section class="mb-3">
      <div class="row">
        <div class="col-12 col-md-4 text-center">
          <p id="level_text_view" class="text-primary-custom fs-5">Level: 1</p>
        </div>
        <div class="col-12 col-md-4 text-center">
          <p id="correct_counter_text" class="text-success fs-5">Correct: 0</p>
        </div>
        <div class="col-12 col-md-4 text-center">
          <p id="incorrect_counter_text" class="text-danger fs-5">Incorrect: 0</p>
        </div>
      </div>
    </section>

    <!-- English Translation -->
    <section class="mb-3 text-center">
      <p id="english_translation" class="fs-5"></p>
    </section>

    <!-- Kana Letter Display -->
    <section class="mb-3 text-center">
      <h2 id="letter_display" class="fw-bold fs-1"></h2>
    </section>

    <!-- Audio Icon -->
    <section class="mb-3 text-center">
      <img id="ic_audio" src="assets/images/ic_audio.svg" alt="Audio Icon" class="img-fluid" style="width:45px; height:45px;">
    </section>

    <!-- Answer Choices -->
    <section class="mb-3 d-none" id="choices_container">
      <!-- Dynamically generated choice buttons will be appended here -->
    </section>
  </div>

  <!-- Modals -->
  <!-- Incorrect Answer Dialog -->
  <div id="dialog_incorrect_answer" class="dialog">
    <img src="assets/images/ic_incorrect_answer.svg" alt="Incorrect Answer" class="dialog-icon">
    <h2 class="dialog-title">Incorrect Answer</h2>
    <p id="tv_question" class="dialog-question">The question will appear here.</p>
    <p id="tv_correct_answer" class="dialog-correct-answer">The correct answer is: </p>
    <div id="heart_container" class="heart-container">
      <img src="assets/images/ic_heart_red.svg" alt="Heart" class="heart">
      <img src="assets/images/ic_heart_red.svg" alt="Heart" class="heart">
      <img src="assets/images/ic_heart_red.svg" alt="Heart" class="heart">
      <img src="assets/images/ic_heart_red.svg" alt="Heart" class="heart">
      <img src="assets/images/ic_heart_red.svg" alt="Heart" class="heart">
    </div>
    <button id="btn_ok" class="dialog-ok-button">OK</button>
  </div>

  <!-- Kana Rows Selection Dialog -->
  <div id="dialog" class="dialog">
    <div class="dialog-content">
      <h2>Select Kana Rows</h2>
      <ul id="row-list" class="list-group mb-3">
        <!-- Dynamically populated rows will go here -->
      </ul>
      <div class="form-check mb-3">
        <input class="form-check-input" type="checkbox" id="select-all-checkbox">
        <label class="form-check-label" for="select-all-checkbox">Select All</label>
      </div>
      <div class="d-grid gap-2">
        <button id="confirm-button" class="btn btn-primary">Confirm</button>
        <button id="close-button" class="btn btn-secondary">Close</button>
      </div>
    </div>
  </div>

  <!-- Game Over Modal -->
  <div id="game-over-dialog" class="modal fade" tabindex="-1" aria-labelledby="game-over-title" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header bg-danger text-white text-center">
          <h5 class="modal-title w-100" id="game-over-title">Game Over</h5>
        </div>
        <div class="modal-body text-center">
          <img src="assets/images/skull.svg" alt="Game Over Icon" class="skull-icon mb-3">
          <div id="dialog_message"></div>
        </div>
        <div class="modal-footer justify-content-center">
          <button id="btn_exit" type="button" class="btn btn-primary" data-bs-dismiss="modal">Exit</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Settings Modal -->
  <div class="modal fade" id="settingsModal" tabindex="-1" aria-labelledby="settingsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header border-0">
          <h5 class="modal-title fw-bold" id="settingsModalLabel">Audio Preferences</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="voicePreferenceForm">
            <fieldset class="mb-3">
              <legend class="small text-muted">Choose a voice:</legend>
              <div class="form-check">
                <input class="form-check-input" type="radio" name="voice" id="voiceMale" value="male">
                <label class="form-check-label" for="voiceMale">Male</label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="radio" name="voice" id="voiceFemale" value="female">
                <label class="form-check-label" for="voiceFemale">Female</label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="radio" name="voice" id="voiceBoth" value="both">
                <label class="form-check-label" for="voiceBoth">Both</label>
              </div>
            </fieldset>
            <hr>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="successSoundToggle">
              <label class="form-check-label" for="successSoundToggle">Play Success Sound</label>
            </div>
          </form>
        </div>
        <div class="modal-footer border-0">
          <button type="button" class="btn btn-primary w-100" id="savePreferences">Save</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Bootstrap JS Bundle -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  <script src="scripts.js"></script>
</body>

</html>
