{% extends "basic_template.html" %}
{% block title %}
{{ super() }}
{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block content %}

<style>
.container {
  position: relative;
}

.container .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
</style>
<script>
  function download_result() {
    const element = document.createElement('a');
    element.style.display = 'none';
    
    const data = document.getElementsByName("model_result")[0].value;
    element.setAttribute('href', 'data:text/comma-separated-values;charset=utf-8,' + encodeURIComponent(data));
    element.setAttribute('download', 'model_results.csv');
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
  }
</script>


<h1>Results</h1>

{% if complete_results %}

<h3>Complete state space search performed</h3>

{% endif %}

<div class="w3-row w3-container">
    <div class="w3-half">
        <header class="w3-container w3-us-blue"><h4>Cycle Counts by Length</h4></header>
        <table class="w3-table-all w3-centered  w3-hoverable">
            <tr><th>Length</th><th>Count</th></tr>
            {% for length, count in cycle_len_counts %}
            <tr><td> {{ length }}</td><td>{{ count }}</td></tr>
            {% endfor %}
        </table>
    </div>
</div>

<div class="w3-row-padding">

    {% for cycle in cycles %}
    {% set cycle_loop = loop %}
    <div class="w3-container w3-margin w3-border-large">
        <header class="w3-container w3-us-blue">
            <h3>{% if cycle['len'] == 1 %}Fixed Point{% else %}Length {{ cycle['len'] }} Cycle{% endif %}</h3>
        </header>
        <div style="overflow-x: auto">
            <table class="w3-table-all w3-centered  w3-hoverable">
                <tr class="w3-us-blue">
                    {% for variable in variables %}
                    <th>{{ variable }}</th>
                    {% endfor %}
                </tr>
                {% for state in cycle['states'] %}
                <tr>
                    {% for value in state %}
                    <td>{{ value }}</td>
                    {% endfor %}
                </tr>
                {% endfor %}
            </table>
        </div>
        <footer class="w3-container w3-us-red">
            <div class="w3-half w3-center"> {{ cycle['percent'] }}%</div>
            <div class="w3-half w3-center">Count {{ cycle['count'] }}</div>
        </footer>
        <center>
            <div class="container">
                <div id="path-len-cycle-{{ cycle_loop.index }}">
                    {{ cycle['len-dist-image'] }}
                </div>
                <button class="w3-btn w3-us-red w3-margin w3-circle"
                        onclick="printElement('path-len-cycle-{{ cycle_loop.index }}')">Print</button>
            </div>
        </center>
        <center>
        {% for key in cycle['limit-set-stats-images'] %}
        {% set image_loop = loop %}
            <div class="container">
                <div id="traj-env-cycle-{{ cycle_loop.index }}-image-{{ image_loop.index }}">
                    {{ cycle['limit-set-stats-images'][key] }}
                </div>
                <button class="w3-btn w3-us-red w3-margin w3-circle"
                        onclick="printElement('traj-env-cycle-{{ cycle_loop.index }}-image-{{ image_loop.index }}')">Print</button>
            </div>
        {% endfor %}
        </center>
    </div>
    {% endfor %}



  <script>
    function printElement(elementId) {
      const contents = document.getElementById(elementId).outerHTML;
      const popupWindow = window.open('', '_blank', 'location=no,menubar=no,scrollbars=no,status=no,toolbar=no');
      popupWindow.document.open();
      popupWindow.document.write('<html><head><style></style></head><body onload="window.print()">' + contents + '</html>');
      popupWindow.document.close();
    }
  </script>


<textarea name="model_result" style="display: none;">
Length,sample%,{{ variables|join(',') }}
{% for cycle in cycles %}{{ cycle['len'] }},{{ cycle['percent'] }}
{% for state in cycle['states'] %},,{{ state|join(',') }}
{% endfor %}
{% endfor %}
</textarea>
<input class="w3-btn w3-us-red w3-margin w3-round"
       value="Download csv"
       onclick="download_result()">



</div>

{% endblock %}
