{% extends "dashboard_base.html" %}
{% load i18n %}
{% load base_tags %}

{% block dashboard_breadcrumb %} 
    <a href="{% url "dashboard_detail" %}?page=baseline{{add_link}}" class="breadcrumb">{% trans "Baseline" %}</a>
{% endblock dashboard_breadcrumb %}

{% block isi %}
    <div class="row">
        <div class="col s12 m6 l4 xl2">
            <div class="card horizontal cyan white-text">
                <div class="card-image valign-wrapper">
                    <i class="material-icons count-ico">layers</i>
                </div>
                <div class="card-stacked">
                    <div class="card-content">
                        <span class="card-title count-num-dash">33.5 M</span>
                        <p>{% trans "Population" %}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col s12 m6 l4 xl2">
            <div class="card horizontal green white-text">
                <div class="card-image valign-wrapper">
                    <i class="material-icons count-ico">layers</i>
                </div>
                <div class="card-stacked">
                    <div class="card-content">
                        <span class="card-title count-num-dash">4.3 M</span>
                        <p>{% trans "Buildings" %}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col s12 m6 l4 xl2">
            <div class="card horizontal red white-text">
                <div class="card-image valign-wrapper">
                    <i class="material-icons count-ico">layers</i>
                </div>
                <div class="card-stacked">
                    <div class="card-content">
                        <span class="card-title count-num-dash">643.7 K</span>
                        <p>{% trans "Area" %}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col s12 m6 l4 xl2">
            <div class="card horizontal amber white-text">
                <div class="card-image valign-wrapper">
                    <i class="material-icons count-ico">layers</i>
                </div>
                <div class="card-stacked">
                    <div class="card-content">
                        <span class="card-title count-num-dash">44 K</span>
                        <p>{% trans "Settlements" %}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col s12 m6 l4 xl2">
            <div class="card horizontal deep-purple white-text">
                <div class="card-image valign-wrapper">
                    <i class="material-icons count-ico">layers</i>
                </div>
                <div class="card-stacked">
                    <div class="card-content">
                        <span class="card-title count-num-dash">2.3 K</span>
                        <p>{% trans "Health Facilities" %}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col s12 m6 l4 xl2">
            <div class="card horizontal blue white-text">
                <div class="card-image valign-wrapper">
                    <i class="material-icons count-ico">layers</i>
                </div>
                <div class="card-stacked">
                    <div class="card-content">
                        <span class="card-title count-num-dash">585.5 K</span>
                        <p>{% trans "Road (km)" %}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col s12">
            <div class="card">
                <div class="card-content">
                    <span class="card-title">
                        {% trans "Map" %}
                    </span>
                </div>
            </div>
        </div>

        <div class="col s12 m6 xl3">
            <div class="card">
                <div class="card-image">
                    <button class="btn-floating btn-flat btn-flat-border waves-effect waves-light grey lighten-2" style="position:absolute; margin: 3px;"><i class="material-icons">check</i></button>
                    
                    <a href="#" class="btn-floating btn-large halfway-fab waves-effect waves-light red" style="right: 72px;">643.7 K</a>
                    <a class="btn-floating halfway-fab waves-effect waves-light red activator"><i class="material-icons">info</i></a>
                </div>
                <div class="card-content">
                    <span class="card-title">{% trans "Population" %}</span>
                </div>
                <div class="card-reveal">
                    <span class="card-title grey-text text-darken-4"><i class="material-icons right close">close</i></span>
                </div>
            </div>
        </div>

        <div class="col s12">
            <div class="card">
                <div class="card-content">
                    <span class="card-title">
                        {% trans "Table" %}
                    </span>
                    <table class="striped highlight online">
                        <thead>
                            <tr>
                                <th rowspan="2">Region</th>
                                <th rowspan="2" class="hum"><i class="fa fa-building"></i></th>
                                <th rowspan="2" class="hum"><i class="fa fa-home"></i></th>
                                <th colspan="2">Built-Up</th>
                                <th colspan="2">Cultivated</th>
                                <th colspan="2">Barren/Rangeland</th>
                                <th colspan="2">Total</th>
                            </tr>
                            <tr>
                                <th class="hum">Pop</th>
                                <th class="hum">Area (km<sup>2</sup>)</th>
                                <th class="hum">Pop</th>
                                <th class="hum">Area (km<sup>2</sup>)</th>
                                <th class="hum">Pop</th>
                                <th class="hum">Area (km<sup>2</sup>)</th>
                                <th class="hum">Pop</th>
                                <th class="hum">Area (km<sup>2</sup>)</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="boldRow">Afghanistan</td>
                                <td class="boldRow">4352500.0</td>
                                <td class="boldRow">44039.0</td>
                                <td class="boldRow">29385145.0</td>
                                <td class="boldRow">4040.3</td>
                                <td class="boldRow">2311304.0</td>
                                <td class="boldRow">74819.0</td>
                                <td class="boldRow">1858059.0</td>
                                <td class="boldRow">564867.1</td>
                                <td class="boldRow">33554509.0</td>
                                <td class="boldRow">643726.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=1';">
                                <td>Kabul</td>
                                <td>379953.0</td>
                                <td>775.0</td>
                                <td>4527687.0</td>
                                <td>303.7</td>
                                <td>142697.0</td>
                                <td>831.3</td>
                                <td>90660.0</td>
                                <td>3520.2</td>
                                <td>4761044.0</td>
                                <td>4655.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=30';">
                                <td>Hirat</td>
                                <td>366580.0</td>
                                <td>2666.0</td>
                                <td>2381639.0</td>
                                <td>323.9</td>
                                <td>80069.0</td>
                                <td>8173.9</td>
                                <td>50775.0</td>
                                <td>46440.3</td>
                                <td>2512480.0</td>
                                <td>54938.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=6';">
                                <td>Nangarhar</td>
                                <td>192668.0</td>
                                <td>1356.0</td>
                                <td>1599173.0</td>
                                <td>189.9</td>
                                <td>113880.0</td>
                                <td>1056.9</td>
                                <td>104757.0</td>
                                <td>6150.2</td>
                                <td>1817809.0</td>
                                <td>7397.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=33';">
                                <td>Kandahar</td>
                                <td>241059.0</td>
                                <td>2355.0</td>
                                <td>1353169.0</td>
                                <td>230.9</td>
                                <td>172111.0</td>
                                <td>4300.5</td>
                                <td>106771.0</td>
                                <td>49633.3</td>
                                <td>1632051.0</td>
                                <td>54165.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=18';">
                                <td>Balkh</td>
                                <td>203545.0</td>
                                <td>1228.0</td>
                                <td>1467077.0</td>
                                <td>240.7</td>
                                <td>79852.0</td>
                                <td>5410.3</td>
                                <td>32666.0</td>
                                <td>11118.3</td>
                                <td>1579593.0</td>
                                <td>16769.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=16';">
                                <td>Takhar</td>
                                <td>235127.0</td>
                                <td>1193.0</td>
                                <td>1498884.0</td>
                                <td>225.9</td>
                                <td>55491.0</td>
                                <td>4980.1</td>
                                <td>16030.0</td>
                                <td>7113.4</td>
                                <td>1570405.0</td>
                                <td>12319.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=11';">
                                <td>Ghazni</td>
                                <td>177869.0</td>
                                <td>3252.0</td>
                                <td>1117976.0</td>
                                <td>176.8</td>
                                <td>193817.0</td>
                                <td>3373.6</td>
                                <td>154212.0</td>
                                <td>18117.5</td>
                                <td>1466006.0</td>
                                <td>21668.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=32';">
                                <td>Hilmand</td>
                                <td>266853.0</td>
                                <td>2094.0</td>
                                <td>927561.0</td>
                                <td>247.3</td>
                                <td>261751.0</td>
                                <td>3421.1</td>
                                <td>136912.0</td>
                                <td>56340.0</td>
                                <td>1326223.0</td>
                                <td>60008.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=28';">
                                <td>Faryab</td>
                                <td>184546.0</td>
                                <td>1046.0</td>
                                <td>1221639.0</td>
                                <td>187.0</td>
                                <td>49008.0</td>
                                <td>5560.1</td>
                                <td>34304.0</td>
                                <td>14971.2</td>
                                <td>1304951.0</td>
                                <td>20718.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=15';">
                                <td>Badakhshan</td>
                                <td>176721.0</td>
                                <td>2140.0</td>
                                <td>1134799.0</td>
                                <td>144.4</td>
                                <td>48859.0</td>
                                <td>3718.0</td>
                                <td>35645.0</td>
                                <td>39597.2</td>
                                <td>1219304.0</td>
                                <td>43460.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=17';">
                                <td>Kunduz</td>
                                <td>145100.0</td>
                                <td>852.0</td>
                                <td>1045096.0</td>
                                <td>163.4</td>
                                <td>117594.0</td>
                                <td>2418.2</td>
                                <td>17422.0</td>
                                <td>5322.2</td>
                                <td>1180113.0</td>
                                <td>7904.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=9';">
                                <td>Baghlan</td>
                                <td>150795.0</td>
                                <td>1501.0</td>
                                <td>994378.0</td>
                                <td>152.5</td>
                                <td>64519.0</td>
                                <td>2808.5</td>
                                <td>41293.0</td>
                                <td>14699.3</td>
                                <td>1100189.0</td>
                                <td>17660.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=21';">
                                <td>Ghor</td>
                                <td>132666.0</td>
                                <td>2341.0</td>
                                <td>803093.0</td>
                                <td>104.2</td>
                                <td>31819.0</td>
                                <td>1679.6</td>
                                <td>60233.0</td>
                                <td>35347.6</td>
                                <td>895146.0</td>
                                <td>37131.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=3';">
                                <td>Parwan</td>
                                <td>92994.0</td>
                                <td>945.0</td>
                                <td>696914.0</td>
                                <td>76.0</td>
                                <td>47388.0</td>
                                <td>578.9</td>
                                <td>29842.0</td>
                                <td>4934.8</td>
                                <td>774145.0</td>
                                <td>5590.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=27';">
                                <td>Jawzjan</td>
                                <td>110137.0</td>
                                <td>476.0</td>
                                <td>717046.0</td>
                                <td>120.3</td>
                                <td>32048.0</td>
                                <td>3228.2</td>
                                <td>16284.0</td>
                                <td>7771.6</td>
                                <td>765380.0</td>
                                <td>11120.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=29';">
                                <td>Badghis</td>
                                <td>133438.0</td>
                                <td>1277.0</td>
                                <td>671133.0</td>
                                <td>122.7</td>
                                <td>23844.0</td>
                                <td>4092.0</td>
                                <td>31910.0</td>
                                <td>16494.5</td>
                                <td>726886.0</td>
                                <td>20709.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=20';">
                                <td>Sar-e-Pul</td>
                                <td>112501.0</td>
                                <td>932.0</td>
                                <td>633295.0</td>
                                <td>98.2</td>
                                <td>48327.0</td>
                                <td>3739.5</td>
                                <td>26314.0</td>
                                <td>11429.9</td>
                                <td>707936.0</td>
                                <td>15268.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=31';">
                                <td>Farah</td>
                                <td>114810.0</td>
                                <td>1354.0</td>
                                <td>579288.0</td>
                                <td>110.8</td>
                                <td>76665.0</td>
                                <td>2393.0</td>
                                <td>42808.0</td>
                                <td>47087.1</td>
                                <td>698762.0</td>
                                <td>49591.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=4';">
                                <td>Wardak</td>
                                <td>70440.0</td>
                                <td>2084.0</td>
                                <td>501450.0</td>
                                <td>65.8</td>
                                <td>64040.0</td>
                                <td>1022.4</td>
                                <td>97508.0</td>
                                <td>9491.6</td>
                                <td>662999.0</td>
                                <td>10580.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=26';">
                                <td>Khost</td>
                                <td>91025.0</td>
                                <td>936.0</td>
                                <td>562247.0</td>
                                <td>85.9</td>
                                <td>42743.0</td>
                                <td>552.0</td>
                                <td>55510.0</td>
                                <td>3646.3</td>
                                <td>660500.0</td>
                                <td>4284.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=12';">
                                <td>Paktya</td>
                                <td>53596.0</td>
                                <td>801.0</td>
                                <td>456988.0</td>
                                <td>46.5</td>
                                <td>104217.0</td>
                                <td>760.0</td>
                                <td>70148.0</td>
                                <td>4468.3</td>
                                <td>631354.0</td>
                                <td>5275.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=25';">
                                <td>Paktika</td>
                                <td>79055.0</td>
                                <td>1464.0</td>
                                <td>415114.0</td>
                                <td>67.9</td>
                                <td>67112.0</td>
                                <td>1620.3</td>
                                <td>84140.0</td>
                                <td>17378.8</td>
                                <td>566365.0</td>
                                <td>19067.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=10';">
                                <td>Bamyan</td>
                                <td>71599.0</td>
                                <td>1851.0</td>
                                <td>448143.0</td>
                                <td>52.7</td>
                                <td>38500.0</td>
                                <td>754.3</td>
                                <td>56949.0</td>
                                <td>17026.3</td>
                                <td>543592.0</td>
                                <td>17833.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=22';">
                                <td>Daykundi</td>
                                <td>86432.0</td>
                                <td>2144.0</td>
                                <td>356033.0</td>
                                <td>59.3</td>
                                <td>51395.0</td>
                                <td>652.9</td>
                                <td>129841.0</td>
                                <td>15066.4</td>
                                <td>537269.0</td>
                                <td>15779.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=13';">
                                <td>Kunar</td>
                                <td>52921.0</td>
                                <td>925.0</td>
                                <td>411857.0</td>
                                <td>39.3</td>
                                <td>37648.0</td>
                                <td>285.9</td>
                                <td>83924.0</td>
                                <td>4522.9</td>
                                <td>533429.0</td>
                                <td>4848.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=7';">
                                <td>Laghman</td>
                                <td>50420.0</td>
                                <td>611.0</td>
                                <td>455561.0</td>
                                <td>46.2</td>
                                <td>18962.0</td>
                                <td>215.5</td>
                                <td>46051.0</td>
                                <td>3573.8</td>
                                <td>520574.0</td>
                                <td>3836.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=2';">
                                <td>Kapisa</td>
                                <td>50434.0</td>
                                <td>546.0</td>
                                <td>454250.0</td>
                                <td>46.2</td>
                                <td>33450.0</td>
                                <td>274.1</td>
                                <td>18931.0</td>
                                <td>1561.4</td>
                                <td>506633.0</td>
                                <td>1882.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=19';">
                                <td>Samangan</td>
                                <td>66350.0</td>
                                <td>722.0</td>
                                <td>439979.0</td>
                                <td>70.2</td>
                                <td>15696.0</td>
                                <td>3127.0</td>
                                <td>19361.0</td>
                                <td>9712.2</td>
                                <td>475035.0</td>
                                <td>12909.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=5';">
                                <td>Logar</td>
                                <td>48002.0</td>
                                <td>687.0</td>
                                <td>356293.0</td>
                                <td>47.3</td>
                                <td>67839.0</td>
                                <td>635.2</td>
                                <td>35828.0</td>
                                <td>3712.5</td>
                                <td>459960.0</td>
                                <td>4395.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=23';">
                                <td>Uruzgan</td>
                                <td>67604.0</td>
                                <td>699.0</td>
                                <td>347938.0</td>
                                <td>61.3</td>
                                <td>52811.0</td>
                                <td>614.7</td>
                                <td>39041.0</td>
                                <td>10186.0</td>
                                <td>439790.0</td>
                                <td>10862.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=24';">
                                <td>Zabul</td>
                                <td>63100.0</td>
                                <td>1655.0</td>
                                <td>320367.0</td>
                                <td>56.8</td>
                                <td>34330.0</td>
                                <td>1403.9</td>
                                <td>36367.0</td>
                                <td>15889.6</td>
                                <td>391061.0</td>
                                <td>17350.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=34';">
                                <td>Nimroz</td>
                                <td>52020.0</td>
                                <td>594.0</td>
                                <td>208027.0</td>
                                <td>54.6</td>
                                <td>13818.0</td>
                                <td>934.6</td>
                                <td>16607.0</td>
                                <td>40049.8</td>
                                <td>238452.0</td>
                                <td>41039.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=14';">
                                <td>Nuristan</td>
                                <td>16293.0</td>
                                <td>264.0</td>
                                <td>131701.0</td>
                                <td>9.6</td>
                                <td>18218.0</td>
                                <td>93.4</td>
                                <td>29856.0</td>
                                <td>8883.8</td>
                                <td>179775.0</td>
                                <td>8987.0</td>
                            </tr>
                            
                            <tr class="selectable" onclick="window.document.location='?page=baseline&amp;code=8';">
                                <td>Panjsher</td>
                                <td>15847.0</td>
                                <td>273.0</td>
                                <td>149352.0</td>
                                <td>12.1</td>
                                <td>10789.0</td>
                                <td>108.9</td>
                                <td>9156.0</td>
                                <td>3608.9</td>
                                <td>169298.0</td>
                                <td>3730.0</td>
                            </tr>
                            
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

<script>
    
</script>