{% extends 'rewards/base.html' %}


{% block extra_script %}
    {{ block.super }}
    <script src="{{ STATIC_URL }}rewards/scripts/rewards.js"></script>
{% endblock extra_script %}


{% block content %}
    <h2 class="pinboard-my-goals">My goals</h2>

    <div class="info-box">
        <h4>Click on the stars when you earn one!</h4>
    </div>
    {% for obj in object_list %}
        <div class="goals-wrapper">
            <h3>{{ obj.name }}</h3>

            <ul class="goal-stars">
                {% for i in obj.target|as_range %}
                    <li class="star{% if forloop.counter <= obj.score %} selected{% endif %}{% if forloop.counter|divisibleby:'10' %} last{% endif %}{% if forloop.counter|divisibleby:'11' %} first{% endif %}"></li>
                {% endfor %}
            </ul>

            <span class="goal-target">{{ obj.target }}</span>

            <div class="goal-forms">
                <form method="post" class="increment-form" action="{{ obj.get_increment_url }}">
                    {% csrf_token %}
                    <input type="submit" name="submit" value="+1">
                </form>
                <form method="post" class="decrement-form" action="{{ obj.get_decrement_url }}">
                    {% csrf_token %}
                    <input type="submit" name="submit" value="-1">
                </form>
            </div>
        </div>
    {% endfor %}
{% endblock %}
