{% extends 'common/panel.html' %}
{% load humanize %}
{% load set_var %}
{% load percentage %}
{% load sortcosts %}
{% block title %}{{instance.name}}{% endblock title %}
{% block panel %}
<h1>Analysis results for {{instance.name}}</h1>

{% if not instance.done %}
{% block progress %}
<h4 id="{{instance.uid}}_progress_html">{{ instance.status_html|safe }}</h4>
<div id="{{instance.uid}}_progressbar" class="progressbar"></div> 
<br/>

<script>
// Make sure this only gets run once; check if the function is undefined
var {{instance.uid}}_running;
var {{instance.uid}}_delay;
var {{instance.uid}}_call_again;
var update_progress_info_{{instance.uid}};
var {{instance.uid}}_done_panel;

madrona.onShow(function(){
    $(function() {
        $( "#{{instance.uid}}_progressbar" ).progressbar({ value: 0 });
    });

    // This should only happen the first time the panel is loaded
    if (typeof(update_progress_info_{{instance.uid}}) == "undefined") {
        {{instance.uid}}_running = false;

        update_progress_info_{{instance.uid}} = function() {
            $.getJSON('{% url analysis-progress instance.uid %}' , function(data, status){
                if (data) {
                    var progress = parseInt(data.complete) / parseInt(data.total);
                    var error = parseInt(data.error);
                    var progress_html = data.html;
                    $('#{{instance.uid}}_progressbar').progressbar( "option", "value", progress*100 );
                    $('#{{instance.uid}}_progress_html').html(progress_html);
                    if (error < 1) {
                        if (progress < 1.0) {
                            {{instance.uid}}_running = true;
                            if ({{instance.uid}}_call_again) {
                                window.setTimeout(update_progress_info_{{instance.uid}}, {{instance.uid}}_delay);
                            }
                            {{instance.uid}}_call_again = true;
                        } else {
                            {{instance.uid}}_running = false;
                            {{instance.uid}}_done_panel = madrona.panel({appendTo: $('#panel-holder'), 
                                showCloseButton: true});
                            {{instance.uid}}_done_panel.showUrl(
                            '/analysistools/{{instance.uid}}/progress.html', { showClose: true });
                        }
                    }
                }
            });
        };
    } 
    {{instance.uid}}_delay = 5000; // ms
    if (!{{instance.uid}}_running) {
        {{instance.uid}}_call_again = true;
    } else {
        // This avoids calling off mulitple rounds of self-calling funcitons
        {{instance.uid}}_call_again = false;
    }
    update_progress_info_{{instance.uid}}();

});

madrona.beforeDestroy(function() {
    // {{instance.uid}}_delay = 20000;
    {{instance.uid}}_running = false;
});
</script>

{% endblock progress %}
{% else %}
<script type="text/javascript">
madrona.onShow(function(){
    $('a.toggle_na_species').click( function(e) {
        e.preventDefault();
        $('.showhidelang').toggle();
        $('tr.nogoal').toggle();
    });
});
</script>
{% endif %}

    {% set results = instance.results %}
    <div class="tabs">
        <ul>
            <li><a href="#Inputs"><span>Inputs</span></a></li>
            {% if instance.done %}
            <li><a href="#results"><span>Results</span></a></li>
            {% endif %}
        </ul>
        <div id="Inputs">
            <div class="box">
                <h5>Name</h5> 
                <p>{{ instance.name }}</p>
                {% if instance.description %}
                <h5>Description/Notes</h5>
                <p> {{instance.description}} </p>
                {% endif %}
            </div>

            <div class="box">
             <table class="table">
             <thead> <th>Species Key</th><th>Goal Proportion</th><th>Importance Weighting</th></thead>
             {% for k,v in results.targets_penalties.items %}
             {% if v.target > 0 %}
             <tr> <td><strong>{{k}}</strong></td><td>{{v.target}} </td><td>{{v.penalty}}</td></tr>
             {% endif %}
             {% endfor %}
             </table>
             <table class="table">
                 <thead> <th>Prioritization Constraints</th><th></th></thead>
             {%for k,v in results.costs.items|sortcosts %}
                {% if k == "watershed-condition" %}
                <tr> <td><strong>Watershed Condition</strong></td><td>{% if v > 0%}&#10003;{% endif %}</td></tr>
                {% endif %}
                {% if k == "climate" %}
                <tr> <td><strong>Climate Change Vulnerability</strong></td><td>{% if v > 0%}&#10003;{% endif %}</td></tr>
                {% endif %}
                {% if k == "invasives" %}
                <tr> <td><strong>Vulnerability to Invasive Species</strong></td><td>{% if v > 0%}&#10003;{% endif %}</td></tr>
                {% endif %}
             {%endfor%}
             </table>
             <p style="color:white">Estimated Scaling Factor = {{instance.input_scalefactor}}</p>
            </div>
        </div>
        {% if instance.done %}
        <div id="results" class="tabs">
        <ul>
            <li><a href="#summary"><span>Summary</span></a></li>
            <li><a href="#watersheds"><span>Subbasins</span></a></li>
            <li><a href="#species"><span>Species</span></a></li>
        </ul>

        <div id="summary">
            <div class="box">
                <p>The optimum watershed prioritization scenario includes {{results.num_units}} subbasins covering {{results.area|floatformat:0|intcomma}} km<sup>2</sup>. </p>
                <p>Goals were met for {{results.num_met}} of {{results.num_species}} focal species.</p>
            </div>
        </div>
        <div id="watersheds">
            <div class="box">
                <p>The optimum watershed prioritization scenario includes {{results.num_units}} subbasins covering {{results.area|floatformat:0|intcomma}} km<sup>2</sup>. </p>
                <p>Ranking of prioritization constraints is <em>relative</em>. See <a href="/docs.html" target="_blank">data and methods</a> for more details. </p> 
                <table>
                <table class="table" summary="Subbasin Table">
                <thead>
                    <tr>
                    <th scope="col"> Subbasin </th> 
                    {%for k,v in results.costs.items|sortcosts %}
                        {% if v > 0%}
                            {% if k == "watershed-condition" %}
                            <th scope="col"> Watershed Condition</th>
                            {% endif %}
                            {% if k == "climate" %}
                            <th scope="col"> Climate Change Vulnerability</th> 
                            {% endif %}
                            {% if k == "invasives" %}
                            <th scope="col"> Vulnerability to Invasive Species</th>
                            {% endif %}
                        {% endif %}
                    {%endfor%}
                    <tr>
                </thead>
                <tbody>
                {% for w in results.units %}
                    <tr class="hit">
                    <td>{{w.name}}</td>
                    {%for k,v in results.costs.items|sortcosts %}
                        {% if v > 0 %}
                            {% if k == "climate" %}
                            <td class="{{w.costs.climate}}">{{w.costs.climate}}</td>
                            {% endif %}
                            {% if k == "invasives" %}
                            <td class="{{w.costs.invasives}}">{{w.costs.invasives}}</td>
                            {% endif %}
                            {% if k == "watershed-condition" %}
                                {% if results.costs.invasives > 0 %}
                                <td class="{{w.costs.watershedconditionnoais}}">{{w.costs.watershedconditionnoais}}</td>
                                {% else %}
                                <td class="{{w.costs.watershedconditionwithais}}">{{w.costs.watershedconditionwithais}}</td>
                                {% endif %}
                            {% endif %}
                        {% endif %}
                    {% endfor %}
                    </tr>
                {% endfor %}
                </tbody>
                </table>
            </div>
        </div>
        <div id="species">
            <div class="box">
                <p>Goals were met for {{results.num_met}} of {{results.num_species}} focal species.</p>
                <table class="table" id="species_table" summary="Species Table">
                <thead>
                    <tr>
                    <th scope="col"> Species </th>
                    <!-- <th scope="col"> Code </th> -->
                    <th scope="col"> Percent of Total </th>
                    <th scope="col" width="50"> Units </th>
                    <!--
                    <th scope="col"> Goal Amount</th> 
                    <th scope="col"> Best Reserve Amount</th>
                    -->
                    <th scope="col" width="80"> Goal Met?</th>
                    <tr>
                </thead>
                <tbody>
                {% for s in results.species %}
                <tr{% if s.target == 0 %} class="nogoal" style="display:none;"{% else %}class="hit"{% endif %}>
                    <td> <strong>{{s.name}}</strong><br/>({{s.code}})</td>
                    <!-- <td> {{s.code}} </td> -->
                    <td style="text-align:right;"> {{s.pcttotal|percentage:1}} </td>
                    <td> {{s.units}} </td>
                    <!--
                    <td> {{s.target|floatformat:2|intcomma}} </td>
                    <td> {{s.held|floatformat:2|intcomma}} </td> 
                    -->
                    <td style="text-align:center;"> {% if s.target == 0 %} -- {% else %} 
                        {% if s.met %}&#10003;{% else %} NO<br/>(Goal was {{s.target_prop|percentage:0}}){% endif %} 
                         {% endif %}
                    </td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
            <a href="#" class="toggle_na_species" style="font-size:8pt;"><span class="showhidelang" style="display:inline">Show</span><span class="showhidelang" style="display:none">Hide</span> Species Without Goal Amount</a>
        </div>
        </div>
        {% endif %}
    </div>

{% endblock panel %}
