{% 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: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>