{% extends 'template.html' %}

{% block title %}
Eddy summary
{% endblock title %}

{% block subtitle %}
<h3><code>{{ out_dir }}</code></h4>
<p>Number of Eddy data included in the summary: <code>{{ eddyStudy.eddy_prefix_list | length }}</code></p>
{% endblock subtitle %}

{% block linkline %}
<a class="btn btn-primary btn-lg" href="#}" role="button">Back to study level summary &raquo;</a>
{% endblock %}

{% block content %}
<div class="container">
<!-- Example row of columns -->
<div class="row">
  <div class="col-md-12">
    <h2>Data summary for each Eddy runs</h2>

    <h3>Basic information</h3>
    <table class="table-responsive">
        <tr>
        {% for key, value in eddyStudy.subdf_basics.items() %}
                <th scope="col">{{ key }}</th>
        {% endfor %}
        </tr>
        {% for key, value in eddyStudy.subdf_basics.T.items() %}
            <tr>
                <td scope="col"><a href="{{ html_addresses[loop.index0] }}">{{ value[0] }}</a></td>
                {% for val in value[1:] %}
                    <td scope="col">{{ val }}</td>
                {% endfor %}
            </tr>
        {% endfor %}
    </table>

    <br><br><br>

    <h3>Outlier information</h3>
    <table class="table-responsive">
        <tr>
        {% for key, value in eddyStudy.subdf_outliers.items() %}
                <th scope="col">{{ key }}</th>
        {% endfor %}
        </tr>
        {% for key, value in eddyStudy.subdf_outliers.T.items() %}
            <tr>
                <td scope="col"><a href="{{ html_addresses[loop.index0] }}">{{ value[0] }}</a></td>

                <td scope="col">{{ value[1] }}</td>

                {% for val in value[2:] %}
                    <td scope="col">{{ "%.2f"|format(val|float) }}</td>
                {% endfor %}
            </tr>
        {% endfor %}
    </table>

    <br><br><br>

    <h3>Motion information</h3>
    <table class="table-responsive">
        <tr>
        {% for key, value in eddyStudy.subdf_motions.items() %}
                <th scope="col">{{ key }}</th>
        {% endfor %}
        </tr>
        {% for key, value in eddyStudy.subdf_motions.T.items() %}
            <tr>
                <td scope="col"><a href="{{ html_addresses[loop.index0] }}">{{ value[0] }}</a></td>

                {% for val in value[1:] %}
                    <td scope="col">{{ "%.2f"|format(val|float) }}</td>
                {% endfor %}
            </tr>
        {% endfor %}
    </table>


    <br><br>
    {% if image_list %}
        <h2>Summary figures</h2>
    {% endif %}

    <div class="row">
        <div class="col>
        </div>
         <div class="col-6">
           <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
             <ol class="carousel-indicators">
               <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
               <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
               <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
             </ol>
             <div class="carousel-inner">
               <div class="carousel-item active">
                 <img class="d-block w-100" src="{{ image_list[0] }}" alt="First slide">
               </div>
               {% for img_path in image_list %}
                   <div class="carousel-item">
                       <img class="d-block w-100" src="{{ img_path }}" alt="{{ loop }} slide">
                   </div>
               {% endfor %}

             </div>
             <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
               <span class="carousel-control-prev-icon" aria-hidden="true"></span>
               <span class="sr-only">Previous</span>
             </a>
             <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
               <span class="carousel-control-next-icon" aria-hidden="true"></span>
               <span class="sr-only">Next</span>
             </a>
           </div>
         </div>
      </div>
    </div>
</div>

</div>
{% endblock content %}
