{% load i18n %}
{% load humanize %}

<style type="text/css">
li#nav_dashavalanche>a::after {
    content: '';
    position: absolute;
    left: 0;
    display: inline-block;
    height: 0.4em;
    width: 100%;
    border-bottom: 2px solid #755467;
    margin-top: 5px;
}
li#nav_dashavalancherisk>a::after {
    content: '';
    position: absolute;
    left: 0;
    display: inline-block;
    height: 0.4em;
    width: 75%;
    border-bottom: 2px solid #755467;
    margin-top: 12px;
    margin-left: 25px;
    margin-right: 25px;
}
</style>


<div class="gridster">
	<h1 class="dashing-title">{% trans "Avalanche Risk" %}
		{% include "links_title.html" %}
		{% include "qlink_span.html" %}
	</h1>
  	<ul>
		<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
			<h1 class='widget-number'>{{Population | intword | intcomma}}</h1>
			<span class='widget-title'>{% trans "Total Population" %}</span>
		</li>
		<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
			<div>{{ total_pop_atrisk_chart.as_html }}</div>
			<span class='widget-title'>{% trans "Avalanche risk total population" %}</span>
			<span class='pie-title1'>{{ total_pop_atrisk_percent }}%</span>
			<span class='pie-title2'>{{ total_ava_population | intword | intcomma}}</span>
		</li>
		<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
			<div>{{ total_area_atrisk_chart.as_html }}</div>
			<span class='widget-title'>{% trans "Avalanche risk area" %} ({% blocktrans %}km<sup>2</sup>{% endblocktrans %})</span>
			<span class='pie-title1'>{{ total_area_atrisk_percent }}%</span>
			<span class='pie-title2'>{{ total_ava_area | intword | intcomma}}</span>
		</li>
		<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
			<div>{{ high_pop_atrisk_chart.as_html }}</div>
			<span class='widget-title'>{% trans "High avalanche risk population" %}</span>
			<span class='pie-title1'>{{ total_pop_high_atrisk_percent }}%</span>
			<span class='pie-title2'>{{ high_ava_population | intword | intcomma}}</span>
		</li>
		<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
			<div>{{ med_pop_atrisk_chart.as_html }}</div>
			<span class='widget-title'>{% trans "Moderate avalanche risk population" %}</span>
			<span class='pie-title1'>{{ total_pop_med_atrisk_percent }}%</span>
			<span class='pie-title2'>{{ med_ava_population | intword | intcomma}}</span>
		</li>




  	</ul>
</div>

<div  class="gridster">
	<table>
		<thead>
			<tr class='dataitem'>
				<td colspan=5 style="padding:3px;font-weight:bolder;">{% trans "Population in avalanche risk areas" %}</td>
				<td colspan=2 style="text-align:right;padding:3px;"><div class='showFlag_base' onClick='show_hide_base()'>{% if "detail_base" in checked %}{% trans "Hide Detail" %}{% else %}{% trans "Show Detail" %}{% endif %}</div></td>
			</tr>
			<tr>
				<th rowspan=2><span>{% trans "Region" %}</span></th>
				<th colspan=2>{% trans "Total" %}</th>
				<th colspan=2>{% trans "High" %}</th>
				<th colspan=2>{% trans "Moderate" %}</th>
				<!-- <th rowspan=2><span>Health Facilities</span></th>
				<th rowspan=2><span>Length of Roads</span></th> -->
			</tr>
			<tr>
				<th><span>{% trans "Pop" %}</span></th>
				<th><span>{% trans "Area" %}</span></th>
				<th><span>{% trans "Pop" %}</span></th>
				<th><span>{% trans "Area" %}</span></th>
				<th><span>{% trans "Pop" %}</span></th>
				<th><span>{% trans "Area" %}</span></th>
			</tr>
		</thead>
		<tbody>
			<tr class='dataitem'>
				<td rowspan=2 class="parent_list">{{parent_label}}</td>
				<td class="parent_value">{{total_ava_population | intword | intcomma}}</td>
				<td class="parent_value">{{total_ava_area | intword | intcomma}}</td>
				<td class="parent_value">{{high_ava_population | intword | intcomma}}</td>
				<td class="parent_value">{{high_ava_area | intword | intcomma}}</td>
				<td class="parent_value">{{med_ava_population | intword | intcomma}}</td>
				<td class="parent_value">{{med_ava_area | intword | intcomma}}</td>
			</tr>
			<tr>
				<td class="rowChartIndicator" style="background: linear-gradient(to right, #efe3af {{ total_pop_atrisk_percent }}%,#ffffff {{ total_pop_atrisk_percent }}%);">{{ total_pop_atrisk_percent }}%</td>
				<td class="rowChartIndicator" style="background: linear-gradient(to right, #efe3af {{ total_area_atrisk_percent }}%,#ffffff {{ total_area_atrisk_percent }}%);">{{ total_area_atrisk_percent }}%</td>
				<td class="rowChartIndicator" style="background: linear-gradient(to right, #efe3af {{ total_pop_high_atrisk_percent }}%,#ffffff {{ total_pop_high_atrisk_percent }}%);">{{ total_pop_high_atrisk_percent }}%</td>
				<td class="rowChartIndicator" style="background: linear-gradient(to right, #efe3af {{ total_area_high_atrisk_percent }}%,#ffffff {{ total_area_high_atrisk_percent }}%);">{{ total_area_high_atrisk_percent }}%</td>
				<td class="rowChartIndicator" style="background: linear-gradient(to right, #efe3af {{ total_pop_med_atrisk_percent }}%,#ffffff {{ total_pop_med_atrisk_percent }}%);">{{ total_pop_med_atrisk_percent }}%</td>
				<td class="rowChartIndicator" style="background: linear-gradient(to right, #efe3af {{ total_area_med_atrisk_percent }}%,#ffffff {{ total_area_med_atrisk_percent }}%);">{{ total_area_med_atrisk_percent }}%</td>
			</tr>
			{% for data in lc_child %}
			<tr class='dataitem detail_base {% if "detail_base" not in checked %} hide {% endif %}' onclick="window.document.location='?page=avalancherisk&code={{data.code}}';">
				<td rowspan=2  class="detail_list">{{data.na_en}}</td>
				<td class="detail_value">{{data.total_ava_population | intword | intcomma}}</td>
				<td class="detail_value">{{data.total_ava_area | intword | intcomma}}</td>
				<td class="detail_value">{{data.high_ava_population | intword | intcomma}}</td>
				<td class="detail_value">{{data.high_ava_area | intword | intcomma}}</td>
				<td class="detail_value">{{data.med_ava_population | intword | intcomma}}</td>
				<td class="detail_value">{{data.med_ava_area | intword | intcomma}}</td>
			</tr>
			<tr class='dataitem detail_base {% if "detail_base" not in checked %} hide {% endif %}'>
				<td class="rowChartIndicator" style="background: linear-gradient(to right, #efe3af {{ data.total_pop_atrisk_percent }}%,#ffffff {{ data.total_pop_atrisk_percent }}%);">{{ data.total_pop_atrisk_percent }}%</td>
				<td class="rowChartIndicator" style="background: linear-gradient(to right, #efe3af {{ data.total_area_atrisk_percent }}%,#ffffff {{ data.total_area_atrisk_percent }}%);">{{ data.total_area_atrisk_percent }}%</td>
				<td class="rowChartIndicator" style="background: linear-gradient(to right, #efe3af {{ data.total_pop_high_atrisk_percent }}%,#ffffff {{ data.total_pop_high_atrisk_percent }}%);">{{ data.total_pop_high_atrisk_percent }}%</td>
				<td class="rowChartIndicator" style="background: linear-gradient(to right, #efe3af {{ data.total_area_high_atrisk_percent }}%,#ffffff {{ data.total_area_high_atrisk_percent }}%);">{{ data.total_area_high_atrisk_percent }}%</td>
				<td class="rowChartIndicator" style="background: linear-gradient(to right, #efe3af {{ data.total_pop_med_atrisk_percent }}%,#ffffff {{ data.total_pop_med_atrisk_percent }}%);">{{ data.total_pop_med_atrisk_percent }}%</td>
				<td class="rowChartIndicator" style="background: linear-gradient(to right, #efe3af {{ data.total_area_med_atrisk_percent }}%,#ffffff {{ data.total_area_med_atrisk_percent }}%);">{{ data.total_area_med_atrisk_percent }}%</td>
			</tr>
			{% endfor %}
			<tr>
				<td class="separator" colspan=7></td>
			</tr>
		</tbody>
	</table>
</div>



<SCRIPT TYPE="text/javascript">
function show_hide_base(){
	if ($("div.showFlag_base").text() == "{% trans "Show Detail" %}") {
		$("div.showFlag_base").text('{% trans "Hide Detail" %}');
		_checked.push('detail_base');
	} else {
		$("div.showFlag_base").text('{% trans "Show Detail" %}');
		removeA(_checked, 'detail_base');
	}
	$( ".detail_base" ).toggleClass(function(){
		if ( $( this ).parent().is( ".hide" ) ) {
		    return "show";
		} else {
			// $("div.showFlag").text("<p>Show Detail</p>");
		    return "hide";
		}
	});
}




</SCRIPT>