{% load static %}
<div id="widgetvisualization-{{widget.pk}}" rel="{{widget.pk}}" class="widgetvisualizationdialog" title="{{widget.name}} visualization" width="650px" height="500px">
    <div style="position:absolute; top:5px; left:15px; width:600px; border-bottom: 1px solid #999;">
        <p style="padding-top:5px; padding-bottom:3px; width:150px; float:left; font-size:12px; color:#999; font-style: italic; text-align: center;">Number of documents</p>
        <p style="padding-top:5px; padding-bottom:3px; width:150px; float:left; font-size:12px; color:#999; font-style: italic; text-align: center;">Number of tokens</p>
        <p style="padding-top:5px; padding-bottom:3px; width:150px; float:left; font-size:12px; color:#999; font-style: italic; text-align: center;">Avg. tokens per document</p>
        <p style="padding-top:5px; padding-bottom:3px; width:150px; float:left; font-size:12px; color:#999; font-style: italic; text-align: center;">Type-to-token ratio</p>
        <p style="padding-top:0px; padding-bottom:10px; width:150px; float:left; font-size:11px; color:#999; font-style: italic; text-align: center;">{{data.3.num_doc}}</p>
        <p style="padding-top:0px; padding-bottom:10px; width:150px; float:left; font-size:11px; color:#999; font-style: italic; text-align: center;">{{data.3.num_tokens}}</p>
        <p style="padding-top:0px; padding-bottom:10px; width:150px; float:left; font-size:11px; color:#999; font-style: italic; text-align: center;">{{data.3.avg_doc_length|floatformat:"2"}}</p>
        <p style="padding-top:0px; padding-bottom:10px; width:150px; float:left; font-size:11px; color:#999; font-style: italic; text-align: center;">{{data.3.ttr|floatformat:"4"}}</p>
    </div>
    <div style="position:absolute; top:70px; left:75px;">
        {% if data.1 != "N-gram" %}
            <p style="padding-top:5px; padding-bottom:10px; width:400px; float:left"><b>{{data.1}}</b></p>
            <p style="padding-top:5px; padding-bottom:10px; width:100px; float:left"><b>{{data.2}}</b></p>
        {% endif %}
        <ul>
        {% if data.1 == "N-gram" %}
            <p style="width:320px; float:left; padding-top:5px; padding-bottom:10px;"><b>N-gram</b></p>
            <p style="width:110px; float:left; padding-top:5px; padding-bottom:10px;"><b>Raw frequency</b></p>
            <p style="width:110px; float:left; padding-top:5px; padding-bottom:10px;"><b>Frequency</b></p>
            {% for i,j,k in data.0 %}
                <li style="padding-top:3px;">
                     <p style="width:320px; float:left;"><b>{{i}}</b></p>
                     <p style="width:110px; float:left;">{{j}}</p>
                     <p style="width:110px; float:left;">{{k}}</p>
                </li>

            {% endfor %}
        {% else %}
        
            {% for i,j in data.0 %}

                <li style="padding-top:3px;">
                    <p style="width:400px; float:left"><b>{{i}}</b></p>
                    <p style="width:100px; float:left">{{j|floatformat:"4"}}</p>
                </li>

            {% endfor %}
         {% endif %}
        </ul>
    </div>
</div>