{% extends "base.html" %}
{% block content %}
    <div class="seperate"><canvas id="canvas"></canvas></div>

    <form action="/games/5" method="POST">
    <div class="row h-100">
    <!-- Display panels on the left -->
        <div class="col-3 h-100" id="display-game5">

            <div class="row card bg-light">
                <div class="card-header">
                    <span>Magnetization</span>
                        <div type="button" class="btn btn-sm shadow-none"
                             data-mdb-container="body"
                             data-mdb-toggle="popover"
                             data-mdb-placement="right"
                             title="Magnetization (M)"
                             data-mdb-content="Net magnetic dipole moment that develops when protons are placed in the main magnetic field.
                                              At equilibrium, M is parallel to B0. Both are along the z (top-down) direction in this graph.">
                                    <i class="bi bi-question-circle-fill"></i>
                                </div>

                </div>
                <div class="card-body">
                    <div id='chart-spin' class='chart'></div>
                </div>
            </div>

            <div class="row card">
                <div class="card-header">
                    <span>Signal (emf)</span>
                        <div type="button" class="btn btn-sm shadow-none"
                             data-mdb-container="body"
                             data-mdb-toggle="popover"
                             data-mdb-placement="right"
                             title="Electromotive Force (emf)"
                             data-mdb-content="Voltage that develops across the wire loop when the magnetic flux that passes through it changes in time;
                                              this change can be caused by rotating / precessing magnetization. The voltage waveform is the raw signal that
                                              will be converted to an MR image.">
                                    <i class="bi bi-question-circle-fill"></i>
                                </div>
                </div>
                <div class="card-body">
                  <div id='chart-signal' class='chart'></div>
                </div>
            </div>
        </div>

    <!-- Input fields -->
        <div class="col col-9">
            <div class="row h-50" id="fields-game5">
                    {{ template_game_form.hidden_tag() }}
                    <div class="col col-6 h-100">
                        <div class="row h-25">
                        <div class="card">
                                 <div class="card-header">
                                     <span class="h4">Main field (Gauss)</span>
                                      <div type="button" class="btn btn-sm shadow-none"
                                           data-mdb-container="body"
                                           data-mdb-toggle="popover"
                                           data-mdb-placement="right"
                                           title="Main field"
                                           data-mdb-content="Also called B0, it is a strong magnetic field that generates a net magnetization in the imaged subject. The main field needs to stay on throughout the experiment.">
                                            <i class="bi bi-question-circle-fill"></i>
                                      </div>
                                 </div>
                                 <div class="card-body row">
                                     <div class="col-4">
                                        {{ template_game_form.b0_onoff_field(class="btn-check",id="b0_on",autocomplete="off",checked=session['game5']['b0_on']) }}
                                        <label class="btn btn-outline-success"  data-mdb-toggle="tooltip"
                                                                             data-mdb-placement="top"
                                                                             title="B0 on/off" for="b0_on">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" fill="currentColor" class="bi bi-magnet-fill" viewBox="0 0 16 16">
                                          <path d="M15 12h-4v3h4v-3ZM5 12H1v3h4v-3ZM0 8a8 8 0 1 1 16 0v8h-6V8a2 2 0 1 0-4 0v8H0V8Z"/>
                                        </svg>
                                        </label>
                                     </div>
                                     <div class="col-8">
                                         <div class="row">
                                         {{ template_game_form.b0_field(class="form-range",id='b0',step=10, value=1e4*session['game5']['b0']) }}
                                         </div>
                                          <div class="ticks text-primary">
                                              {% for b in [0,20,40,60,80,100] %}
                                               <span class="tick">{{ b }}</span>
                                              {% endfor %}
                                          </div>
                                     </div>
                                 </div>
                            </div>
                        </div>
                        <div class="row h-50 card">
                            <h4 class="card-header">
                                {{ template_game_form.tx_onoff_field(class="btn-check",id="tx-button",autocomplete="off",
                                                                     checked=session['game5']['tx_on']) }}

                                <label class="btn btn-outline-danger" data-mdb-toggle="tooltip"
                                                                             data-mdb-placement="top"
                                                                             title="RF transmission on/off" for="tx-button">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" fill="currentColor" class="bi bi-megaphone-fill" viewBox="0 0 16 16">
                                        <path d="M13 2.5a1.5 1.5 0 0 1 3 0v11a1.5 1.5 0 0 1-3 0v-11zm-1 .724c-2.067.95-4.539 1.481-7 1.656v6.237a25.222 25.222 0 0 1 1.088.085c2.053.204 4.038.668 5.912 1.56V3.224zm-8 7.841V4.934c-.68.027-1.399.043-2.008.053A2.02 2.02 0 0 0 0 7v2c0 1.106.896 1.996 1.994 2.009a68.14 68.14 0 0 1 .496.008 64 64 0 0 1 1.51.048zm1.39 1.081c.285.021.569.047.85.078l.253 1.69a1 1 0 0 1-.983 1.187h-.548a1 1 0 0 1-.916-.599l-1.314-2.48a65.81 65.81 0 0 1 1.692.064c.327.017.65.037.966.06z"/></svg>
                                 </label>

                                <span>RF pulse</span>
                             <div type="button" class="btn btn-sm shadow-none"
                                  data-mdb-container="body"
                                  data-mdb-toggle="popover"
                                  data-mdb-placement="bottom"
                                  title="Radiofrequency Pulse"
                                  data-mdb-content="The RF pulses are a short-lived and high frequency magnetic fields that sit within the x-y plane. They can rotate the magnetization to different degrees.">
                                  <i class="bi bi-question-circle-fill"></i>
                             </div>
                            </h4>
                            <!-- TODO fix this! -->
                            <div class="card-body row h-50">
                                <div class="col-4 h-100">
                                    <div class="row h-50">
                                        <div class="col-8">
                                        {{ template_game_form.flip_angle_field.label }}
                                            <p id="fa_deg" class="text-info">{{ session['game5']['flip_angle'] }} deg</p>
                                        </div>
                                        <div class="col-4">
                                         <button type="button" class="btn btn-sm shadow-none d-flex justify-content-evenly"
                                                 data-mdb-container="body"
                                                 data-mdb-toggle="popover"
                                                 data-mdb-placement="top"
                                                 title="Flip Angle"
                                                 data-mdb-content="The change in the magnetization's angle relative to the z-axis caused by an RF pulse">
                                            <i class="bi bi-question-circle-fill"></i>
                                        </button>
                                            </div>
                                    </div>

                                    <div class="row h-50">
                                        <div class="col-8">
                                        {{ template_game_form.rf_phase_field.label }}
                                            <p id="rf_deg" class="text-info">{{ session['game5']['rf_phase'] }} deg</p>
                                        </div>

                                        <div class="col-4">
                                         <button type="button" class="btn btn-sm shadow-none d-flex justify-content-evenly"
                                              data-mdb-container="body"
                                              data-mdb-toggle="popover"
                                              data-mdb-placement="bottom"
                                              title="Pulse direction"
                                              data-mdb-content="The angle the RF field (also called B1 field, which lies in the x-y plane) makes with the positive x-axis. ">
                                            <i class="bi bi-question-circle-fill"></i>
                                        </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-8 h-100">
                                    <div class="row h-50">
                                        {{ template_game_form.flip_angle_field(class="form-range",id='flip_angle',step=5,value=session['game5']['flip_angle']) }}

                                            <div class="ticks text-primary">
                                            {% for angle in [0,45,90,135,180,225,270,315,360] %}
                                            <span class="tick">{{ angle }}</span>
                                            {% endfor %}
                                            </div>
                                    </div>
                                    <div class="row h-50">
                                        {{ template_game_form.rf_phase_field(class="form-range",id='rf_phase',step=5,value=session['game5']['rf_phase']) }}

                                       <div class="ticks text-primary">
                                            {% for angle in [0,45,90,135,180,225,270,315,360] %}
                                            <span class="tick">{{ angle }}</span>
                                            {% endfor %}
                                       </div>
                                    </div>
                                </div>

                            </div>
                    </div>
                        <div class="row h-25 card">
                            <h4 class="card-header">
                            <span>Receive coil</span>
                                 <div type="button" class="btn btn-sm shadow-none"
                                      data-mdb-container="body"
                                      data-mdb-toggle="popover"
                                      data-mdb-placement="right"
                                      title="Receive Coil"
                                      data-mdb-content="A loop of conductive wire is placed vertically so that the processing magnetization vectors pierce through it. ">
                                    <i class="bi bi-question-circle-fill"></i>
                                </div>
                            </h4>
                            <div class="card-body row h-50">
                            <div class="col-4 h-100">
                                <!-- input type="checkbox" class="btn-check" name="options-outlined" id="rx-button" autocomplete="off" -->
                                {{ template_game_form.rx_onoff_field(class="btn-check",id="rx-button",autocomplete="off",
                                                                     checked=session['game5']['coil_on']) }}
                                <label class="btn btn-outline-info"  data-mdb-toggle="tooltip"
                                                                             data-mdb-placement="top"
                                                                             title="Signal reception on/off"
                                       for="rx-button">

                                    <svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" fill="currentColor" class="bi bi-ear" viewBox="0 0 16 16">
                                      <path d="M8.5 1A4.5 4.5 0 0 0 4 5.5v7.047a2.453 2.453 0 0 0 4.75.861l.512-1.363a5.553 5.553 0 0 1 .816-1.46l2.008-2.581A4.34 4.34 0 0 0 8.66 1H8.5ZM3 5.5A5.5 5.5 0 0 1 8.5 0h.16a5.34 5.34 0 0 1 4.215 8.618l-2.008 2.581a4.555 4.555 0 0 0-.67 1.197l-.51 1.363A3.453 3.453 0 0 1 3 12.547V5.5ZM8.5 4A1.5 1.5 0 0 0 7 5.5v2.695c.112-.06.223-.123.332-.192.327-.208.577-.44.72-.727a.5.5 0 1 1 .895.448c-.256.513-.673.865-1.079 1.123A8.538 8.538 0 0 1 7 9.313V11.5a.5.5 0 0 1-1 0v-6a2.5 2.5 0 0 1 5 0V6a.5.5 0 0 1-1 0v-.5A1.5 1.5 0 0 0 8.5 4Z"/>
                                    </svg>

                                 </label>
                            </div>
                            <div class="col-4 h-100">
                                    {{ template_game_form.rot_frame_onoff_field(class="btn-check",id="rot-frame-button",autocomplete="off",
                                                                                checked=session['game5']['rot_frame_on']) }}
                                    <label class="btn btn-outline-info" for="rot-frame-button">
                                        Rotating frame
                                        <div type="button" class="btn btn-sm shadow-none"
                                             data-mdb-container="body"
                                             data-mdb-toggle="popover"
                                             data-mdb-placement="bottom"
                                             title="Rotating frame of reference"
                                             data-mdb-content="We can make the precessing magnetization look still if we are on a merry-go-round at the same speed;
                                                              that is, if we are in a rotating frame of reference. Turn it on and see for yourself!">
                                    <i class="bi bi-question-circle-fill"></i>
                                </div>

                                    </label>

                            </div>



                                <div class="btn-group shadow-none col-4 h-100">
                                    {% for subfield in template_game_form.rx_dir_field %}
                                        {% if subfield.id == "rx_dir_field-0" %}
                                            {{ subfield(class="btn-check shadow-none", autocomplete="off",checked=session['game5']['coil_dir']=='x') }}
                                        {% else %}
                                            {{ subfield(class="btn-check shadow-none", autocomplete="off", checked=session['game5']['coil_dir']=='y') }}
                                        {% endif %}
                                        {{ subfield.label(class="btn btn-outline-primary d-flex align-items-center justify-content-center") }}
                                    {% endfor %}
                                </div>
                                </div>

                            </div>
                    </div>
                    <div class="col col-6">
                            <div class="row h-50 card bg-light">
                                <h4 class="card-header">Set initial magnetization</h4>
                                <div class="card-body">
                                    <!-- Add in options to set initial magnetization value. -->
                                    <div class="row">
                                <div class="col-8 btn-group shadow-none">
                                    <input type="radio" class="btn-check" name="mag-options" id="mag-x" autocomplete="off">
                                    <label class="btn btn-outline-primary" for="mag-x">x</label>

                                    <input type="radio" class="btn-check" name="mag-options" id="mag-y" autocomplete="off">
                                    <label class="btn btn-outline-primary" for="mag-y">y</label>

                                    <input type="radio" class="btn-check" name="mag-options" id="mag-z" autocomplete="off" checked>
                                    <label class="btn btn-outline-primary" for="mag-z">z</label>

                                    <input type="radio" class="btn-check" name="mag-options" id="mag-0" autocomplete="off">
                                    <label class="btn btn-outline-primary" for="mag-0">0</label>
                                </div>
                                    <div class="col-4">
                                        <div class="btn btn-primary d-flex align-items-center justify-content-center" id="set-mag">SET</div>
                                    </div>
                                </div>

                                    <div class="row">
                                    <div class="col">
                                        {{ template_game_form.m_theta_field.label }}
                                        {{ template_game_form.m_theta_field(class="form-control",id='m_theta',value=session['game5']['m_theta']) }}
                                    </div>
                                    <div class="col">
                                        {{ template_game_form.m_phi_field.label }}
                                        {{ template_game_form.m_phi_field(class="form-control",id='m_phi',value=session['game5']['m_phi']) }}
                                    </div>
                                    <div class="col">
                                        {{ template_game_form.m_size_field.label }}
                                        {{ template_game_form.m_size_field(class="form-control",id='m_size',value=session['game5']['m_size']) }}
                                    </div>
                                    </div>

                                </div>

                            </div>

                            <div class="row h-25 card bg-light" id="game5-button-region">
                                <div class="col">
                                    <div class="row h-100">
                                        <div class="col-3 p-0">
                                            <div class="h-100 btn btn-info d-flex align-items-center justify-content-center" id="start">START</div>
                                        </div>
                                        <div class="col-3 p-0">
                                            <div class="h-100 btn btn-danger btn-lg d-flex align-items-center justify-content-center" id="stop">STOP</div>
                                        </div>
                                        <div class="col-3 p-0">
                                            <div class="h-100 btn btn-success btn-lg d-flex align-items-center justify-content-center" id="tip">TIP!</div>
                                        </div>
                                        <div class="col-3 p-0">
                                            <div class="h-100 btn btn-light btn-outline-primary btn-lg d-flex align-items-center justify-content-center" id="reset">RESET</div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Saving current parameters, loading previous ones -->

                            </div>

                           <div class="row h-25 card bg-light">
                               <div class="card-header">Messages</div>
                               <div class="card-body d-flex justify-content-center align-content-center">
                                   <div class="col-4">
                                        <i class="bi bi-megaphone" id="megaphone"></i>
                                   </div>
                                   <div class="font-monospace col-8" id="message-region"></div>
                                </div>
                           </div>


                    </div>
            </div>
            <div class="row h-50">

                <!-- Instructions panel -->
                <div class="col-6 card">
                    <div class="card-header h4">
                        Tasks
                    </div>
                    <div class="card-body">
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar"
                             style="width: {{ session['game5']['task_completed']*25 }}%"
                             aria-valuenow="0" aria-valuemin="{{ session['game5']['task_completed']*25 }}" aria-valuemax="100"></div>
                    </div>
                    <!-- Show tab for each lab procedure -->
                    <ul class="nav nav-tabs nav-justified" id="game5-tab" role="tablist">
                        {% for tab in instructions['tabs'] %}
                            {% if loop.index == ([session['game5']['task_completed'] + 1,4] | min) %}
                                {% set active = 'active' %}
                            {% else %}
                                {% set active = '' %}
                            {% endif %}

                            {% set disabled = 'disabled' if loop.index > 1 + session['game5']['task_completed'] else '' %}
                            {% set aria_disabled = (disabled == 'disabled') %}

                            <li class="nav-item" role="presentation">
                                <button class="col nav-link {{ active }} {{ disabled }} text-info" id="task{{ loop.index }}-tab" data-bs-toggle="tab" data-bs-target="#step{{ loop.index }}"
                                        type="button" role="tab"  aria-controls="step{{ loop.index }}"
                                        aria-selected="{{ loop.index==1 }}" aria-disabled= "{{ aria_disabled }}">
                                    {{ tab }}
                                </button>
                            </li>
                        {% endfor %}
                    </ul>

                    <!-- Instructions -->
                    <!-- Show content for each lab procedure -->
                    <div class="tab-content" id="game5-tab-content">
                        {% for task, task_details in instructions['tasks'].items() %}
                            {% if loop.index == ([session['game5']['task_completed'] + 1 , 4] | min) %}
                                {% set show_text = 'show' %}
                                {% set active_text = 'active' %}
                            {% else %}
                                {% set show_text = '' %}
                                {% set active_text = '' %}
                            {% endif %}
                            <div class="tab-pane fade {{ show_text }} {{ active_text }}" id="step{{ loop.index }}" role="tabpanel" aria-labelledby="step{{ loop.index }}-tab">
                                <div class="h4 text-info">{{ instructions['titles'][loop.index0] }}</div>

                                <ul class="accordion" id="instructions-accordion">
                                {% set task_index = loop.index %}
                                {% for step, details in instructions['explorations'][loop.index0].items() %}
                                      <li class="accordion-item">
                                          <div class="accordion-header row d-flex justify-content-center" id="heading{{ loop.index }}">
                                              <div class="col-2 d-flex align-items-center justify-content-center">
                                              <input class="form-check-input task-{{ task_index }}-check" type="checkbox" value="" aria-label="">
                                              </div>
                                            <div class="col-10">
                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ loop.index }}" aria-expanded="false" aria-controls="collapse{{ loop.index }}">
                                                <strong>{{ step }}</strong>
                                            </button>
                                          </div>
                                          </div>
                                          <div class="accordion-collapse collapse" id="collapse{{ loop.index }}" aria-labelledby="heading{{ loop.index }}" data-bs-parent="#instructions-accordion">
                                              <div class="accordion-body">
                                                    <span>{{ details }}</span>
                                              </div>
                                          </div>
                                      </li>
                                {% endfor %}

                                <!-- Special item -->
                                    <li class="accordion-item text-info">
                                          <div class="accordion-header row d-flex justify-content-center" id="heading-final-{{ task_index }}">

                                              <div class="col-2 d-flex align-items-center justify-content-center">
                                                <input class="form-check-input task-{{ task_index }}-check" id="final-task-of-{{ task_index }}" type="checkbox">
                                              </div>

                                            <div class="col-10">
                                            <button class="accordion-button collapsed final-task-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-final-{{ task_index }}" aria-expanded="false" aria-controls="collapse{{ loop.index }}">
                                                <strong class="text-info">{{ task }}</strong>
                                            </button>
                                          </div>
                                          </div>
                                          <div class="accordion-collapse collapse" id="collapse-final-{{ task_index }}" aria-labelledby="heading-final-{{ task_index }}" data-bs-parent="#instructions-accordion">
                                              <div class="accordion-body">
                                                    <span>{{ task_details }}</span>
                                              </div>
                                          </div>
                                      </li>
                                </li>
                                </ul>

                                <!-- Step 3 special button -->
                                {% if task_index == 3 %}
                                    <div class="row">
                                        <div class="col" id="target-m-disp">Target M: (0, 0, 0)</div>
                                        <div class="col d-none text-danger" id="try-again">Try again.</div>
                                    </div>
                                    <div class="btn btn-light btn-outline-primary" id="randomize">Randomize!</div>
                                    <div class="btn btn-dark" id="check-answer">Check</div>
                                {% endif %}

                                <div class="btn btn-info task-next-button" id="task{{ loop.index }}-next">Next</div>

                                <p class="d-none text-danger" id="task-message-{{ task_index }}">
                                    Complete and check all steps to move on.
                                </p>
                                {% set dnone = '' if session['game5']['task_completed'] >= task_index else 'd-none' %}

                                {% set success_message = 'This step has been completed' if task_index < 4 else
                                        'All steps complete. Congratulations! To earn the remaining stars, answer the questions to the right.' %}

                                <p class="{{ dnone }} text-success" id="task-success-{{ task_index }}">
                                    {{ success_message }}
                                    {% if task_index == 4 %}
                                        <a class="btn btn-large btn-success" href="/games/7"> Next game! </a>
                                    {% endif %}
                                </p>


                            </div>



                        {% endfor %}



                      <div class="tab-pane fade" id="step2" role="tabpanel" aria-labelledby="profile-tab"></div>
                      <div class="tab-pane fade" id="step3" role="tabpanel" aria-labelledby="contact-tab"></div>


                    </div>

                    </div>
                </div>
                    <!-- Questions panel -->
                   <div class="col-6 card">
                            <div class="card-header h3">Questions</div>
                                <div id="slide" class="carousel slide card-body h-75" data-bs-interval="false">
                            <div class="carousel-inner">
                                {% for ind in range(success_text | length) %}
                                    {% set letters = ['a','b','c','d'] %}
                                    {% set active_text = 'active' if ind==0 else '' %}
                                    <div class="carousel-item {{active_text}}">

                                        <div class="row d-flex justify-content-center align-items-baseline">
                                            <p class="h5">Q{{ ind + 1 }}:{{ questions[ind]['text']}}</p>
                                        </div>

                                        <div class="row d-flex justify-content-center">

                                        <div class="form-check col-8">
                                        {% for ind2 in range(questions[ind]['choices'] | length) %}
                                            {% if not uses_images[ind] %}
                                                <div class="form-group">
                                            <input type="radio" class="q{{ind}}-choice form-check-input" id="q{{ind}}-{{letters[ind2]}}" name="mc-question" value="{{ letters[ind2] }}">
                                            <label for="q{{ind}}-{{letters[ind2]}}" class="form-check-label">{{ questions[ind]['choices'][ind2] }}</label>
                                                </div>
                                            {% else %}
                                            <div class="form-group">
                                            <input type="radio"  class="q{{ind}}-choice form-check-input" id="q{{ind}}-{{letters[ind2] }}" name="mc-question" value="{{ letters[ind2] }}">
                                            <label for="q{{ind}}-{{letters[ind2]}}" class="form-check-label"><img src=".{{ questions[ind]['choices'][ind2] }}" style="height: 150px; width:150px;"></label>
                                            </div>
                                            {% endif %}
                                        {% endfor %}
                                        </div>
                                        </div>

                                        <div class="row d-flex justify-content-center">
                                            <div class="col-4">
                                                <div class="btn btn-large btn-primary answer-mc" id="answer-mc-{{ind}}">Submit</div>
                                            </div>
                                            <div class="col-8">
                                                <p id="mc-success-text-{{ ind }}" class="d-none" style="color:palegreen">{{ success_text[ind] }}</p>
                                                <p id="mc-failure-text-{{ ind }}" class="d-none" style="color:#ffb500">Wrong answer. Try again!</p>
                                            </div>

                                        </div>

                                        <p class="d-none">Correct choice: <span id="mc-correct-choice-{{ind}}">{{ questions[ind]['correct']}}</span></p>

                                    </div>
                                {% endfor %}
                            </div>

                            <button class="carousel-control-prev" type="button" data-bs-target="#slide" data-bs-slide="prev">
                                <span class="carousel-control-prev-icon"></span>
                            </button>
                            <button class="carousel-control-next" type="button" data-bs-target="#slide" data-bs-slide="next">
                                <span class="carousel-control-next-icon"></span>
                            </button>

                        </div>

                </div>

            </div>

        </div>
    </div>

        </form>
     <!-- Javascript for Plotly integration (required)-->

    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>







{% endblock %}

{% block tasks %}
{#<div class="card-body">#}
{#                    <div class="progress">#}
{#                        <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar"#}
{#                             style="width: {{ session['game5']['task_completed']*25 }}%"#}
{#                             aria-valuenow="0" aria-valuemin="{{ session['game5']['task_completed']*25 }}" aria-valuemax="100"></div>#}
{#                    </div>#}
{#                    <!-- Show tab for each lab procedure -->#}
{#                    <ul class="nav nav-tabs nav-justified" id="game5-tab" role="tablist">#}
{#                        {% for tab in instructions['tabs'] %}#}
{#                            {% if loop.index == ([session['game5']['task_completed'] + 1,4] | min) %}#}
{#                                {% set active = 'active' %}#}
{#                            {% else %}#}
{#                                {% set active = '' %}#}
{#                            {% endif %}#}
{##}
{#                            {% set disabled = 'disabled' if loop.index > 1 + session['game5']['task_completed'] else '' %}#}
{#                            {% set aria_disabled = (disabled == 'disabled') %}#}
{##}
{#                            <li class="nav-item" role="presentation">#}
{#                                <button class="col nav-link {{ active }} {{ disabled }} text-info" id="task{{ loop.index }}-tab" data-bs-toggle="tab" data-bs-target="#step{{ loop.index }}"#}
{#                                        type="button" role="tab"  aria-controls="step{{ loop.index }}"#}
{#                                        aria-selected="{{ loop.index==1 }}" aria-disabled= "{{ aria_disabled }}">#}
{#                                    {{ tab }}#}
{#                                </button>#}
{#                            </li>#}
{#                        {% endfor %}#}
{#                    </ul>#}
{##}
{#                    <!-- Instructions -->#}
{#                    <!-- Show content for each lab procedure -->#}
{#                    <div class="tab-content" id="game5-tab-content">#}
{#                        {% for task, task_details in instructions['tasks'].items() %}#}
{#                            {% if loop.index == ([session['game5']['task_completed'] + 1, 4] | min) %}#}
{#                                {% set show_text = 'show' %}#}
{#                                {% set active_text = 'active' %}#}
{#                            {% else %}#}
{#                                {% set show_text = '' %}#}
{#                                {% set active_text = '' %}#}
{#                            {% endif %}#}
{#                            <div class="tab-pane fade {{ show_text }} {{ active_text }}" id="step{{ loop.index }}" role="tabpanel" aria-labelledby="step{{ loop.index }}-tab">#}
{#                                <div class="h4 text-info">{{ instructions['titles'][loop.index0] }}</div>#}
{##}
{#                                <ul class="accordion" id="instructions-accordion">#}
{#                                {% set task_index = loop.index %}#}
{#                                {% for step, details in instructions['explorations'][loop.index0].items() %}#}
{#                                      <li class="accordion-item">#}
{#                                          <div class="accordion-header row d-flex justify-content-center" id="heading{{ loop.index }}">#}
{#                                              <div class="col-2 d-flex align-items-center justify-content-center">#}
{#                                              <input class="form-check-input task-{{ task_index }}-check" type="checkbox" value="" aria-label="">#}
{#                                              </div>#}
{#                                            <div class="col-10">#}
{#                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ loop.index }}" aria-expanded="false" aria-controls="collapse{{ loop.index }}">#}
{#                                                <strong>{{ step }}</strong>#}
{#                                            </button>#}
{#                                          </div>#}
{#                                          </div>#}
{#                                          <div class="accordion-collapse collapse" id="collapse{{ loop.index }}" aria-labelledby="heading{{ loop.index }}" data-bs-parent="#instructions-accordion">#}
{#                                              <div class="accordion-body">#}
{#                                                    <span>{{ details }}</span>#}
{#                                              </div>#}
{#                                          </div>#}
{#                                      </li>#}
{#                                {% endfor %}#}
{##}
{#                                <!-- Special item -->#}
{#                                    <li class="accordion-item text-info">#}
{#                                          <div class="accordion-header row d-flex justify-content-center" id="heading-final-{{ task_index }}">#}
{##}
{#                                              <div class="col-2 d-flex align-items-center justify-content-center">#}
{#                                                <input class="form-check-input task-{{ task_index }}-check" id="final-task-of-{{ task_index }}" type="checkbox">#}
{#                                              </div>#}
{##}
{#                                            <div class="col-10">#}
{#                                            <button class="accordion-button collapsed final-task-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-final-{{ task_index }}" aria-expanded="false" aria-controls="collapse{{ loop.index }}">#}
{#                                                <strong class="text-info">{{ task }}</strong>#}
{#                                            </button>#}
{#                                          </div>#}
{#                                          </div>#}
{#                                          <div class="accordion-collapse collapse" id="collapse-final-{{ task_index }}" aria-labelledby="heading-final-{{ task_index }}" data-bs-parent="#instructions-accordion">#}
{#                                              <div class="accordion-body">#}
{#                                                    <span>{{ task_details }}</span>#}
{#                                              </div>#}
{#                                          </div>#}
{#                                      </li>#}
{#                                </li>#}
{#                                </ul>#}
{##}
{#                                <!-- Step 3 special button -->#}
{#                                {% if task_index == 3 %}#}
{#                                    <div class="row">#}
{#                                        <div class="col" id="target-m-disp">Target M: (0, 0, 0)</div>#}
{#                                        <div class="col d-none text-danger" id="try-again">Try again.</div>#}
{#                                    </div>#}
{#                                    <div class="btn btn-light btn-outline-primary" id="randomize">Randomize!</div>#}
{#                                    <div class="btn btn-dark" id="check-answer">Check</div>#}
{#                                {% endif %}#}
{##}
{#                                <div class="btn btn-info task-next-button" id="task{{ loop.index }}-next">Next</div>#}
{##}
{#                                <p class="d-none text-danger" id="task-message-{{ task_index }}">#}
{#                                    Complete and check all steps to move on.#}
{#                                </p>#}
{#                                {% set dnone = '' if session['game5']['task_completed'] >= task_index else 'd-none' %}#}
{##}
{#                                {% set success_message = 'This step has been completed' if task_index < 4 else#}
{#                                        'All steps complete. Congratulations! To earn the remaining stars, answer the questions to the right.' %}#}
{##}
{#                                <p class="{{ dnone }} text-success" id="task-success-{{ task_index }}">#}
{#                                    {{ success_message }}#}
{#                                    {% if task_index == 4 %}#}
{#                                        <a class="btn btn-large btn-success" href="/games/7"> Next game! </a>#}
{#                                    {% endif %}#}
{#                                </p>#}
{##}
{##}
{#                            </div>#}
{##}
{##}
{##}
{#                        {% endfor %}#}
{##}
{##}
{##}
{#                      <div class="tab-pane fade" id="step2" role="tabpanel" aria-labelledby="profile-tab"></div>#}
{#                      <div class="tab-pane fade" id="step3" role="tabpanel" aria-labelledby="contact-tab"></div>#}
{##}
{##}
{#                    </div>#}
{##}
{#                    </div>#}
{% endblock %}

{% block additional_imports %}
    <script src="../static/game5.js"></script>
    <script type="text/javascript">
    graphData = {{ graphJSON_spin | safe }};
    graphData2 = {{ graphJSON_signal | safe }}
    play_animation_spin(graphData,false);
    play_animation_signal(graphData2,false);
    </script>

    <link rel="stylesheet" href="../static/styles/style_game5.css">


{% endblock %}