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

<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>


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

    <div class="w3-container w3-margin w3-border-large">
        <div style="overflow-x: auto">
            <table class="w3-table-all w3-centered w3-hoverable">
                <caption class="w3-container w3-us-blue"><h3>Fixed points/Steady states</h3></caption>
                <tr class="w3-us-blue">
                    {% for variable in variables %}
                    <th>{{ variable }}</th>
                    {% endfor %}
                </tr>
                {% for fixed_point in fixed_points %}
                <tr>
                    {% for val in fixed_point %}
                    <td>{{ val }}</td>
                    {% endfor %}
                </tr>
                {% endfor %}
            </table>
        </div>
    </div>

<textarea name="model_result" style="display: none;">
{{ variables|join(',') }}
{% for fixed_point in fixed_points %}{{ fixed_point|join(',') }}
{% endfor %}
</textarea>
<input class="w3-btn w3-us-red w3-margin w3-round"
       value="Download csv"
       onclick="download_result()">


</div>

{% endblock %}
