{% extends "base.html" %}
{% load url from future %}
{% load account %}
{% load social_account_list %}
{% load compress %}

{% block pagescripts %}
  {% compress css %}
    <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/dashboard.css">
  {% endcompress %}
{% endblock %}

{% block title %}
  Your KarmaNotes Profile
{% endblock %}

{% block raw_content %}
  <section id="dashboard_content">
    <div id="stats-container">
      <div class="row museo700">
        <div class="small-12 columns">
          <div id="user-name" class="stat-container">
            {% user_display user %}
          </div>
          <div class="stat-container">
            <span class="stat-count">{{ user.get_profile.get_points }}</span>
            <br/>
            Karma Points
          </div>
          <div class="stat-container">
            <span class="stat-count">{{ user.note_set.count }}</span>
            <br/>
            Notes Uploaded
          </div>
        </div>
      </div>

    </div>

    <div id="activity_container">
      <div class="row">
        <div id="tabs" class="small-12 columns">
          <dl class="tabs show-for-large-up" data-tab data-options="deep_linking: true; scroll_to_content: false;">
            <dd class="active"><a href="#activity">Karma Point Activity</a></dd>
            <dd><a href="#control_panel">My Account</a></dd>
          </dl>
          <div class="tabs-content">
            <div id="activity" class="content active">
              {% for item in object_list %}

                <div class="row  {% cycle '' 'even'%}">
                  <div class="small-12 columns small-centered activity_item">
                    {% if 'KarmaEvent' in item.0 %}
                      {% with event=item.1 %}
                        <div class="row">
                          <div class="small-12 columns activity_timestamp">
                            <span class="activity_date">{{ event.timestamp|date:"l, F j, Y" }}</span>
                          </div>
                          <div class="small-12 columns activity_details_action museo700">
                            {% if event.points > 0 %}
                              <span class="activity_details_points_positive">+{{ event.points }}</span>
                            {% else %}
                              <span class="activity_details_points_negative">{{ event.points }}</span>
                            {% endif %}
                            {{ event.get_message }}
                          </div>
                          {% if item.0 == 'NoteKarmaEvent' %}
                            <div class="small-12 columns activity_details_object">
                              <a href="{{ event.note.get_absolute_url }}" class="activity_target inherit-color">{{ event.note.name }}</a>
                            </div>
                            <div class="small-12 columns activity_details_context">
                              <a href="{{ event.note.course.get_absolute_url }}" class="course_link inherit-color">{{ event.note.course.name }} &bull;
                                {% if event.note.course.school %}
                                  {{ event.note.course.school.name }}
                                {% else %}
                                  {{ event.note.course.department.school.name }}
                                {% endif %}
                              </a>
                            </div>
                          {% endif %}
                          {% if item.0 == 'CourseKarmaEvent' %}
                            <div class="small-12 columns activity_details_object">
                              <a href="{{ event.course.get_absolute_url }}" class="activity_target inherit-color">{{ event.course.name }}</a>
                            </div>
                            <div class="small-12 columns activity_details_context">
                              {{ event.course.school.name }}
                            </div>
                          {% endif %}

                        </div>
                      {% endwith %}

                    {% endif %}

                  </div>
                </div>

              {% endfor %}
            </div>
            <div id="control_panel" class="content">
              <div class="account_settings_row">
                <div class="row">
                  <div class="small-12 large-2 columns account_settings_category">
                    Name:
                  </div>
                  <div class="small-12 large-8 columns account_settings_value end">
                    {{ user.get_full_name }}
                  </div>
                </div>
              </div>
              <div class="account_settings_row">
                <div class="row">
                  <div class="small-12 large-2 columns account_settings_category">
                    Username:
                  </div>
                  <div class="small-12 large-8 columns account_settings_value end">
                    {{ user.username }}
                  </div>
                </div>
              </div>
              <div class="account_settings_row">
                <div class="row">
                  <div class="small-12 large-2 columns account_settings_category">
                    Email:
                  </div>
                  <div class="small-12 large-8 columns account_settings_value">
                    {{ user.email }}
                  </div>
                  <div class="small-12 large-2 columns account_settings_edit">
                    <a href="{% url 'account_email' %}" class="inherit-color"><i class="fa fa-pencil"></i> Edit</a>
                  </div>
                </div>
              </div>
              <div class="account_settings_row">
                <div class="row">
                  <div class="small-12 large-2 columns account_settings_category">
                    Password:
                  </div>
                  <div class="small-12 large-8 columns account_settings_value">
                    ********
                  </div>
                  <div class="small-12 large-2 columns account_settings_edit">
                    <a href="{% url 'account_change_password' %}" class="inherit-color"><i class="fa fa-pencil"></i> Edit</a>
                  </div>
                </div>
              </div>
              <div class="account_settings_row">
                <div class="row">
                  <div class="small-12 large-2 columns account_settings_category">
                    Social accounts:
                  </div>
                  <div class="small-12 large-8 columns account_settings_value">
                    {% social_account_list request.user %}
                  </div>
                  <div class="small-12 large-2 columns account_settings_edit">
                    <a href="{% url 'socialaccount_connections' %}" class="inherit-color"><i class="fa fa-pencil"></i> Edit</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {% if not object_list %}
        <div class="row">
          <div id="no_activity" class="small-12 columns">
            <h4>Nothing to show here yet.</h4>
          </div>
        </div>
      {% endif %}

    </div>



  </section>

{% endblock %}
