{% extends "base.html" %}

{% block toc %}
<li class="nav-item"> <a class="nav-link d-flex align-items-center gap-2" href="#metadata">
        <svg class="bi" aria-hidden="true">
            <use xlink:href="#file-earmark-text"></use>
        </svg>
        Metadata
    </a> </li>
{% endblock %}


{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1>Visiomode Session Report</h1>
    <h3>{{ session_id }}</h3>
</div>


<div class="row mb-3">
    <h2 id="metadata">Session metadata</h2>

    <div class="row mb-1">
        <div class="col-md-4 mb-1">
            <strong>Subject ID:</strong> {{ subject_id or "Unknown" }}
        </div>
        <div class="col-md-4 mb-1">
            <strong>Experiment ID:</strong> {{ experiment_id or "Unknown" }}
        </div>
        <div class="col-md-4 mb-1">
            <strong>Session duration:</strong> {{ duration or "Unknown" }} mins
        </div>
    </div>
    <div class="row mb-1">
        <div class="col-md-4 mb-1">
            <strong>Session date:</strong> {{ session_date or "Unknown" }}
        </div>
        <div class="col-md-4 mb-1">
            <strong>Protocol:</strong> {{ protocol or "Unknown" }}
        </div>
        <div class="col-md-4 mb-1">
            <strong>Number of trials:</strong> {{ trials_num or "Unknown" }}
        </div>
    </div>

    <h3>Protocol spec</h3>

    <div class="row mb-1">
        <div class="col-md-4 mb-1">
            <strong>Inter-trial Interval:</strong> {{ iti or "Unknown" }} ms
        </div>
        <div class="col-md-4 mb-1">
            <strong>Correction trials:</strong> {{ corrections_enabled }}
        </div>
        <div class="col-md-4 mb-1">
            <strong>Notes:</strong>
            <div class="row-md-4 mb-1">{{ notes }}</div>
        </div>
    </div>
    <div class="row mb-1">
        <div class="col-md-4 mb-1">
            <strong>Stimulus interval:</strong> {{ stimulus_duration or "Unknown" }} ms
        </div>
        <div class="col-md-4 mb-1">
            <strong>Stimuli:</strong>
            <div class="row-md-4 mb-1">
                <table>
                    {% for key, value in stimuli.items() %}
                    <tr>
                        <th> &nbsp; {{ key }}: </th>
                        <td> {{ value }} </td>
                    </tr>
                    {% endfor %}
                </table>
            </div>
        </div>
    </div>
</div>
<!-- 
<div class="row mb-3">
    <h2 id="integrity">Summary</h2>

    <div class="col-md-6 mb-3 mt-3">
        <h6>Timestamp series</h6>
        <table>
            {% for key, value in summary.items() %}
            <tr>
                <th> {{ key | capitalize }}: </th>
                <td> {{ value }} </td>
            </tr>
            {% endfor %}
        </table>
    </div>

    <div class="col-md-6 mb-3 mt-3">
        <h6>Timedelta series</h6>
    </div>
</div> -->

<div class="row mb-3">
    <h2 id="integrity">Session metrics</h2>

    <div class="col-md-6 mb-3">
        {% if corrections_enabled %}
        <div class="row mb-2">
            <h4>Random presentations only</h4>
        </div>
        {% endif %}

        <div class="row mb-2">
            <h6>Cue response breakdown</h6>
            {{ fig_success_pie | safe }}
        </div>

        <div class="row mb-2 mt-4">
            <h6>Cued:uncued response breakdown</h6>
            {{ fig_cued_pie | safe }}
        </div>

        <div class="row mb-2 mt-4">
            <h6>Median reaction time</h6>
            {{ fig_rt_median | safe }}
        </div>
    </div>

    {% if corrections_enabled %}
    <div class="col-md-6 mb-3">
        <div class="row mb-2">
            <h4>All presentations (including correction trials)</h4>
        </div>

        <div class="row mb-2">
            <h6>Cue response breakdown (all trials)</h6>
            {{ fig_success_pie_wc | safe }}
        </div>

        <div class="row mb-2 mt-4">
            <h6>Cued:uncued response breakdown (all trials)</h6>
            {{ fig_cued_pie_wc | safe }}
        </div>

        <div class="row mb-2 mt-4">
            <h6>Median reaction time (all trials)</h6>
            {{ fig_rt_median_wc | safe }}
        </div>
    </div>

    <hr>

    <div class="row mb-1">
        <h4>Correction trial metrics</h4>

        <!-- Perseveration, ratio, random/corr piechart -->
        <div class="col-md-6 mb-3">
            <div class="row mb-2">
                <h6>Presentation breakdown</h6>
                {{ fig_presentation_breakdown | safe }}
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="row mb-2">
                <h6>Presentation ratio</h6>
                {{ fig_presentation_ratio | safe }}
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="row mb-2">
                <h6>Perseveration index</h6>
                {{ fig_perseveration_index | safe }}
            </div>
        </div>
    </div>
    {% endif %}
</div>

<hr>

{% if protocol != "targetonly"%}
<div class="row mb-3">
    <h2 id="integrity">SDT metrics</h2>

    <div class="row mb-1">
        <div class="col-md-6 mb-3 mt-3">
            <h6>ROC curve</h6>
            {{ fig_roc | safe }}
        </div>
        <div class="col-md-3 mb-3 mt-3">
            <h6>Discriminability index (d')</h6>
            {{ fig_d_prime | safe }}
        </div>
        <div class="col-md-3 mb-3 mt-3">
            <h6>Decision criterion</h6>
            {{ fig_decision_criterion | safe }}
        </div>
    </div>

    <div class="row mb-1">
        <div class="col-md-6 mb-3">
            <div class="row mb-2">
                <h6>Response type breakdown</h6>
                {{ fig_response_sdt | safe }}
            </div>
        </div>

        {% if corrections_enabled %}
        <div class="col-md-6 mb-3">
            <div class="row mb-2">
                <h6>Response type breakdown (all trials)</h6>
                {{ fig_response_sdt_wc | safe }}
            </div>
        </div>
        {% endif %}
    </div>


</div>
{% endif %}

<div class="row mb-3">
    <h2 id="integrity">Trial timeseries</h2>

    <div class="col-md-12 mb-3">
        <div class="row mb-2">
            <h6>Response timeseries</h6>
            {{ fig_response_timeseries | safe }}
        </div>
    </div>

    {% if protocol != "targetonly"%}
    <div class="col-md-12 mb-3">
        <div class="row mb-2">
            <h6>SDT timeseries</h6>
            {{ fig_sdt_timeseries | safe }}
        </div>
    </div>
    {% endif %}
</div>




{% endblock %}