{#{% if not main_content_class %}#}
{#    {% set main_content_class = "withLoadingIndicator" %}#}
{#{% endif %}#}

{#{% if not ui_color %}#}
{#    {% set ui_color="inverse" %}#}
{#{% endif %}#}

{# TODO: Figure out best practice for changing a Jinja2 value (as above) and then extending a template. #}
{% extends "3-columns.html" %}

{% if corpus_name %}
    {% block nav %}
        <div class="btn-group">
            <a href="{{ url_for("corpus_view_by_name", corpus_name=corpus_name) }}" class="btn">
                {{ corpus_name }}
            </a>
{#            <button class="btn dropdown-toggle" data-toggle="dropdown">#}
{#                <span class="caret" style="border-top-color: #000; border-bottom-color: #000;"></span>#}
{#            </button>#}
{#            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">#}
{#                {% for corpus in corpora.keys()|sort %}#}
{#                    {% if "corpora" in corpora[corpus] and corpora[corpus]["corpora"]|length > 0 %}#}
{#                        <li class="dropdown-submenu">#}
{#                            <a tabindex="-1" href="#">{{ corpus }}</a>#}
{#                            <ul class="dropdown-menu">#}
{#                                {% for subcorpus_name in corpora[corpus]["corpora"].keys()|sort %}#}
{#                                    {% set subcorpus_relative_path = corpus + "/" + subcorpus_name %}#}
{#                                    <li{% if corpus == subcorpus_relative_path %} class="disabled"{% endif %}>#}
{#                                        <a tabindex="-1" href="{{ url_for("corpus_view_by_name", corpus_name=subcorpus_relative_path) }}">{{ subcorpus_name }}</a>#}
{#                                    </li>#}
{#                                {% endfor %}#}
{#                            </ul>#}
{#                            {% else %}#}
{#                        <li{% if corpus == corpus_name %} class="disabled"{% endif %}>#}
{#                            <a tabindex="-1" href="{{ url_for("corpus_view_by_name", corpus_name=corpus) }}">{{ corpus }}</a>#}
{#                        </li>#}
{#                    {% endif %}#}
{#                {% endfor %}#}
{#            </ul>#}
        </div>
        <span class="text">/</span>
        <div class="btn-group">
            <a href="{{ url_for("text_mallet_view_by_name", corpus_name=corpus_name, text_name=text_name) }}" class="btn btn-primary">
                {{ text_name }}
            </a>
{#            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">#}
{#                <span class="caret" style="border-top-color: #fff; border-bottom-color: #fff;"></span>#}
{#            </button>#}
{#            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">#}
{#                {% for text in corpora[corpus_name]["texts"] %}#}
{#                    <li{% if text == text_name %} class="disabled"{% endif %}><a tabindex="-1" href="{{ url_for("text_view_by_name", corpus_name=corpus_name, text_name=text) }}">{{ text }}</a></li>#}
{#                {% endfor %}#}
{#            </ul>#}
        </div>
    {% endblock %}
{% endif %}

{#{% block head %}#}
{#    {% include "_tags_styles.html" %}#}
{#{% endblock %}#}

{% block sidebar_navbar %}
    <span class="brand">Tags</span>
    <button class="clear_all_tags {{ btn_class }} pull-right" type="button">Clear All</button>
{% endblock %}

{% block sidebar_content %}
    <div id="topic_model_tag_buttons" class="btn-group-tag btn-group btn-group-vertical span12">
    {% for rule_data in rules.values()|sort(reverse=True, attribute="num_tags") %}
        <button id="btn-{{ rule_data["name"] }}" data-key="{{ rule_data["name"] }}" class="{{ btn_size_class }} btn-tag span12" type="button">
            <span class="btn-label">{{ rule_data["name"] }}</span>
            <span class="fill_bar" style="width: {{ rule_data["num_tags"] * 100 / tot_tags }}%; height: 60%; top: 20%; bottom: auto;"></span>
        </button>
    {% endfor %}
{#    {% for tag_data in tags[0].values()|sort(reverse=True, attribute="tag_maps_prop") %}#}
{#        {% if tag_data["tag_maps_prop"] > 0 %}#}
{#        <button id="btn-{{ tag_data["key"] }}" data-key="{{ tag_data["key"] }}" class="{{ btn_size_class }} btn-tag span12 {{ tag_data["key"] }}" type="button">#}
{#            <span class="btn-label">{{ tag_data["key"] }}</span>#}
{#        {% if "tag_maps_prop" in tag_data %}#}
{#            <span class="fill_bar" style="width: {{ tag_data["tag_maps_prop"] * 100 }}%; height: 25%; top: 15%; bottom: auto;"></span>#}
{#        {% endif %}#}
{#        {% if "topic_model_prop" in tag_data %}#}
{#            <span class="fill_bar" style="width: {{ tag_data["topic_model_prop"] * 100 }}%; height: 25%; top: auto; bottom: 15%;"></span>#}
{#        {% endif %}#}
{#        </button>#}
{#        {% endif %}#}
{#    {% endfor %}#}
    </div>
{% endblock %}

{% block main_navbar %}
    <span class="brand">Text: {{ text_name }}</span>
    <div class="pull-right">
        <div class="btn-group">
            <a href="#textViewOptions" id="text_view_options" class="{{ btn_class }}" data-toggle="modal"><i class="icon-wrench"></i></a>
        </div>

{#        <div class="btn-group">#}
{#            <a class="{{ btn_size_class }} btn-info dropdown-toggle" data-toggle="dropdown" href="#">#}
{#                Export…#}
{#                <span class="caret"></span>#}
{#            </a>#}
{#            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">#}
{#                <li><a tabindex="-1" href="{{ url_for("text_get_html", corpus_name=corpus_name, text_name=text_name) }}">Tagged Text (HTML)</a></li>#}
{#                <li class="divider"></li>#}
{#                <li class="divider"></li>#}
{#                <li><a tabindex="-1" href="{{ url_for("text_get_topic_model_tags", corpus_name=corpus_name, text_name=text_name) }}">Tag Data (JSON)</a></li>#}
{#                <li><a tabindex="-1" href="{{ url_for("text_get_topic_model_tag_maps", corpus_name=corpus_name, text_name=text_name) }}">Tag Maps (JSON)</a>#}
{#            </ul>#}
{#        </div>#}
    </div>
{% endblock %}

{% block main_post_navbar %}
    <div id="#main_pagination" class="custom-pager-wrapper">
        <div class="custom-pager">
            <div class="page-buttons btn-group btn-group-vertical">
                <a class="btn prev disabled" href="#" title="Previous Page"><i class="icon-arrow-up"></i></a>
                <a class="btn next disabled" href="#" title="Next Page"><i class="icon-arrow-down"></i></a>
            </div>
            <ul class="custom-pager-pages">
                <li class="current"><a href="#">1</a></li>
                {% for i in range(pages|length - 1) %}
                    <li><a href="#">{{ i + 2 }}</a></li>
                {% endfor %}
            </ul>
        </div>
    </div>
{% endblock %}

{% block main_content %}
    <div id="wordDistModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="wordDistModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="wordDistModalLabel">Word Distribution</h3>
        </div>
        <div class="modal-body">
            <div id="wordDist">

            </div>
        </div>
        <div class="modal-footer">
            <button class="btn {{ btn_size_class }}" data-dismiss="modal" aria-hidden="true">OK</button>
        </div>
    </div>
    <div id="topicDistModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="topicDistModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="topicDistModalLabel">Topic Distribution</h3>
        </div>
        <div class="modal-body">
            <div id="topicDist">

            </div>
        </div>
        <div class="modal-footer">
            <button class="btn {{ btn_size_class }}" data-dismiss="modal" aria-hidden="true">OK</button>
        </div>
    </div>
    <div id="textViewOptions" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="textViewOptions" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3>Text View Options</h3>
        </div>
        <div class="modal-body" style="padding-top: 0; max-height: 480px;">
            <h4>Ranking type</h4>
            <div class="radio" id="rankingTypeRadioGroup">
                <label>
                    <input type="radio" name="rankingType" id="freq"> Frequency
                </label>
                <label>
                    <input type="radio" name="rankingType" id="sal" checked> Saliency
                </label>
                <label>
                    <input type="radio" name="rankingType" id="ig"> Information Gain
                </label>
            </div>
{#            <h4>Words with Multiple Active Topics</h4>#}
{#            <div class="btn-group tags_top_only">#}
{#                <button class="btn btn-tags_top_only_on color_ramps_on" title="Display Colored Backgrounds for Top Active Topics Only (i.e. those with the highest proportion)"></button>#}
{#                <button class="btn btn-primary btn-tags_top_only_off color_ramps_on" title="Display Gray Backgrounds for Words with Multiple Active Topics"></button>#}
{#            </div>#}
{#            <div class="btn-group-labels" style="text-align: center; width: 100%; float: left; margin-bottom: 15px;">#}
{#                <div style="width: 50%; float: left">#}
{#                    Display Colored Backgrounds for Top* Active Topic Only#}
{#                </div>#}
{#                <div style="width: 50%; float: right">#}
{#                    Display Gray Backgrounds to Indicate Multiple Active Topics#}
{#                </div>#}
{#                <div style="clear: both">#}
{#                    <small><em>*The 'top' topic is the topic with the highest proportion for the corresponding word.</em></small>#}
{#                </div>#}
{#            </div>#}
            <h4 style="clear: both;">Topic color ramping</h4>
            <div class="btn-group color_ramps">
                <button class="btn color_ramps_off" title="Color Ramps Off"></button>
                <button class="btn color_ramps_on btn-primary" title="Color Ramps On"></button>
            </div>
            <div class="btn-group-labels" style="text-align: center; width: 100%; float: left">
                <div style="width: 50%; float: left">
                    Uniform Color Tints
                </div>
                <div style="width: 50%; float: right">
                    Color-Ramped* Tints
                </div>
                <div style="clear: both">
                    <small><em>*Ramped from light tint to heavy tint by increasing ranking within topic.</em></small>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">OK</button>
        </div>
    </div>
    {# text_html is already HTML, so it doesn't need to be escaped. #}
    <a class="prev" href="#"><i class="icon-arrow-up"></i> Previous Page</a>
    <div class="html_formatter">
        {{ pages[0] | safe }}
    </div>
    <a class="next disabled" href="#"><i class="icon-arrow-down"></i> Next Page</a>
{% endblock %}

{% block right_sidebar_navbar %}
    <span class="brand">Topic Overview</span>
    <button class="clear_all_tags {{ btn_class }} pull-right" type="button">Clear All</button>
{% endblock %}

{% block right_sidebar_content %}
    <div class="topic_model_line_graph withLoadingIndicator span12 spanv10"></div>
{% endblock %}

{% block scripts %}
    <script type="text/javascript">
        var corpus_name = "{{ corpus_name|safe }}";
        var text_name = "{{ text_name|safe }}";
        var pages = new Array({{ pages | length }});
        {% for i in range(pages | length) -%}
            pages[{{ i }}] = '{{ pages[i] | replace('\r\n', '<br />') | replace('\n', '<br />') | replace("'", "&#39;") | safe }}';
        {% endfor %}
{#        var colors = {{ colors|safe }};#}
        $GET_TOPIC_NAMES_URL = "{{ url_for('corpus_get_topic_names', corpus_name=corpus_name) }}";
    </script>
    <script type="text/javascript" src="{{ url_for("static", filename="js/Utils.js") }}"></script>
    <script type="text/javascript" src="{{ url_for("static", filename="js/TextViewer.js") }}"></script>
{% endblock %}
