{% load i18n %}
{% if widget.data.total > 1 %}
<script type="text/javascript">
$(document).ready(function() {
    /*
     * Prepare data for the user chart, this data is used to generated
     * the legend and labels.
     */
    var data = [
        {
            label: "Active ({{widget.data.now}})",
            data: {{widget.data.now}}
        },
        {
            label: "7 days ago ({{widget.data.seven_days}})",
            data: {{widget.data.seven_days}}
        },
        {
            label: "30 days ago ({{widget.data.thirty_days}})",
            data: {{widget.data.thirty_days}}
        },
        {
            label: "60 days ago ({{widget.data.sixty_days}})",
            data: {{widget.data.sixty_days}}
        },
        {
            label: "90 days ago ({{widget.data.ninety_days}})",
            data: {{widget.data.ninety_days}}
        }
    ];

    $("#user-activity-widget").one("widget-shown", function() {
        // flot.js plotting function to generate a user chart below.
        $.plot($("#user-chart"), data, {
            series: {
                pie: {
                    show: true,
                    label: {
                        show: true,
                        radius: 1,
                        formatter: function(label, series) {
                            return '<div>' + Math.round(series.percent) +
                                   '%</div>';
                        },
                        background: { opacity: 0.8 }
                    }
                }
            }
        });
    });
});
</script>

<div id="user-chart" style="width: 450px; height: 160px;"></div>
<div id="user-count">
 {% trans "Total Users" %}: <strong>{{widget.data.total}}</strong>
</div>
{% else %}
<p class="no-result">{% trans "You're the only one who logged in so far..." %}</p>
<p class="no-result"><a href="db/auth/user/add/">{% trans "Add Users +" %}</a></p>
{% endif %}
