{% extends "base.html" %}
{% block content %}



<div class="container-fluid vh-100">

<div class="row h-100">
    <div class="col-7 h-100">

        <!-- Flow vector drawing and controls -->
        <div class="row p-2 d-flex align-content-center">
                <div class="col-3">
                    <div class="row">
                       <span id="flow-info"> Flow speed: 10 mm / s </span>
                    </div>
                    <div class="row">
                        {{ template_game_form.flow_speed_field.label(class="form-label") }}
                        {{ template_game_form.flow_speed_field(class="form-control",id="flow_speed",value=session['game4']['flow_speed']) }}
                    </div>
                    <div class="row">
                        <button class="btn btn-info btn-lg" id="flow-manual-button">PUSH</button>
                    </div>
                    <div class="row">
                        <button class="btn btn-primary btn-lg" id="solution-param-button"
                                data-mdb-toggle="modal" data-mdb-target="#solutionModal">Solution</button>
                    </div>
                    <div class="modal fade" id="solutionModal" tabindex="-1" aria-labelledby="solutionModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="solutionModalLabel">Solution parameters</h5>
                                    <button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <!-- Input fields -->
                                    <div class="form-group">
                                        {{ template_game_form.t1_field.label(class="form-label") }}
                                        {{ template_game_form.t1_field(class="form-control",id="T1",value=session['game4']['T1']) }}
                                    </div>
                                    <div class="form-group">
                                        {{ template_game_form.t2_field.label(class="form-label") }}
                                        {{ template_game_form.t2_field(class="form-control",id="T2",value=session['game4']['T2']) }}
                                    </div>
                                </div>
                                <div class="modal-footer d-flex justify-content-center">
                                    <button type="button" class="btn btn-info" data-mdb-dismiss="modal">Save</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6 p-0">
                            T1 = <span id="t1-display">{{ session['game4']['T1'] }}</span> ms
                        </div>
                        <div class="col-6 p-0">
                            T2 = <span id="t2-display">{{ session['game4']['T2'] }}</span> ms
                        </div>
                    </div>

                </div>
                <div class="col-9">
                      <object id="syringe" style="height:90% ;width:90%;"
                              data="../static/img/syringe.svg" type="image/svg+xml">

                      </object>


                </div>
        </div>


        <div class="row ">
            <div class="card h-100">
                <div class="card-body h-100">
                    <div class="col h-100">
                        <div class="row">
                            {% if session['game4']['mode'] == 'bright' %}
                                {% set brightTabStatus = 'active' %}
                                {% set darkTabStatus = '' %}
                                {% set brightPaneStatus = 'show active' %}
                                {% set darkPaneStatus = '' %}
                            {% else %}
                                {% set brightTabStatus = '' %}
                                {% set darkTabStatus = 'active' %}
                                {% set brightPaneStatus = '' %}
                                {% set darkPaneStatus = 'show active' %}
                            {% endif %}

                            <ul class="nav nav-tabs nav-fill mb-3" id="bright-blood-tabs" role="tablist">
                              <li class="nav-item" role="presentation">
                                <a
                                  class="nav-link {{ brightTabStatus }}"
                                  id="flow-tab-1"
                                  data-mdb-toggle="tab"
                                  href="#flow-tabs-1"
                                  role="tab"
                                  aria-controls="flow-tabs-1"
                                  aria-selected="true"
                                  >Bright blood</a
                                >
                              </li>
                              <li class="nav-item" role="presentation">
                                <a
                                  class="nav-link {{ darkTabStatus }}"
                                  id="flow-tab-2"
                                  data-mdb-toggle="tab"
                                  href="#flow-tabs-2"
                                  role="tab"
                                  aria-controls="flow-tabs-2"
                                  aria-selected="false"
                                  >Dark blood</a
                                >
                              </li>
                            </ul>
                        </div>
                        <div class="row">

                            <div class="tab-content" id="flow-content">
                                <div class="tab-pane fade {{ brightPaneStatus }}" id="flow-tabs-1" role="tabpanel" aria-labelledby="flow-tab-1">
                                    <!-- Bright blood plots-->
                                    <div class="row h-25">
                                        <div class="chart p-0" id="bright-chart-1"></div>
                                    </div>
                                    <div class="row h-25">
                                        <div class="chart p-0" id="bright-chart-2"> </div>
                                    </div>
                                    <hr>
                                    <div class="row h-50">
                                        <div class="col form-group">
                                            {{ template_game_form.bright_thk_field.label(class="form-label") }}
                                            {{ template_game_form.bright_thk_field(class="form-control",id='bright_thk',value=session['game4']['bright_thk']) }}
                                        </div>
                                        <div class="col form-group">
                                            {{ template_game_form.bright_tr_field.label(class="form-label") }}
                                            {{ template_game_form.bright_tr_field(class="form-control",id='bright_tr',value=session['game4']['bright_tr']) }}
                                        </div>
                                        <div class="col form-group">
                                            {{ template_game_form.bright_te_field.label(class="form-label") }}
                                            {{ template_game_form.bright_te_field(class="form-control",id="bright_te",value=session['game4']['bright_te']) }}
                                        </div>
                                            {{ template_game_form.bright_fa_field.label(class="form-label") }}
                                            {{ template_game_form.bright_fa_field(class="form-range",id='bright_fa',value=session['game4']['bright_fa']) }}
                                        <div class="ticks text-primary">
                                              {% for b in [0,15,30,45,60,75,90] %}
                                               <span class="tick">{{ b }}</span>
                                              {% endfor %}
                                          </div>
                                        </div>
                                </div>
                                <div class="tab-pane fade {{ darkPaneStatus }}" id="flow-tabs-2" role="tabpanel" aria-labelledby="flow-tab-2">
                                    <!-- Dark blood plots-->
                                    <div class="row h-25">
                                        <div class="chart p-0" id="dark-chart-1"></div>
                                    </div>
                                    <div class="row h-25">
                                        <div class="chart p-0" id="dark-chart-2"></div>
                                    </div>
                                    <hr>
                                    <div class="row h-50">
                                        <div class="form-group col">
                                            {{ template_game_form.dark_thk_field.label(class="form-label") }}
                                            {{ template_game_form.dark_thk_field(class="form-control",id="dark_thk",value=session['game4']['dark_thk']) }}
                                        </div>
                                        <div class="form-group col">
                                            {{ template_game_form.dark_te_field.label(class="form-label") }}
                                            {{ template_game_form.dark_te_field(class="form-control",id="dark_te",value=session['game4']['dark_te']) }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
         <div class="row">
                            <div class="btn btn-lg btn-info" id="transfer-params">Transfer parameters >> </div>
         </div>
    </div>


    <div class="col-5 h-100">
           <div class="row">
            <div class="card">
                <p>Messages</p>
                <p id="message-region">Press "PUSH" after you change parameters to re-run the flow simulation!</p>

            </div>
        </div>
        <div class="row h-50">
            <div class="card h-100">
                <div class="card-header">
                    Image
                </div>
                <div class="card-body">
                    <div class="chart h-100" id="image-chart"></div>
                </div>
            </div>
        </div>
        <div class="row h-25">
            <div class="card">
                <div class="card-body">
                <div class="row">
                    <button class="btn btn-lg btn-success" id="run-scan">RUN!</button>
                </div>

                    <div class="form-group row" id="sequence-type-row">
                        <div class="col-4">
                            {{ template_game_form.sequence_type_field.label(class="form-label") }}
                        </div>
                        <div class="col-8">
                            <select class="form-control" id="contrast-type" name="sequence_type_field">
                                {% if session['game4']['mode'] == "bright" %}
                                    {% set brightsel = "selected" %}
                                    {% set darksel = "" %}
                                {% else %}
                                    {% set darksel = "selected" %}
                                    {% set brightsel = "" %}
                                {% endif %}
                                <option {{ brightsel }} value="bright">Bright blood</option>
                                <option {{ darksel }} value="dark">Dark blood</option>

                            </select>

                        </div>
                    </div>

                    <div class="form-group row" id="thk-row">
                        <div class="col-4">{{ template_game_form.thk_field.label(class="form-label") }}</div>
                        <div class="col-8">{{ template_game_form.thk_field(class="form-control",id="thk",value=session['game4']['thk']) }}</div>
                    </div>

                    {% if session['game4']['mode']=='bright' %}
                        {% set visibility = "" %}
                    {% else %}
                        {% set visibility = "d-none" %}
                    {% endif %}

                    <div class="form-group row {{ visibility }}" id="tr-row">
                        <div class="col-4">{{ template_game_form.tr_field.label(class="form-label") }}</div>
                        <div class="col-8">{{ template_game_form.tr_field(class="form-control",id="tr",value=session['game4']['tr']) }}</div>
                    </div>

                    <div class="form-group row" id="te-row">
                        <div class="col-4">{{ template_game_form.te_field.label(class="form-label") }}</div>
                        <div class="col-8">{{ template_game_form.te_field(class="form-control",id="te",value=session['game4']['te']) }}</div>

                    </div>

                    <div class="form-group row {{ visibility }}" id="fa-row">
                        <div class="col-4">{{ template_game_form.fa_field.label(class="form-label") }}</div>
                        <div class="col-8">
                            {{ template_game_form.fa_field(class="form-range",id="fa",value=session['game4']['fa']) }}
                            <div class="ticks text-primary">
                              {% for b in [0,15,30,45,60,75,90] %}
                               <span class="tick">{{ b }}</span>
                              {% endfor %}
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>


</div>

</div>
{% endblock %}


{% block additional_imports %}
    <script src="../static/game4.js"></script>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script type="text/javascript">
        // Plotting with Plotly
        // Bright blood
        let graph1 = {{ graphJSON_top_bright | safe }};
        let graph2 = {{ graphJSON_bottom_bright | safe }}
        // Get correct widths and heights
        // replace the layout {autosize: true}
        Plotly.plot('bright-chart-1',  graph1, {autosize:true});
        Plotly.plot('bright-chart-2',  graph2, {autosize:true});

        // Dark blood
        let graph3 = {{ graphJSON_top_dark | safe }};
        let graph4 = {{ graphJSON_bottom_dark | safe }};
        Plotly.plot('dark-chart-1',graph3, {autosize:true});
        Plotly.plot('dark-chart-2',graph4, {autosize:true});

        // Image
        let graph5 = {{ graphJSON_image | safe }};
        Plotly.plot('image-chart',graph5,{autosize:true});

    </script>

{% endblock %}