{% extends "base_analyze.html" %}
{% set active_page = 'topword' %}


{% block head %}
    <style type="text/css">
        .topwordResultLegend {
        }
    </style>
    <script type="text/javascript"
            src="{{ url_for('static', filename='js/scripts_topword.js') }}?ver={{ version }}">
    </script>
    <script type="text/javascript">
            var classNum = {{ classmap[1]|length|default(0) }};
    </script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
{% endblock %}

{% block title %}analyzer{% endblock %}


{% block options %}
    <input type="hidden" id="num_active_files" value="{{ labels|len }}"/>

    <div class="row">
        <div class="col-md-6">

            <fieldset class="analyze-advanced-options" id="test-input-options">
                <legend id="testMethod-title">Method for Test</legend>
                <div class="test-input-div" id="testInput">
                    {% if numclass == 1 %}
                        <label for="allToPara">
                        <input type="radio" name="testInput" id="allToPara"
                               value="allToPara" checked>
                        Compare each document to the sum of all the documents
                        <i class="fa fa-question-circle lexos-tooltip-trigger" data-trigger="hover" data-html="true" data-toggle="tooltip" data-placement="right" data-container="body" data-content="" style="" title="Each document's topwords are displayed in a separate pane."></i>
                        </label>
                    {% else %}
                        <label for="classToPara">
                            <input type="radio" name="testInput" id="classToPara"
                                   value="classToPara" checked>
                            Compare class to documents in other class
                            <i class="fa fa-question-circle lexos-tooltip-trigger" data-trigger="hover" data-html="true" data-toggle="tooltip" data-placement="right" data-container="body" data-content="Help me! I needs some text." style="" title=""></i>
                        </label>
                        <label for="allToPara">
                            <input type="radio" name="testInput" id="allToPara"
                                   value="allToPara" {{ "checked" if session['topwordoption']['testInput'] == 'allToPara' }}>
                            Compare each document to the sum of all the documents
                            <i class="fa fa-question-circle lexos-tooltip-trigger" data-trigger="hover" data-html="true" data-toggle="tooltip" data-placement="right" data-container="body" data-content="" style="" title=""></i>
                        </label>
                        <label for="classToClass">
                            <input type="radio" name="testInput" id="classToClass"
                                   value="classToClass" {{ "checked" if session['topwordoption']['testInput'] == 'classToClass' }}>
                            Compare all the classes
                            <i class="fa fa-question-circle lexos-tooltip-trigger" data-trigger="hover" data-html="true" data-toggle="tooltip" data-placement="right" data-container="body" data-content="Help me! I needs some text." style="" title=""></i>
                        </label>
                    {% endif %}
                </div>
            </fieldset>
        </div>

        <div class="col-md-6">
            <fieldset class="analyze-advanced-options" id="words-options">
                <legend id="groupOption-title">Token Filter</legend>
                <div class="groupOption-div" id="groupOption-radios">
                    <label>All<input type="radio" name="groupOptionType" value="all" checked/>
                        <i class="fa fa-question-circle lexos-tooltip-trigger" data-trigger="hover" data-html="true" data-toggle="tooltip" data-placement="right" data-container="body" data-content="Help me! I needs some text." style="" title=""></i>
                    </label>

                    <label class="show-options">Built-in Options
                        <input type="radio" name="groupOptionType"
                               value="bio" {{ 'checked' if session['topwordoption']['groupOptionType'] == 'bio' }} />

                        <div class="outlierMethod-div expansion cf" id="outlierMethod-radios">
                            <hr/>
                            <label class="show-options">Standard Deviation
                                <input type="radio" name="outlierMethodType" value="stdErr" checked/>
                        <i class="fa fa-question-circle lexos-tooltip-trigger" data-trigger="hover" data-html="true" data-toggle="tooltip" data-placement="right" data-container="body" data-content="Help me! I needs some text." style="" title=""></i>

                                <div class="outlier-div expansion cf" id="outlier-radios">
                                    <hr/>
                                    <label>Use Top Outlier Only<input type="radio" name="outlierTypeStd" value="top" checked/>
                        <i class="fa fa-question-circle lexos-tooltip-trigger" data-trigger="hover" data-html="true" data-toggle="tooltip" data-placement="right" data-container="body" data-content="Help me! I needs some text." style="" title=""></i>
                                    </label>
                                    <label>Use Non Outlier Only<input type="radio" name="outlierTypeStd"
                                                             value="mid" {{ "checked" if session['topwordoption']['outlierTypeStd'] == 'mid' }}/>
                        <i class="fa fa-question-circle lexos-tooltip-trigger" data-trigger="hover" data-html="true" data-toggle="tooltip" data-placement="right" data-container="body" data-content="Help me! I needs some text." style="" title=""></i>
                                                             </label>
                                    <label>Use Low Outlier Only<input type="radio" name="outlierTypeStd"
                                                             value="low" {{ "checked" if session['topwordoption']['outlierTypeStd'] == 'low' }}/>
                        <i class="fa fa-question-circle lexos-tooltip-trigger" data-trigger="hover" data-html="true" data-toggle="tooltip" data-placement="right" data-container="body" data-content="Help me! I needs some text." style="" title=""></i>
                                                             </label>
                                </div>
                            </label>
                            <label class="show-options">Interquartile Range (IQR)
                                <input type="radio" name="outlierMethodType"
                                       value="iqr" {{ 'checked' if session['topwordoption']['outlierMethodType'] == 'iqr' }}/>
                    <i class="fa fa-question-circle lexos-tooltip-trigger" data-trigger="hover" data-html="true" data-toggle="tooltip" data-placement="right" data-container="body" data-content='The <a href="https://en.wikipedia.org/wiki/Interquartile_range" target="_blank">Interquartile Range (IQR)</a>  is a measure of variability, based on dividing a data set into quartiles. Quartiles divide a rank-ordered data set into four equal parts. The values that divide each part are called the first, second, and third quartiles; and they are denoted by Q1, Q2, and Q3, respectively.' style="" title=""></i>

                                <div class="outlier-div expansion cf" id="outlier-radios">
                                    <hr/>
                                    <label>Use Top Outlier Only<input type="radio" name="outlierTypeIQR" value="top" checked/>
                                    </label>
                                    <label>Use Non Outlier Only<input type="radio" name="outlierTypeIQR"
                                                             value="mid" {{ "checked" if session['topwordoption']['outlierTypeIQR'] == 'mid' }}/></label>
                                    <label>Use Low Outlier Only<input type="radio" name="outlierTypeIQR"
                                                             value="low" {{ "checked" if session['topwordoption']['outlierTypeIQR'] == 'low' }}/></label>
                                </div>
                            </label>
                        </div>
                    </label>

                    <label class="show-options">Customize
                        <input type="radio" name="groupOptionType"
                               value="customize" {{ 'checked' if session['topwordoption']['groupOptionType'] == 'customize' }}/>

                        <div class="outlierMethod-div expansion cf" id="outlierMethod-radios">
                            <hr/>
                            <label class="show-options">Proportional Counts
                                <input type="radio" name="useFreq" value="PC" checked/>
                        <i class="fa fa-question-circle lexos-tooltip-trigger" data-trigger="hover" data-html="true" data-toggle="tooltip" data-placement="right" data-container="body" data-content="Help me! I needs some text." style="" title=""></i>

                                <div class="outlier-div expansion cf" id="outlier-radios">
                                    <hr/>
                                    <label>Low Bound - <input type="number" id="lowerboundPC" name="lowerboundPC"
                                                              value={{ session['topwordoption']['lowerboundPC'] }} step="0.05"
                                                              min="0" max="1" style="width: 50px;"/></label>
                                    <label>Upper Bound - <input type="number" id="upperboundPC" name="upperboundPC"
                                                                value={{ session['topwordoption']['upperboundPC'] }} step="0.05"
                                                                min="0" max="1" style="width: 50px;"/></label>
                                </div>
                            </label>
                            <label class="show-options">Raw Counts
                                <input type="radio" name="useFreq"
                                       value="RC" {{ 'checked' if session['topwordoption']['useFreq'] == 'RC' }}/>

                                <div class="outlier-div expansion cf" id="outlier-radios">
                                    <hr/>
                                    <label>Low Bound - <input type="number" id="lowerboundRC" name="lowerboundRC"
                                                              value={{ session['topwordoption']['lowerboundRC'] }} step="1"
                                                              min="0" style="width: 40px;"/></label>
                                    <label>Upper Bound - <input type="number" id="upperboundRC" name="upperboundRC"
                                                                value={{ session['topwordoption']['upperboundRC'] }} step="1"
                                                                min="0" style="width: 40px;"/></label>
                                </div>
                            </label>
                        </div>
                    </label>
                </div>
            </fieldset>
        </div>
    </div>
{% endblock %}


{% block results %}
    <p style="color: red"><strong> Warning: TopWord is currently in BETA</strong></p>
    <input class="bttn bttn-action" id="gettopword" name="gen-topword" type="submit" value="Get Topwords"/>
    <input type="submit" class="bttn bttn-exit bttndownload" id="topworddownload" name="get-topword" value="Download Matrix"/>

    {# get request display the class division #}
    {% if topwordsgenerated == 'class_div' %}
        <div class="topwordResultDiv">
            <legend class="topwordResultLegend">Class Division:</legend>
                {% if classmap[1]|length == 1 %}
                    <span style="color: red">  <strong> Warning: only one class exists, you only use 'Compare each document to the sum of all the documents' option,
                        please go to <a href='{{ url_for("manage") }}'>Manage page</a> to
                        change the class label</strong></span>
                {% endif %}

                {% for i in range(classmap[1]|length) %}
                    <div class="topwordTableDiv topwordTableDivClass">
                        {%  if classmap[1][i] == '' %}
                            <p class="topwordResultTableTitle"><strong>Class: untitled</strong></p>
                        {% else %}
                            <p class="topwordResultTableTitle"><strong>Class: "{{ classmap[1][i] }}"</strong></p>
                        {% endif %}
                            <div class="topwordFileTable">
                                {% for filename in classmap[0][i] %}
                                    <p class="topwordFile">{{ filename }}</p>
                                {% endfor %}
                            </div>
                   </div>
                {% endfor %}
        </div>

    {% elif topwordsgenerated == 'True' %}
    <div class="row">
        <div class="col-md-12">
            <legend class="topwordResultLegend">{{ header }}</legend>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="topwordResultDiv">
                {% for file in result %}
                    <div class="topwordTableDiv topwordTableDivPZAll">
                        <p class="topwordResultTableTitle"><strong> {{ file[0] }} </strong></p>
                        <table class="table table-striped table-condensed header-fixed">
                            <thead>
                                <th>Top Word</th>
                                <th>Z Score</th>
                            </thead>
                            <tbody>
                            {% for data in file[1] %}
                                <tr>
                                    <td>{{ data[0] }}</td>
                                    <td>{{ data[1] }}</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}

{% endblock %}


{% block submit %}
<!--     <p style="color: red"><strong> Warning: TopWord is currently in BETA</strong></p>
    <input class="bttn bttn-action" id="gettopword" name="gen-topword" type="submit" value="Get Topwords"/>
    <input type="submit" class="bttn bttn-exit bttndownload" id="topworddownload" name="get-topword" value="Download Matrix"/> -->
{% endblock %}