{% extends "user_profile/user.html" %}
{% from "macros.html" import timeago %}
<!-- user_reputation.html -->
{% block profilesection %}{% trans %}karma{% endtrans %}{% endblock %}
{% block usercontent %}
<div class="karma-summary">
    <div id="diagram" class="karma-diagram"></div>
    <div class="karma-details">
        {% if view_user.id == user.id %}
        <h2>{% trans %}Your karma change log.{% endtrans %}</h2>
        {% else %}
        <h2>{% trans user_name=view_user.username|escape %}{{user_name}}'s karma change log{% endtrans %}</h2>
        {% endif %}
        {% for rep in latest_rep_changes %}
        <p>
            <span class="karma-gained">{{ rep.positive }}</span>
            <span class="karma-lost">{{ rep.negative }}</span>
            {{ rep.get_explanation_snippet() }}
            <span class="small">({{ timeago(rep.reputed_at) }})</span>
            <div class="clean"></div>
        </p>
        {% endfor %}
    </div>
</div>
{% endblock %}
{% block userjs %}
    {% compress js %}
        <script type="text/javascript" src="{{ '/jslib/excanvas.min.js'|media }}"></script>
        <script type="text/javascript" src="{{ '/jslib/jquery.flot.min.js'|media }}"></script>
        <script type="text/javascript" src="{{ '/jslib/jquery.flot.time.js'|media }}"></script>
        <script type="text/javascript" src="{{ '/jslib/jquery.flot.resize.js'|media }}"></script>
    {% endcompress %}
    <script type="text/javascript">
        $().ready(function(){
            var d = {{ rep_graph_data }};
            var placeholder = $("#diagram");
            var plot = $.plot(placeholder, [d], {
                xaxis: {
                    mode: "time",
                    timeformat: "%b %d'%y"
                },
                points: { show: true },
                lines: { show: true }
            });
        });
    </script>
{% endblock %}<!-- end user_reputation.html -->
