{% extends "base.html" %}

{% block page_title %}Infection curve models{% endblock %}
{% block title %}Infection curve models

<span class="float-right">
    <a type="submit" class="btn btn-sm btn-warning" href="{{ url_for('arcovid19.icurve') }}">
        {% trans %}Reset{% endtrans %} <i class="fas fa-sync"></i>
    </a>
</span>

{% endblock %}

{% block page_css %}
<style>
    table.table td, table.table th,
    table.table label,
    table.table .form-control {
        font-size: 0.7rem;
        padding-bottom: 0px !important;
        padding-top: 5px !important;
    }

    table.table td input {
        width: 100%;
    }

    table.dataframe {
        width: 100%;
    }

   #data-container {
      overflow-y: auto;
   }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col col-md-4">
            <form id="params" method="POST" action="">
                {{ form.hidden_tag() }}
                {% if form.errors %}
                    <p class="text-danger">{% trans %}Something gone wrong!{%endtrans%}</p>
                {% endif %}
                <table class="table table-borderless table-sm">
                    {% for field in form if field.widget.input_type != 'hidden'%}
                    <tr class="{% if field.errors %} text-danger {% endif %}">
                        <th>
                            {{ field.label() }}</th>
                        <td>{{ field() }}</td>
                        <td>
                            <a class="text-info" tabindex="0" role="button" data-toggle="popover" data-trigger="focus" title="{{field.label.text}}" data-placement="right" data-content="{{ field.description }}">
                                <i class="far fa-question-circle"></i></td>
                            </a>
                    </tr>
                    {% for error in field.errors %}
                    <tr class="field-error text-danger">
                        <td></td>
                        <td>{{error}}</td>
                    </tr>
                    {% endfor %}
                    {% endfor %}
                </table>
                <div>
                    <button type="submit" class="btn btn-block btn-primary">
                        {% trans %}Run{% endtrans %} <i class="fas fa-fast-forward"></i>
                    </button>
                </div>
            </form>
        </div>
        <div class="col col-md-8">
            {% if plots %}
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                {% for pname in plots.keys() %}
                <li class="nav-item">
                    {% if loop.first %}
                    <a class="nav-link active" id="{{pname}}-tab" data-toggle="tab" href="#plot-{{pname}}" role="tab" aria-controls="{{pname}}" aria-selected="true">{{pname}}</a>
                    {% else %}
                    <a class="nav-link" id="{{pname}}-tab" data-toggle="tab" href="#plot-{{pname}}" role="tab" aria-controls="{{pname}}" aria-selected="false">{{pname}}</a>
                    {% endif %}
                </li>
                {% endfor %}
                <li class="nav-item">
                    <a class="nav-link" id="data-tab" data-toggle="tab" href="#data" role="tab" aria-controls="data" aria-selected="false">{% trans %}Data{% endtrans %}</a>
                </li>
              </ul>
              <div class="tab-content" id="myTabContent">
                {% for pname, plot in plots.items() %}
                    {% if loop.first %}
                    <div class="tab-pane fade show active" id="plot-{{pname}}" role="tabpanel" aria-labelledby="{{pname}}-tab">
                        {{plot}}
                    </div>
                    {% else %}
                    <div class="tab-pane fade show" id="plot-{{pname}}" role="tabpanel" aria-labelledby="{{pname}}-tab">
                        {{plot}}
                    </div>
                    {% endif %}
                {% endfor %}
                <div class="tab-pane fade" id="data" role="tabpanel" aria-labelledby="data-tab">
                    <div id="data-container">
                        <form action="{{ url_for('arcovid19.download_model') }}" class="float-right" method="post">
                            <div class="hide">
                                {% for field in form %}{{ field(id="download_" + field.id) }} }}{% endfor %}
                            </div>
                            <button type="submit" class="btn btn-sm btn-success">
                                {% trans %}Download{% endtrans %} <i class="fas fa-download"></i>
                            </button>
                        </form>
                        {{result.to_html()|safe}}
                    </div>
                </div>
              </div>
              {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block page_js %}
<script>
$(document).ready(function(){
    $('table.dataframe').DataTable({
        "scrollCollapse": true,
        "paging":         false,
        "width": 100
    });

    $("table.dataframe").removeAttr("style");
    $("table.dataframe").addClass("table table-striped display compact");
    $("table.dataframe th").addClass("table-dark");

    $("table.dataframe th.sorting").addClass("text-info").append(
        '<span class="float-right"><i class="fas fa-sort"></i></span>');

    var height = $("form#params").height() * .95;
    $("#data-container").css("max-height", `${height}px`);

});
</script>
{% endblock %}