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

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


<div style="width: 960px;margin: 0 auto;margin-bottom:35px; margin-top: 10px;">
	<select id="select_evt" class="right" onchange="location = '?page=earthquake&eq_event='+this.value+'{{add_link}}';">
		{% for list in eq_list %}
		  <option {% if list.selected %} selected {% endif %} value="{{ list.event_code }}">{{ list.detail_title }}</option>
		{% endfor %}
	</select>
</div>

<div class="gridster">
	<h1 class="dashing-title">{% trans "Earthquake" %}
		{% 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="2" data-col="1" data-sizex="2" data-sizey="1">
			<h1 class='widget-number'>{{total_eq_pop | intword | intcomma}}</h1>
			<span class='widget-title'>{% trans "Total earthquake affected Population" %}</span>
		</li>

		<li data-row="1" data-col="6" data-sizex="1" data-sizey="1">
			<h1 class='widget-number'>{{settlement | intword | intcomma}}</h1>
			<span class='widget-title'>{% trans "Number of Settlements" %}</span>
		</li>

		<li data-row="1" data-col="3" data-sizex="3" data-sizey="2">
			<div>{{ EQ_chart.as_html }}</div>
			<span class='widget-title'>{% trans "Earthquake Mercalli Intensity Scale population overview" %}</span>
		</li>
		<li data-row="2" data-col="6" data-sizex="1" data-sizey="1">
			<h1 class='widget-number'>{{total_eq_settlements | intword | intcomma}}</h1>
			<span class='widget-title'>{% trans "Number of affected settlements" %}</span>
		</li>


  	</ul>
</div>


<div  class="gridster">
	<table>
		<thead>
			<tr class='dataitem'>
				<td colspan=15 style="padding:3px;font-weight:bolder;">{% trans "Earthquake affected Population and settlement overview" %}</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=3><span>{% trans "Region" %}</span></th>
				<th colspan=16>{% trans "Mercalli Intensity Scale" %}</th>
			</tr>
			<tr>
				<th colspan=2 class="eq_weak">{% trans "II-III: Weak" %}</th>
				<th colspan=2 class="eq_light">{% trans "IV: Light" %}</th>
				<th colspan=2 class="eq_moderate">{% trans "V: Moderate" %}</th>
				<th colspan=2 class="eq_strong">{% trans "VI: Strong" %}</th>
				<th colspan=2 class="eq_verystrong">{% trans "VII: Very-strong" %}</th>
				<th colspan=2 class="eq_severe">{% trans "VIII: Severe" %}</th>
				<th colspan=2 class="eq_violent">{% trans "IX: Violent" %}</th>
				<th colspan=2 class="eq_extreme">{% trans "X+: Extreme" %}</th>
			</tr>
			<tr>
				<th class="eq_weak"><span>{% trans "Pop" %}</span></th>
				<th class="eq_weak"><span>{% trans "Settl." %}</span></th>
				<th class="eq_light"><span>{% trans "Pop" %}</span></th>
				<th class="eq_light"><span>{% trans "Settl." %}</span></th>
				<th class="eq_moderate"><span>{% trans "Pop" %}</span></th>
				<th class="eq_moderate"><span>{% trans "Settl." %}</span></th>
				<th class="eq_strong"><span>{% trans "Pop" %}</span></th>
				<th class="eq_strong"><span>{% trans "Settl." %}</span></th>
				<th class="eq_verystrong"><span>{% trans "Pop" %}</span></th>
				<th class="eq_verystrong"><span>{% trans "Settl." %}</span></th>
				<th class="eq_severe"><span>{% trans "Pop" %}</span></th>
				<th class="eq_severe"><span>{% trans "Settl." %}</span></th>
				<th class="eq_violent"><span>{% trans "Pop" %}</span></th>
				<th class="eq_violent"><span>{% trans "Settl." %}</span></th>
				<th class="eq_extreme"><span>{% trans "Pop" %}</span></th>
				<th class="eq_extreme"><span>{% trans "Settl." %}</span></th>
			</tr>
		</thead>
		<tbody>
			<tr class='dataitem'>
				<td class="parent_list">{{parent_label}}</td>
				<td class="parent_value eq_weak">{{pop_shake_weak | intword | intcomma}}</td>
				<td class="parent_value eq_weak">{{settlement_shake_weak | intword | intcomma}}</td>
				<td class="parent_value eq_light">{{pop_shake_light | intword | intcomma}}</td>
				<td class="parent_value eq_light">{{settlement_shake_light | intword | intcomma}}</td>
				<td class="parent_value eq_moderate">{{pop_shake_moderate | intword | intcomma}}</td>
				<td class="parent_value eq_moderate">{{settlement_shake_moderate | intword | intcomma}}</td>
				<td class="parent_value eq_strong">{{pop_shake_strong | intword | intcomma}}</td>
				<td class="parent_value eq_strong">{{settlement_shake_strong | intword | intcomma}}</td>
				<td class="parent_value eq_verystrong">{{pop_shake_verystrong | intword | intcomma}}</td>
				<td class="parent_value eq_verystrong">{{settlement_shake_verystrong | intword | intcomma}}</td>
				<td class="parent_value eq_severe">{{pop_shake_severe | intword | intcomma}}</td>
				<td class="parent_value eq_severe">{{settlement_shake_severe | intword | intcomma}}</td>
				<td class="parent_value eq_violent">{{pop_shake_violent | intword | intcomma}}</td>
				<td class="parent_value eq_violent">{{settlement_shake_violent | intword | intcomma}}</td>
				<td class="parent_value eq_extreme">{{pop_shake_extreme | intword | intcomma}}</td>
				<td class="parent_value eq_extreme">{{settlement_shake_extreme | intword | intcomma}}</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=earthquake&code={{data.code}}{{ eq_link }}';">
				<td class="detail_list">{{data.na_en}}</td>
				<td class="detail_value eq_weak">{{data.pop_shake_weak | intword | intcomma}}</td>
				<td class="detail_value eq_weak">{{data.settlement_shake_weak | intword | intcomma}}</td>
				<td class="detail_value eq_light">{{data.pop_shake_light | intword | intcomma}}</td>
				<td class="detail_value eq_light">{{data.settlement_shake_light | intword | intcomma}}</td>
				<td class="detail_value eq_moderate">{{data.pop_shake_moderate | intword | intcomma}}</td>
				<td class="detail_value eq_moderate">{{data.settlement_shake_moderate | intword | intcomma}}</td>
				<td class="detail_value eq_strong">{{data.pop_shake_strong | intword | intcomma}}</td>
				<td class="detail_value eq_strong">{{data.settlement_shake_strong | intword | intcomma}}</td>
				<td class="detail_value eq_verystrong">{{data.pop_shake_verystrong | intword | intcomma}}</td>
				<td class="detail_value eq_verystrong">{{data.settlement_shake_verystrong | intword | intcomma}}</td>
				<td class="detail_value eq_severe">{{data.pop_shake_severe | intword | intcomma}}</td>
				<td class="detail_value eq_severe">{{data.settlement_shake_severe | intword | intcomma}}</td>
				<td class="detail_value eq_violent">{{data.pop_shake_violent | intword | intcomma}}</td>
				<td class="detail_value eq_violent">{{data.settlement_shake_violent | intword | intcomma}}</td>
				<td class="detail_value eq_extreme">{{data.pop_shake_extreme | intword | intcomma}}</td>
				<td class="detail_value eq_extreme">{{data.settlement_shake_extreme | intword | intcomma}}</td>
			</tr>
			{% endfor %}
			<tr>
				<td class="separator" colspan=17></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>