{% extends 'base.html' %}

{% load recommendations_tags utils_tags statistics_tags %}

{% block extra_head_js %}
    <script>
        $(document).ready(function() {

            NEWSBLUR.reader = new NEWSBLUR.Reader();
            NEWSBLUR.reader.init();

        });
    </script>

    {% if user.is_staff %}
        <script>
            $(document).ready(function() {
              $('#add-feature-button').click(function(e) {
                e.preventDefault();
                $('#add-feature-form').fadeIn(500);
              });
            });
        </script>
    {% endif %}
{% endblock %}

{% block bodyclass %}NB-body-main{% endblock %}
{% block content %}


<h1 class="NB-splash-heading">NewsBlur</h1>
<h2 class="NB-splash-heading">- The best stories from your friends and favorite blogs, all in one place.</h2>

<div id="NB-splash" style="left: {% firstof user_profile.feed_pane_size 240 %}px">

  <div class="NB-modules-center">
    
    {% render_interactions_module %}
    {% render_activities_module %}
    
    {% if recommended_feeds %}
      {% render_recommended_feed recommended_feeds %}
    {% endif %}

    {% if user.is_staff and unmoderated_feeds %}
      {% render_recommended_feed unmoderated_feeds 1 %}
    {% endif %}
    
  </div>

  <div class="NB-account">
      <div class="NB-module NB-module-account">
        <h5 class="NB-module-header">
          <div class="NB-module-header-right">
            <a href="{% url "logout" %}?next=/" class="NB-splash-link">Logout</a>
          </div>
          Welcome, <span class="NB-module-account-username">{{ user.username }}</span>
        </h5>
        <div class="NB-module-item {% if train_count == active_count %}NB-last{% endif %}">
          <div class="NB-module-item-image NB-load-user-profile">
            {% if social_profile.large_photo_url %}
              <img src="{{ social_profile.large_photo_url }}">
            {% else %}
                {% if user.profile.is_premium %}
                  <img src="{{ MEDIA_URL }}/img/reader/account_premium_{{ account_images|random }}.jpg" />
                {% else %}
                  <img src="{{ MEDIA_URL }}/img/reader/account_standard_{{ account_images|random }}.jpg" />
                {% endif %}
            {% endif %}
          </div>
          <h3 class="NB-module-content-header">
            <div class="NB-module-content-subtitle NB-module-content-account-realtime-subtitle"></div>
            <div class="NB-module-content-account-realtime" title=""></div>
            {% if user.profile.is_premium %}
              Premium Account
            {% else %}
              Free Standard Account
            {% endif %}
          </h3>
          <div class="NB-module-item-title">
            <div class="NB-module-item NB-module-stats NB-module-account-stats {% if not social_profile.shared_stories_count %}NB-hidden{% endif %}">
                <div class="NB-module-stats-count NB-module-stats-count-shared-stories">
                    <div class="NB-module-stats-count-number">{{ social_profile.shared_stories_count|commify }}</div>
                    <div class="NB-module-stats-count-description">Shared stor{{ social_profile.shared_stories_count|pluralize:"y,ies" }}</div>
                </div>
                <div class="NB-module-stats-count NB-module-stats-count-following">
                    <div class="NB-module-stats-count-number">{{ social_profile.following_count|commify }}</div>
                    <div class="NB-module-stats-count-description">Following</div>
                </div>
                <div class="NB-module-stats-count NB-module-stats-count-followers">
                    <div class="NB-module-stats-count-number">{{ social_profile.follower_count|commify }}</div>
                    <div class="NB-module-stats-count-description">Follower{{ social_profile.follower_count|pluralize }}</div>
                </div>
            </div>
          </div>
          
        </div>

      </div>

      {% if not user_profile.hide_getting_started %}
        <div class="NB-module NB-module-gettingstarted">
          <h5 class="NB-module-header">
            <div class="NB-module-header-right">
              <a href="#" class="NB-splash-link NB-module-gettingstarted-hide">Hide</a>
            </div>
            Getting Started
          </h5>

          <div class="NB-module-item NB-module-item-intro {% if user_profile.has_setup_feeds %}NB-done{% endif %}">
              <div class="NB-module-item-image">
                  <img src="{{ MEDIA_URL }}/img/reader/module_tutorial.jpg" />
              </div>
              <h3 class="NB-module-content-header">
                  Start by setting up NewsBlur
              </h3>
              <div class="NB-module-item-title">
                  <div class="NB-modal-submit">
                      <div class="NB-modal-submit-green NB-modal-submit-button NB-module-launch-intro NB-javascript">Setup NewsBlur</div>
                  </div>
                  <div class="NB-done-label">Done</div>
              </div>
          </div>

          <div class="NB-module-item NB-module-find-friends 
                      {% if not user_profile.has_setup_feeds %}NB-hidden{% endif %}
                      {% if user_profile.has_found_friends %}NB-done{% endif %}">
              <div class="NB-module-item-image">
                  <img src="{{ MEDIA_URL }}/img/reader/account_friends.jpg" />
              </div>
              <h3 class="NB-module-content-header">
                  Get Social and share stories
              </h3>
              <div class="NB-module-item-title">
                  <div class="NB-modal-submit">
                      <div class="NB-modal-submit-green NB-modal-submit-button NB-module-friends-button NB-javascript">Find and Follow Friends</div>
                  </div>
                  <div class="NB-done-label">Done</div>
              </div>
          </div>

          <div class="NB-module-item NB-module-account-trainer NB-last 
                      {% if not user_profile.has_setup_feeds %}NB-hidden{% endif %}
                      {% if user_profile.has_trained_intelligence %}NB-done{% endif %}">
              <div class="NB-module-item-image">
                  <img src="{{ MEDIA_URL }}/img/reader/account_trainer.jpg" />
              </div>
              <h3 class="NB-module-content-header">
                  <span class="NB-module-content-subtitle">
                      <span class="NB-module-account-trainer-count">{{ train_count }}</span> of <span class="NB-module-account-trainer-site-count">{{ active_count }} site{{ active_count|pluralize }}</span>
                  </span>
                  Intelligence Trainer
              </h3>
              <div class="NB-module-item-title">
                  <div class="NB-modal-submit">
                      <div class="NB-modal-submit-green NB-modal-submit-button NB-module-account-train NB-javascript">Launch Intelligence Trainer</div>
                  </div>
                  <div class="NB-done-label">Done</div>
              </div>
          </div>
      </div>
      {% endif %}
    
    {% if user_profile.hide_getting_started %}
        {% render_features_module %}
        {% render_statistics_graphs statistics %}
    {% endif %}

  </div>
  
</div>

{% render_feeds_skeleton %}

{% endblock %}