{% extends 'table/_base_table.html' %}
{% load tabletags static %}
{% block head_title %}Table {{ table.id }}: {{ table.description }} - {{ block.super }}{% endblock %}

{% block head_facebook_tags %}
        <meta property="og:title" content="{{ WAZIMAP.name }} table detail: {{ table.id }}" />
        <meta property="og:site_name" content="{{ WAZIMAP.name }}" />
        <meta property="og:url" content="{{ WAZIMAP.url }}{% url 'table_detail' table.id %}" />
        <meta property="og:description" content="Description and table metadata for {{ WAZIMAP.name }} table {{ table.id }}: {{ table.description }}." />
        <meta property="og:type" content="article" />
        {#}<meta property="og:image" content="" />{#}
{% endblock %}

{% block body_id %}table{% endblock %}
{% block body_class %}data-view{% endblock %}

{% block header_content %}
<div id="explore" class="wrapper clearfix header-container">
    <section id="explore-topic-place-picker" class="clearfix big-action">
        <h1 class="article-header">Table {{ table.id }}: {{ table.description }}</h1>
        <h2 class="help-text">Show data from this table: Choose a place or area</h2>
        <div id="topic-place-select-wrapper" class="input-wrapper">
            <input name="topic_place_select" id="topic-place-select" type="text" placeholder="Start typing to pick a place..." autocomplete="off">
            {#}<p class="help-text">Search for a place to explore data, or choose a geographic summary level to build a comparison.</p>{#}
        </div>
    </section>
    <section id="explore-topic-place-picker-parent" class="column-full clearfix big-action">
        <h1 class="article-header">in</h1>
        <div id="topic-place-select-wrapper-parent" class="input-wrapper">
            <input name="topic_place_select_parent" id="topic-place-select-parent" type="text" placeholder="Start typing to pick a place to explore..." autocomplete="off">
            <p class="help-text"></p>
        </div>
    </section>
</div>
{% endblock %}

{% block content %}
{% include 'data/_blocks/_topic_select_input.html' %}

<article id="table-display" class="clearfix">
    <header class="section-contents">
        <h1>Table explorer</h1>
    </header>
    <div class="section-container">
        <section class="clearfix">
            <h2>Table {{ table.id }}</h2>
            <h2 class="header-for-columns">Table universe: <span class="normal">{{ table.universe }}</span></h2>
            <aside>
                {% if tabulation.table_versions|length > 1 %}
                <h5>Other versions of this table</h5>
                <ul>{% for code, option in tabulation.table_versions.items %}
                    {% if code != table.id %}<li><a href="{% url 'table_detail' code %}">{{ option.version_name }}</a></li>{% endif %}
                {% endfor %}</ul>
                {% endif %}
            </aside>

            <div class="column-golden-wide expanded-table">
                <h4>Columns in this table</h4>
                <ul>{% for column_id, column_data in table.columns.items %}
                    <li class="indent-{{ column_data.indent }}">{{ column_data.name }}</li>
                {% endfor %}</ul>
            </div>
        </section>
    </div>
</article>
{% endblock %}

{% block body_javascript_extra %}{{ block.super }}
<script src="{% static 'js/table.detail.js' %}"></script>
<script type="text/javascript">
var table = new Table({
    tableID: '{{ table.id }}',
    topicSelect: '#topic-select',
    topicSelectContainer: '#query-topic-picker',
    displayHeader: '#header-container',
    displayWrapper: '#table-display',
});
</script>
{% endblock %}
