{{ extends "global/Page.html" }}
{{ block title }}
<h3 align="center">
</h3>

{{ endblock }}


{{ block styles }}

<style>
  .form-control {
    width: 300px; /* 入力フォームの幅を設定 */
    margin: 0 auto; /* 入力フォームを水平中央に配置 */
    text-align: center; /* 入力フォームのテキストを中央寄せにする */
  }
  .default-text {
    color: #d3d0d0; /* 薄い文字の色 */
  }
</style>
{{ endblock }}



{{ block content }}
<div class="upper-right"><br>
  {{ if group.treatment == 1 }}
    {{ if group.is_MoneyFirst == 1 }}
    <span style="cursor: pointer;" onclick="openInNewWindow('https://drive.google.com/file/d/1lO0EY8hLs_BPeMEJADrbk3-UCfobYMFj/view?usp=share_link')">◯</span>
    {{ else }}
    <span style="cursor: pointer;" onclick="openInNewWindow('https://drive.google.com/file/d/143aV2666WR7-SFRV1lUr2P8OHa9shRU5/view?usp=share_link')">◯$</span>
    {{ endif }}
  {{ elif group.treatment == 2 }}
    <span style="cursor: pointer;" onclick="openInNewWindow('https://drive.google.com/file/d/1JyymGpVQqhIrK7f3NA_SKZqGCc-pnJGr/view?usp=share_link')">△</span>
  {{ elif group.treatment == 3 }}
    <span style="cursor: pointer;" onclick="openInNewWindow('https://drive.google.com/file/d/1drTrIrv5z5ASiASQ1q_Ac6spySAIRH14/view?usp=share_link')">@</span>
  {{ elif group.treatment == 4 }}
    <span style="cursor: pointer;" onclick="openInNewWindow('https://drive.google.com/file/d/18b0qrjULz-OqFpZ1BcpE4i_INeWyo2p3/view?usp=share_link')">☆</span>
  {{ else }}
    <span style="cursor: pointer;" onclick="openInNewWindow('https://drive.google.com/file/d/1N_eOocyaqlqLTrbSTz3ILGsSYX76iAec/view?usp=share_link')">#</span>
  {{ endif }}
</div>

<!-- Embedded video -->
<div align="center">
    {{ if group.treatment == 1 }}
      {{ if group.is_MoneyFirst == 1 }}
        <iframe width="855" height="480" src="https://www.youtube.com/embed/xG4D9Eh3FzA?si=Au3sgMAQcA0_bAAz" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>    
      {{ else }}
        <iframe width="855" height="480" src="https://www.youtube.com/embed/TzBo3-TBkwo?si=jm4SzOG3mweQkAyj" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
      {{ endif }}
    {{ elif group.treatment == 2 }}
        <iframe width="855" height="480" src="https://www.youtube.com/embed/eN30HIe0fd8?si=HWtw31lUnNBE7b6D" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
    {{ elif group.treatment == 3 }}
        <iframe width="855" height="480" src="https://www.youtube.com/embed/lKrlwEtScpE?si=6AspDibH3exCBlJB" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
    {{ elif group.treatment == 4 }}
        <iframe width="855" height="480" src="https://www.youtube.com/embed/KPlj440s7Yk?si=uiOmLbn6ZTXwvagX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
    {{ else}}
        <iframe width="855" height="480" src="https://www.youtube.com/embed/SrycUHA4RW4?si=3C6XToyCra-I-Doz" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
    {{ endif }}

  <!-- Next button -->
  <br><br>
    <input type="text" name = "711" class="form-control default-text" id="passwordInput" required value="動画内で説明するパスワードを入力" 
      onfocus="if(this.value == '動画内で説明するパスワードを入力') { this.value = ''; this.classList.remove('default-text'); }" 
      onblur="if(this.value == '') { this.value = '動画内で説明するパスワードを入力'; this.classList.add('default-text'); }"
    >


<br>

  <div align = "center">
        <button id="buttonA">次へ</button>
            <div class="popup-container">
                <button type="button" id="buttonB">次へ</button>
                <div class="popup">
                　正しいパスワードを入力すると「次へ」が表示されます
                </div>
            </div><button id="hidden_submit_button" type="submit" hidden="true"></button>
    </div>

    




  {{ if is_defined('view.is_debug') and view.is_debug }}

  <!-- Cheatボタン -->
  <br> <br>
  <br><button id="cheatButton" class="btn btn-primary">Cheat</button>
  {{ endif}}

</div>
{{ endblock }}



{{ block scripts }}
<script>

function openInNewWindow(url) {
    // 新しいウィンドウのサイズや位置などの設定
    var newWindow = window.open(url, "_blank", "width=900,height=600,top=100,left=100");
    // 新しいウィンドウのフォーカスを設定
    if (newWindow) {
        newWindow.focus();
    }
}
        document.querySelector('input[name="711"]').addEventListener('input', function() {
            var passValue = this.value;
            if (passValue === '711') {
                // If input value is '711', change buttonB to buttonA
                document.getElementById('buttonB').style.display = 'none';
                document.getElementById('buttonA').style.display = 'inline-block';
                // Hide error message
            } else {
            }
        });

      function nextPage() {
      oTree.next();
  }
</script>



{{ endblock }}