{% extends "profile_template.html" %}

{% block profile_name %}
<span id="user-info" class="has-details">
    <img src="/images/darth.png" />
    <span id="name">{{ student_nickname|escape }}{% simple_student_info student_user_data %}</span>
</span>
{% endblock profile_name %}

{% block high_level_stats %}
    <span id="videos-watched">
        <span class="profile-header-icon"><img src="/images/video-camera-icon-shadow.png" /></span>
        <span class="count">
            {{ count_videos_completed }} / {{ count_videos }}<br />
            <span class="label">Videos Completed</span>
        </span>
    </span>
    <span id="exercises-completed" >
        <span class="profile-header-icon"><img src="/images/generic-exercise-icon-shadow.png" /></span>
        <span class="count">
            {{ count_exercises_proficient }} / {{ count_exercises }}<br />
            <span class="label">Proficient Exercises</span>
        </span>
    </span>
    <span id="energy-points">
        <span title="{{student_points}} energy points" class="energy-points-badge">{{ student_points|thousands_separated }}</span><br />
        <span class="label">Total Energy Points</span>
    </span>                    
{% endblock high_level_stats %}

{% block graph_accordion %}
    <ul id="nav-accordion">
        <li>
            {% profile_graph_link student "Activity" "activity" selected_graph_type %}
            <p class="accordion-content">
                Shows how much work you're doing each day.
                {% profile_graph_date_picker student "activity" %}
            </p>
        </li>
        <li>
            {% profile_graph_link student "Focus" "focus" selected_graph_type %}
            <p class="accordion-content">
                Shows how well you've focused on exercises and video playlists.
                {% profile_graph_date_picker student "focus" %}
            </p>
        </li>
        <li>
            {% profile_graph_link student "Exercise Progress" "exerciseprogress" selected_graph_type %}
            <p class="accordion-content">
                Shows you which exercises you've worked on and completed.
                <span class="graph-options">
                    <span class="progress-legend proficient">Proficient</span>
                    <span class="progress-legend started">Started</span>
                    <span class="progress-legend struggling">Struggling</span>
                </span>
            </p>
        </li>
        <li>
            {% profile_graph_link student "Exercise Progress Over Time" "exercisesovertime" selected_graph_type %}
            <p class="accordion-content">Shows how many exercises you've completed over time. </p>
        </li>
    </ul>
{% endblock graph_accordion %}

{% block profile_extended_sections %}
    <div id="achievements">
        <h2><a name="achievements">Achievements</a></h2>
        <div id="achievement-list">
            <ul>
                <li id="category-5" class="master {% if user_badges_master %}owned{% endif %}">
                    <img src="/images/badges/master-challenge-blue.png" />
                    <div class="label">Challenge Patches{% if user_badges_master %} x {{user_badges_master|length}}{% endif %}</div>
                </li>
                <li id="category-4" class="platinum {% if user_badges_diamond %}owned{% endif %}">
                    <img src="/images/badges/eclipse-medium.png" />
                    <div class="label">Black Hole Badges{% if user_badges_diamond %} x {{user_badges_diamond|length}}{% endif %}</div>
                </li>
                <li id="category-3" class="diamond {% if user_badges_platinum %}owned{% endif %}">
                    <img src="/images/badges/sun-medium.png" />
                    <div class="label">Sun Badges{% if user_badges_platinum %} x {{user_badges_platinum|length}}{% endif %}</div>
                </li>
                <li id="category-2" class="gold {% if user_badges_gold %}owned{% endif %}">
                    <img src="/images/badges/earth-medium.png" />
                    <div class="label">Earth Badges{% if user_badges_gold %} x {{user_badges_gold|length}}{% endif %}</div>
                </li>
                <li id="category-1" class="silver {% if user_badges_silver %}owned{% endif %}">
                    <img src="/images/badges/moon-medium.png" />
                    <div class="label">Moon Badges{% if user_badges_silver %} x {{user_badges_silver|length}}{% endif %}</div>
                </li>
                <li id="category-0" class="bronze {% if user_badges_bronze %}owned{% endif %}">
                    <img src="/images/badges/meteorite-medium.png" />
                    <div class="label">Meteorite Badges{% if user_badges_bronze %} x {{user_badges_bronze|length}}{% endif %}</div>
                </li>
            </ul>
            <div class="clear"></div>
            <div id="badge-container" class="inset-container" style="display: none;">
            {% if badge_collections %}
                {% for badge_collection in badge_collections %}
                {% for badge in badge_collection %}
                    {% if forloop.first %}
                        <div id="category-{{badge.badge_category}}" style="display: none;">
                            <div class="badge-description-container">
                                <div class="badge-description-content">
                                    {{ badge.category_description }}
                                </div>
                            </div>
                        {% if user_badges|hash:badge.badge_category %}
                        <div id="user-owned">
                        <h2 style="display: block; margin-left: 10px;">Badges Earned</h2>
                            {% for user_badge in user_badges|hash:badge.badge_category %}
                                {% badge_block user_badge.badge user_badge %}
                            {% endfor %}
                            <div class="clear"></div>
                        </div>
                        {% endif %}
                        <div id="all-badges">
                        <h2 style="display: block; margin-left: 10px;">Possible Badges</h2>
                    {% endif %}
                        {% badge_block badge None show_badge_frequencies%}
                    {% if forloop.last %}
                        </div>
                        <div class="clear"></div>
                        </div>
                    {% endif %}
                {% endfor %}
                {% endfor %}
            {% endif %}
            </div>
        </div>
    </div>
    {% profile_recent_activity student %}
{% endblock profile_extended_sections %}