{% load markup %}
{% load thumbnail %}
{% load humanize %}

<a href="#" onclick="return false" id="hide-show-label">Hide Data</a>

<div class="careermapblock">
<!-- which questions to show when basemaps and layers are turned on and off -->
<div id="question_json">
    {{block.question_json}}
</div>

<!-- which county stats to show when basemaps and layers are turned on and off -->
<div id="table_json">
    {{block.table_json}}
</div>

<div class="careermaptabs">
<div id="{{block.id}}-map">


<table>
<tr>
<td id ="left_hand_td">

<div class="description">
{{block.description|markdown}}
</div>

<h5>
Choose base map:
</h5>
<select id="{{block.id}}-basemap-control" onchange="update_basemap (this)">
<!--
<option value="null">Choose Base Map</option> 
-->
<!-- what happens when you choose this? -->
{% for basemap in block.basemap_set.all %}
<option basemap_id="{{basemap.id}}" value="{% thumbnail basemap.image 600x600 %}">{{basemap.name}}</option>
{% endfor %}
</select><br />
<h5>
Show layers:
</h5>
<table class="layer-controls">
{% for layer in block.layer_set.all %}
<tr id="show_layer_{{layer.id}}" >
    <td><div class="layer-box" style="background-color:
			          {{layer.color}};"> </div>
    </td>
    <td>
        <a href="#layer-{{layer.id}}" onclick="toggle_layer ({{layer.id}})">{{layer.name}}    </a></li>
    </td>
</tr>
{% endfor %}
</table>


<div class="did_you_know_container">
    {%with block.question_set.all as questions%}
        {%for question in questions %}
        <div class ="did_you_know_title" id="question_{{question.id}}">{{question.text|safe}}
            <span class = "question_layer">
                {{question.layer_id}}
            </span>
             <span class = "question_basemap">
                {{question.basemap_id}}
            </span>
        </div>
        {%endfor%}
    {%endwith%}
</div>

</td>
<td id = "right_hand_td">
<div id="{{block.id}}-base" class="careermap-base">
<img class="basemap_image"  id="{{block.id}}-basemap" alt="career map" src="{% thumbnail block.default_base_map.image 600x600 %}"/>


<!-- These are the layers that never get hidden: the borders of the counties and the general labels. -->
<img src="/site_media/img/county_borders.png" class="careermap-layer" />
<img src="/site_media/img/general_labels.png" class="careermap-layer" />


<!-- These are the layers that you can show and hide and show up on the list of layers. -->
{% for layer in block.layer_set.all %}
<img id="layer-{{layer.id}}" src="/uploads/{{layer.image}}"
     class="careermap-layer show_and_hideable" />
{% endfor %}

</div>


<div class ="table_container">
{%with block.per_county_stats as stats%}
<table id="stats_table">
<tr>
    <th>&nbsp;</th>
    {%for s in stats.stat_type_list %}
        <th>{{s}} <span class="stat_id_container">(#<span class ="stat_id">{{s.id}}</span>)</span></th>
    {%endfor %}
</tr>
<tr id = "layer_row">
    <th>Layers</th>
    {%for all_layers in stats.layers%}
        <td>
            <span class ="list_of_layers">
                {%for layer in all_layers%}
                    <span class="layer_id">{{layer}} (#{{layer.id}})</span>
                {%endfor%}
            </span>
        </td>
    {%endfor %}
</tr>
<tr id = "basemap_row">
    <th>Basemaps</th>
    {%for all_basemaps in stats.basemaps %}
        <td>
            <span class ="list_of_basemaps">
            {%for b in all_basemaps %}
                <span>{{b.name}} (#{{b.id}})</span>
            {%endfor %}
            </span>
        </td>
    {%endfor %}
</tr>

{%for county, stat_values in stats.counties.items %}
<tr>
    <th>{{county}}</th>
    {%for value in stat_values %}
            <td>{{value|intcomma}}</td>
    {%endfor %}
</tr>
{%endfor %}
</tr>
</table>
{%endwith%}
</div>

</td>
</tr>
</table>



</div>


<!--
<div id="{{block.id}}-questions">
{% if request.user.is_anonymous %}
<p class="warning">You must be logged in to view this content</p>
{% else %}
{% for question in block.question_set.all %}
<textarea rows="10" name="pageblock-{{block.pageblock.id}}-question{{question.id}}">
{{question.text}}
</textarea><br />
{% endfor %}
{% endif %}
</div>
-->
</div>
</div>