{% extends 'base.html' %}

{% load typogrify_tags recommendations_tags utils_tags statistics_tags %}

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

            NEWSBLUR.reader = new NEWSBLUR.Reader();

        });
    </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 content %}


<h1 class="NB-splash-heading">NewsBlur</h1>
<h2 class="NB-splash-heading">- A visual feed reader with intelligence.</h2>

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

  <div class="NB-modules-center">
    
    {% if user.is_authenticated %}
        {% render_interactions_module %}
    {% endif %}
    
    {% render_features_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">
    
    {% if not user.is_authenticated %}
      <div class="NB-module">
        <h5>
          <div class="NB-module-header-login">Login</div>
          <div class="NB-module-header-signup">Signup</div>
        </h5>

        <div class="NB-login">
          {% if login_form.errors %}
            {% for field, error in login_form.errors.items %}
              {{ error|safe }}
            {% endfor %}
          {% endif %}
      
          <form method="post" action="{% url login %}">
            <div>
              {{ login_form.username.label_tag }}
              {{ login_form.username }}
            </div>
            <div>
              <div class="NB-signup-optional">
                {% if login_form.errors %}
                  {% for field, error in login_form.errors.items %}
                    <a href="mailto:samuel@ofbrooklyn.com?subject=Forgot%20Password%20on%20NewsBlur&amp;body=Hello!%20My%20username%20is:%20" class="NB-splash-link">Forgot password?</a>
                  {% endfor %}
                {% else %}
                  Optional
                {% endif %}
              </div>
              {{ login_form.password.label_tag }}
              {{ login_form.password }}
            </div>

            <input name="submit" type="submit" value="login" />
            <input type="hidden" name="next" value="/" />
          </form>
        </div>

        <div class="NB-signup">
          <form method="post" action="{% url signup %}">
            <div>
              {{ signup_form.username.label_tag }}
              {{ signup_form.username }}
            </div>
            <div class="NB-signup-hidden">
              <div class="NB-signup-optional">Optional</div>
              {{ signup_form.password.label_tag }}
              {{ signup_form.password }}
            </div>
            <div class="NB-signup-hidden">
              <div class="NB-signup-optional">Optional</div>
              {{ signup_form.email.label_tag }}
              {{ signup_form.email }}
            </div>

            <input name="submit" type="submit" value="create account" />
            <input type="hidden" name="next" value="/" />
          </form>
          
          {% if signup_form.errors %}
            {% for field, error in signup_form.errors.items %}
              {{ error|safe }}
            {% endfor %}
          {% endif %}
      
          <div class="NB-signup-orline {% if signup_form.errors %}NB-signup-orline-reduced{% endif %}">&mdash; <span class="NB-signup-orline-or">or</span> &mdash;</div>
          <a href="{% url google-reader-authorize %}" class="NB-splash-link NB-signup-google">Import from<br /><img src="{{ MEDIA_URL }}img/reader/google-reader-logo.png" width="112" height="24" /></a>
        </div>
      </div>

      <div class="NB-module NB-module-howitworks">
        <h5 class="NB-module-header">
          <div class="NB-module-header-right">
            <a href="#" class="NB-module-direction NB-module-next-page"></a>
            <a href="#" class="NB-module-direction NB-module-previous-page NB-disabled"></a>
          </div>
          <div class="NB-module-header-left">
            How It Works
          </div>
        </h5>
        
        <div class="NB-howitworks-page-indicators">
          <a href="#" class="NB-module-page-indicator NB-active"></a>
          <a href="#" class="NB-module-page-indicator"></a>
          <a href="#" class="NB-module-page-indicator"></a>
          <a href="#" class="NB-module-page-indicator"></a>
          <a href="#" class="NB-module-page-indicator"></a>
          <a href="#" class="NB-module-page-indicator"></a>
        </div>
      
        <div class="NB-howitworks-page NB-active">
          <div class="NB-howitworks-page-image">
            <img src="{{ MEDIA_URL }}img/reader/howitworks_original.png" />
          </div>
          <table class="NB-howitworks-page-description">
            <tr>
              <td>
                {% filter typogrify %}Read the<br />original site.{% endfilter %}
              </td>
            </tr>
          </table>
        </div>
      
        <div class="NB-howitworks-page">
          <div class="NB-howitworks-page-image">
            <img src="{{ MEDIA_URL }}img/reader/howitworks_intelligence_like.png" />
          </div>
          <table class="NB-howitworks-page-description">
            <tr>
              <td>
                {% filter typogrify %}Easily train NewsBlur to highlight stories you like.{% endfilter %}
              </td>
            </tr>
          </table>
        </div>
      
        <div class="NB-howitworks-page">
          <div class="NB-howitworks-page-image">
            <img src="{{ MEDIA_URL }}img/reader/howitworks_intelligence_dislike.png" />
          </div>
          <table class="NB-howitworks-page-description">
            <tr>
              <td>
                {% filter typogrify %}NewsBlur will filter out stories which you don't like.{% endfilter %}
              </td>
            </tr>
          </table>
        </div>
      
        <div class="NB-howitworks-page">
          <div class="NB-howitworks-page-image">
            <img src="{{ MEDIA_URL }}img/reader/howitworks_import.png" />
          </div>
          <table class="NB-howitworks-page-description">
            <tr>
              <td>
                {% filter typogrify %}Quickly import<br>your feeds from<br>Google Reader.{% endfilter %}
              </td>
            </tr>
          </table>
        </div>
      
        <div class="NB-howitworks-page">
          <div class="NB-howitworks-page-image">
            <img src="{{ MEDIA_URL }}img/reader/howitworks_iphone.png" />
          </div>
          <table class="NB-howitworks-page-description">
            <tr>
              <td>
                {% filter typogrify %}Use the free iPhone app.{% endfilter %}
              </td>
            </tr>
          </table>
        </div>
      
        <div class="NB-howitworks-page">
          <div class="NB-howitworks-page-image">
            <img src="{{ MEDIA_URL }}img/reader/howitworks_github.png" />
          </div>
          <table class="NB-howitworks-page-description">
            <tr>
              <td>
                {% filter typogrify %}Open source,<br>regularly improved,<br>attention to detail.{% endfilter %}
              </td>
            </tr>
          </table>
        </div>
        
      </div>
      
    {% else %}
      
      <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">
            {% 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 %}
          </div>
          <h3 class="NB-module-content-header">
            {% if user.profile.is_premium %}
              <span class="NB-module-content-subtitle">
                  {{ active_count }} site{{ active_count|pluralize }}
              </span>
              <div class="NB-module-content-account-realtime" title=""></div>
              Premium Account
            {% else %}
              <span class="NB-module-content-subtitle">
                <span class="NB-module-account-feedcount">{{ active_count }}</span> of 64 sites
              </span>
              <div class="NB-module-content-account-realtime" title=""></div>
              Free Standard Account
            {% endif %}
          </h3>
          <div class="NB-module-item-title">
            <div class="NB-module-item NB-module-stats NB-module-account-stats">
                <div class="NB-module-stats-count">
                    <div class="NB-module-stats-count-number">{{ user_statistics.shared_stories|commify }}</div>
                    <div class="NB-module-stats-count-description">Shared stor{{ user_statistics.shared_stories|pluralize:"y,ies" }}</div>
                </div>
                <div class="NB-module-stats-count">
                    <div class="NB-module-stats-count-number">{{ user_statistics.following|commify }}</div>
                    <div class="NB-module-stats-count-description">Following</div>
                </div>
                <div class="NB-module-stats-count">
                    <div class="NB-module-stats-count-number">{{ user_statistics.followers|commify }}</div>
                    <div class="NB-module-stats-count-description">Follower{{ user_statistics.followers|pluralize }}</div>
                </div>
            </div>
          </div>
          
          {% render_activities_module %}
          
        </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">
                  <span class="NB-module-content-subtitle">
                      It's quick!
                  </span>
                  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">
                  <span class="NB-module-content-subtitle">
                      Share stories
                  </span>
                  Get Social
              </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 not user_profile.hide_mobile %}
        <div class="NB-module NB-module-mobile">
          <h5 class="NB-module-header">
            <div class="NB-module-header-right">
              <a href="#" class="NB-splash-link NB-module-mobile-hide">Hide</a>
            </div>
            Mobile Apps
          </h5>
          <div class="NB-module-item {% if user_profile.hide_mobile %}NB-hidden{% endif %}">
            <div class="NB-module-mobile-image">
                <img src="{{ MEDIA_URL }}/img/mobile/iphone-icon-newsblur.png" />
            </div>
            <h3 class="NB-module-content-header">
                <span class="NB-module-content-subtitle">
                  Official Client
                </span>
                <div class="NB-module-mobile-title">NewsBlur</div>
                <div class="NB-module-mobile-device">iPhone</div>
            </h3>
            <div class="NB-module-item-title">
                <span class="NB-raquo">&raquo;</span>
                <a href="/iphone/" class="NB-splash-link">See the free NewsBlur iPhone App</a>
            </div>
          </div>
          <div class="NB-module-item {% if user_profile.hide_mobile %}NB-hidden{% endif %}">
            <div class="NB-module-mobile-image">
                <img src="{{ MEDIA_URL }}/img/mobile/android-icon-blar.png" />
            </div>
            <h3 class="NB-module-content-header">
                <span class="NB-module-content-subtitle">
                  User-Built Client
                </span>
                <div class="NB-module-mobile-title">Blar</div>
                <div class="NB-module-mobile-device">Android</div>
            </h3>
            <div class="NB-module-item-title">
                <span class="NB-raquo">&raquo;</span>
                <a href="https://market.android.com/details?id=bitwrit.Blar" class="NB-splash-link">Download Blar on the Android Market</a>
            </div>
          </div>
          <div class="NB-module-item NB-last {% if user_profile.hide_mobile %}NB-hidden{% endif %}">
            <div class="NB-module-mobile-image">
                <img src="{{ MEDIA_URL }}/img/mobile/meego-icon-webfeeds.png" />
            </div>
            <h3 class="NB-module-content-header">
                <span class="NB-module-content-subtitle">
                  User-Built Client
                </span>
                <div class="NB-module-mobile-title">Web Feeds</div>
                <div class="NB-module-mobile-device">Nokia MeeGo</div>
            </h3>
            <div class="NB-module-item-title">
                <span class="NB-raquo">&raquo;</span>
                <a href="http://projects.developer.nokia.com/feed_reader" class="NB-splash-link">Download Web Feeds on the Nokia Store</a>
            </div>
          </div>
        </div>
      {% endif %}
      
    {% endif %}
    
    {% if not user.is_authenticated or user_profile.hide_getting_started %}
        {% render_statistics_graphs statistics %}
    {% endif %}

  </div>
  
</div>



<div class="left-pane">

    <div class="left-north">
      <div class="NB-feeds-header-dashboard">
        <div class="NB-feeds-header-right">
          <div class="NB-feeds-header-sites">&nbsp;</div>
        </div>
        <div class="NB-feeds-header-left">
          <span class="NB-feeds-header-count NB-feeds-header-negative NB-empty">0</span>
          <span class="NB-feeds-header-count NB-feeds-header-neutral NB-empty">0</span>
          <span class="NB-feeds-header-count NB-feeds-header-positive NB-empty">0</span>
        </div>
        <div class="NB-feeds-header-home">Dashboard</div>
      </div>
    </div>
    
    <div class="left-center">

      <div class="left-center-content NB-feedlist">
        <div id="NB-feeds-list-loader">Everything is on its way...</div>
        <div class="NB-feeds-header-wrapper">
          
          <div class="NB-feeds-header-container NB-feeds-header-river-container">
            <div class="NB-feeds-header NB-feeds-header-river NB-empty">
              <div class="NB-feeds-header-count unread_count"></div>
              <div class="NB-feeds-header-icon"></div>
              <div class="NB-feeds-header-title">
                Everything
              </div>
            </div>
          </div>
          
          <div class="NB-feeds-header-container NB-feeds-header-starred-container">
            <div class="NB-feeds-header NB-feeds-header-starred NB-empty">
              <div class="NB-feeds-header-count unread_count"></div>
              <div class="NB-feeds-header-icon"></div>
              <div class="NB-feeds-header-title">
                Saved Stories
              </div>
            </div>
          </div>
          
          <div class="NB-feeds-header-container NB-feeds-header-tryfeed-container">
            <div class="NB-feeds-header NB-feeds-header-tryfeed">
              <img class="NB-feeds-header-icon" src="" />
              <div class="NB-feeds-header-title"></div>
            </div>
          </div>
          
        </div>
        <ul class="NB-socialfeeds NB-feedlist"></ul>
        <ul class="folder NB-feedlist" id="feed_list"></ul>
      </div>
    
      <div class="left-center-footer">
        <div id="NB-progress">
          <div class="NB-progress-container">
            <div class="NB-progress-close"></div>
            <div class="NB-progress-title">Fetching your feeds</div>
            <div class="NB-progress-percentage"></div>
            <div class="NB-progress-link"></div>
            <div class="NB-progress-counts">
              <span class="NB-progress-counts-fetched"></span>
              /
              <span class="NB-progress-counts-total"></span>
            </div>
            <div class="NB-progress-bar"></div>
          </div>
        </div>
      </div>
      
    </div>
    
    <div class="NB-taskbar-container left-south">
      <div class="NB-taskbar">
        <div class="NB-callout-ftux NB-callout">
          <div class="NB-callout-container">
            <div class="NB-callout-text"></div>
            <div class="NB-callout-arrow"></div>
          </div>
        </div>
        <ul class="taskbar_nav taskbar_nav_feeds">
          <li class="task_button task_button_menu NB-task-add">
              <div class="NB-task-button-wrapper">
                  <div class="task_button_background"></div>
                  <div class="NB-task-image"></div>
              </div>
          </li>
          <li class="task_button task_button_menu NB-task-manage NB-disabled">
              <div class="NB-task-button-wrapper">
                  <div class="task_button_background"></div>
                  <div class="NB-task-image"></div>
              </div>
          </li>
        </ul>
        <div class="NB-taskbar-intelligence">
          <div class="NB-intelligence-slider">
              <ul class="segmented-control">
                  <li class="NB-intelligence-slider-control NB-intelligence-slider-red">
                      <img src="{{ MEDIA_URL }}embed/icons/silk/bullet_red.png">
                      <img src="{{ MEDIA_URL }}embed/icons/silk/bullet_yellow.png">
                      <img src="{{ MEDIA_URL }}embed/icons/silk/bullet_green.png">
                  </li>
                  <li class="NB-intelligence-slider-control NB-intelligence-slider-yellow">
                      <img src="{{ MEDIA_URL }}embed/icons/silk/bullet_yellow.png">
                      <img src="{{ MEDIA_URL }}embed/icons/silk/bullet_green.png">
                  </li>
                  <li class="NB-intelligence-slider-control NB-intelligence-slider-green">
                      <img src="{{ MEDIA_URL }}embed/icons/silk/bullet_green.png">
                  </li>
              </ul>
          </div>
        </div>
        <div class="NB-taskbar-sidebar-toggle-close" title="Hide sidebar (u)"></div>
      </div>
    </div>

</div>

<div class="NB-menu-manage-container"></div>

<div class="NB-taskbar-sidebar-toggle-open" title="Show sidebar"><div class="NB-taskbar-sidebar-toggle-open-image"></div></div>
    
<div class="right-pane">
  
    <div id="story_titles" class="right-north"></div>
    <div class="content-pane">
        <div id="story_taskbar" class="NB-taskbar-container content-north">
          <div class="NB-taskbar">
            <ul class="taskbar_nav taskbar_nav_view">
              <li class="task_button task_button_view task_view_page NB-active">
                  <div class="NB-task-button-wrapper">
                      <div class="task_button_background"></div>
                      <div class="NB-task-image"></div>
                      <span class="NB-task-title">Original</span>
                      <span class="NB-task-original-return NB-task-title">
                          <div>Return to</div>
                          <div>Original</div>
                      </span>
                      <div class="NB-task-view-switch-arrow NB-task-view-page-to-feed-arrow"></div>
                  </div>
              </li>
              <li class="task_button task_button_view task_view_feed">
                  <div class="NB-task-button-wrapper">
                      <div class="task_button_background"></div>
                      <div class="NB-task-image"></div>
                      <span class="NB-task-title">Feed</span>
                      <div class="NB-task-view-switch-arrow NB-task-view-feed-to-story-arrow"></div>
                  </div>
              </li>
              <li class="task_button task_button_view task_view_story">
                  <div class="NB-task-button-wrapper">
                      <div class="task_button_background"></div>
                      <div class="NB-task-image"></div>
                      <span class="NB-task-title">Story</span>
                  </div>
              </li>
              <li class="task_button NB-task-feed-settings">
                  <div class="NB-task-button-wrapper">
                      <div class="task_button_background"></div>
                      <div class="NB-task-image"></div>
                  </div>
              </li>
            </ul>
            <ul class="taskbar_nav taskbar_nav_story first">
              <li class="task_button task_button_story task_story_previous">
                  <div class="NB-task-button-wrapper">
                      <div class="task_button_background"></div>
                      <div class="NB-task-image"></div>
                  </div>
              </li>
              <li class="task_button task_button_story task_story_next_unread task_story_next_positive">
                  <div class="NB-task-button-wrapper">
                      <div class="task_button_background"></div>
                      <div class="NB-task-image"></div>
                      <span class="NB-task-title">Next Unread</span>
                  </div>
              </li>
              <li class="task_button task_button_story task_story_next">
                  <div class="NB-task-button-wrapper">
                      <div class="task_button_background"></div>
                      <div class="NB-task-image"></div>
                  </div>
              </li>
              {% if not user.is_authenticated %}
                <li class="task_button task_button_signup">
                    <div class="NB-task-button-wrapper">
                      <div class="task_button_background"></div>
                      <div class="NB-task-image"></div>
                    </div>
                </li>
              {% endif %}
            </ul>
          </div>
        </div>
          
        {% if not user.is_authenticated %}
          <div class="NB-callout-ftux-signup NB-callout">
            <div class="NB-callout-container">
              <div class="NB-callout-text"></div>
              <div class="NB-callout-arrow"></div>
            </div>
          </div>
        {% endif %}
    
        <div id="story_pane" class="content-center">
            <div id="mouse-indicator">
              <div class="NB-callout-mouse-indicator NB-callout">
                <div class="NB-callout-container">
                  <div class="NB-callout-text"></div>
                  <div class="NB-callout-arrow"></div>
                </div>
              </div>
            </div>
            <div class="NB-story-pane-container">
              <iframe id="feed_iframe" class="NB-feed-iframe"></iframe>
              <div class="NB-feed-story-view NB-view-hidden">
                <div class="NB-feed-story-view-floater"></div>
                <ul class="NB-feed-stories"></ul>
              </div>
              <iframe id="story_iframe" class="NB-story-iframe"></iframe>
            </div>
        </div>
        
    </div>    
    
</div>


{% endblock %}