{% extends "base.html" %}
{% block title %}D-Scan - Results{% endblock %}
{% block header %}

Results{% if system and system|length==2 %} - <a href="http://evemaps.dotlan.net/map/{{ system[1]|replace(" ", "_") }}/{{ system[0]}}">{{ system[0] }} / {{ system[1] }}</a>{% endif %}

<div style="float:right;">
    <a data-toggle="tooltip" data-trigger="hover focus"  href="#" id="btn-toggle-labels" type="button" class="btn btn-info">
        <i class="icon-tags"></i>Toggle Labels
    </a>
</div>

{% endblock %}
{% block body %}
<link rel="stylesheet" type="text/css" href="/static/css/dscan.css" />

{% if sizemap and sizestotal %}
<div class="row">
    <h5 class="progress-header">Ship Hull Size</h5>
    <div class="progress">
        {% for size in sizeorder %}
        <div id="{{ size }}-pb" data-toggle="tooltip" data-trigger="hover focus click" data-container="body" class="progress-bar" title="{{ size }} - {{ sizemap[size].values()|sum }}" style="width: {{ (sizemap[size].values()|sum/sizestotal*100) }}%; background-color: {{ string2color(size) }}; ">
            {% if (sizemap[size].values()|sum/sizestotal*100) > 7.5 %}
            <span class="pgtext">{{ size }} [{{ sizemap[size].values()|sum }}]</span>
            {% endif %}
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

{% for category in categorylist %}
{% if category in ["Ship"] and sums[category]>1 %}
<div class="row">
    <h5 class="progress-header">{{ category }} (Specific)</h5>
    <div class="progress">
        {% for item, value, color in categorywide[category] %}
        <div id="{{ item|replace(" ","") }}-pb" data-trigger="hover focus click" data-toggle="tooltip" class="progress-bar" title="{{ item }} - {{ value }}" style="width: {{ (value/sums[category]*100) }}%; background-color: {{ string2color(item) }}; ">
                {% if (value/sums[category]*100) > 7.5 %}
                <span class="pgtext">{{ item }} [{{ value }}]</span>
            {% endif %}
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}
{% endfor %}

{% for category in categorylist %}
{% if categories[category]|length > 1 %}
<div class="row">
    <h5 class="progress-header">{{ category }} (Grouped)</h5>
    <div class="progress">
        {% for item, value, color in categories[category] %}
        <div id="{{ item|replace(" ","") }}-pb" data-trigger="hover focus click" data-toggle="tooltip" class="progress-bar" title="{{ item }} - {{ value }}" style="width: {{ (value/sums[category]*100) }}%; background-color: {{ string2color(item) }}; ">
            {% if (value/sums[category]*100) > 7.5 %}
            <span class="pgtext">{{ item }} [{{ value }}]</span>
            {% endif %}
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}
{% endfor %}

<ul class="nav nav-tabs">
    <li><a onClick="$('.remove-lower-margin').collapse('show') | $('.remove-lower-margin').collapse('hide')" class="button button-primary">Toggle All</a></li>
    <li class="active"><a href="#grouped" data-toggle="tab">Grouped</a></li>
    <li><a href="#specific" data-toggle="tab">Specific</a></li>
</ul>
<div class="tab-content row">
    <div class="tab-pane fade active in active" id="grouped">
        {% for category in categorylist %}
            <div class="col-md-4">
                <div class="panel panel-primary">
                    <div class="panel-heading"><span class="panel-title">{{ category }}<span class="badge pull-right">{{ sums[category] }}</span></span></div>
                    <div class="panel-body">
                        <ul class="list-group">
                            {% for item, value, colour in categories[category] %}
                            <a class="list-group-item black-link" data-toggle="collapse" data-target="#{{ item|replace(" ","") }}"><span class="text{{ color }}"><i class="icon-list"></i> {{ item }}</span><span class="badge pull-right">{{ value }}</span></a>
                                <ul class="list-group remove-lower-margin collapse" id="{{ item|replace(" ","") }}">
                                    {% for i, v, c in groups[item] %}
                                    <li class="list-group-item indent">{{ i }}<span class="badge pull-right" ><span class="text{{ c }}">{{ v }}</span></span></li>
                                    {% endfor %}
                                </ul>
                            {% endfor %}
                        <ul>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
    <div class="tab-pane fade in" id="specific">
        {% for category in categorylist %}
            <div class="col-md-4">
                <div class="panel panel-primary">
                    <div class="panel-heading"><span class="panel-title">{{ category }}<span class="badge pull-right">{{ sums[category] }}</span></span></div>
                    <div class="panel-body">
                        <ul class="list-group">
                            {% for item, value, colour in categorywide[category] %}
                                <li class="list-group-item">{{ item }}<span class="badge pull-right" ><span class="text{{ colour }}">{{ value }}</span></span></li>
                            {% endfor %}
                        <ul>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>


</div>

<script>
// Tooltips
$(".progress-bar").tooltip();
$("#btn-toggle-labels").tooltip();
// Activate collapse for labels, then hide them
$(".progress-header").collapse();
$(".progress-header").collapse('hide');
// Callbacks to toggle labels
function showLabels() {
    $(".progress-header").collapse('show');
    $("#btn-toggle-labels").click(hideLabels);
}
function hideLabels() {
    $(".progress-header").collapse('hide');
    $("#btn-toggle-labels").click(showLabels);
}

$("#btn-toggle-labels").click(showLabels);
</script>


{% endblock %}