{% extends 'base.html' %}

{% load typogrify_tags %}

{% block content %}

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


<div id="NB-splash">


  <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 }}
            {% endfor %}
          {% endif %}
          <!--
          <div class="NB-account-label">Want an account?</div>
          <div class="NB-account-text">Talk to <a href="http://twitter.com/samuelclay">@samuelclay</a>.</div>
          -->
      
          <form method="post" action="{% url login %}">
            <div>
              {{ login_form.username.label_tag }}
              {{ login_form.username }}
            </div>
            <div>
              <div class="NB-signup-optional">Optional</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.signup_username.label_tag }}
              {{ signup_form.signup_username }}
            </div>
            <div class="NB-signup-hidden">
              <div class="NB-signup-optional">Optional</div>
              {{ signup_form.signup_password.label_tag }}
              {{ signup_form.signup_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 }}
            {% 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 opml-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-left">
            How It Works
          </div>
          <div class="NB-module-header-right">
            <a href="#" class="NB-module-direction NB-module-previous-page {% if howitworks_page == 0 %}NB-disabled{% endif %}"></a>
            <a href="#" class="NB-module-direction NB-module-next-page {% if howitworks_page == 5 %}NB-disabled{% endif %}"></a>
          </div>
        </h5>
        
        <div class="NB-howitworks-page-indicators">
          <a href="#" class="NB-module-page-indicator {% if howitworks_page == 0 %}NB-active{% endif %}"></a>
          <a href="#" class="NB-module-page-indicator {% if howitworks_page == 1 %}NB-active{% endif %}"></a>
          <a href="#" class="NB-module-page-indicator {% if howitworks_page == 2 %}NB-active{% endif %}"></a>
          <a href="#" class="NB-module-page-indicator {% if howitworks_page == 3 %}NB-active{% endif %}"></a>
          <a href="#" class="NB-module-page-indicator {% if howitworks_page == 4 %}NB-active{% endif %}"></a>
          <a href="#" class="NB-module-page-indicator {% if howitworks_page == 5 %}NB-active{% endif %}"></a>
        </div>
      
        <div class="NB-howitworks-page {% if howitworks_page == 0 %}NB-active{% endif %}">
          <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 {% if howitworks_page == 1 %}NB-active{% endif %}">
          <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 %}Intelligently find good stories you will like.{% endfilter %}
              </td>
            </tr>
          </table>
        </div>
      
        <div class="NB-howitworks-page {% if howitworks_page == 2 %}NB-active{% endif %}">
          <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 %}Intelligently filter out stories which you may dislike.{% endfilter %}
              </td>
            </tr>
          </table>
        </div>
      
        <div class="NB-howitworks-page {% if howitworks_page == 3 %}NB-active{% endif %}">
          <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 %}Import your feeds from Google Reader.{% endfilter %}
              </td>
            </tr>
          </table>
        </div>
      
        <div class="NB-howitworks-page {% if howitworks_page == 4 %}NB-active{% endif %}">
          <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 iPhone app, available in August.{% endfilter %}
              </td>
            </tr>
          </table>
        </div>
      
        <div class="NB-howitworks-page {% if howitworks_page == 5 %}NB-active{% endif %}">
          <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, regularly improved, attention to detail.{% endfilter %}
              </td>
            </tr>
          </table>
        </div>
        
      </div>
    {% else %}
      <div class="NB-module NB-module-stats">
        <h5 class="NB-module-header">
          Welcome, {{ user.username }}
          <div class="NB-module-header-right">
            <a href="{% url logout %}?next=/" class="NB-splash-link">Logout</a>
          </div>
        </h5>
      </div>
    {% endif %}
    
    <div class="NB-module NB-module-features">
      <h5 class="NB-module-header">
        New Features
        <div class="NB-module-header-right">
          {% if user.is_staff %}
            <div class="NB-features-add">
              <a href="#" id="add-feature-button" class="NB-splash-link">Add</a>
            </div>
            <script>
            $(document).ready(function() {
              $('#add-feature-button').click(function(e) {
                e.preventDefault();
                $('#add-feature-form').fadeIn(500);
              });
            });
            </script>
          {% endif %}
          <a href="#" class="NB-module-direction NB-module-previous-page NB-disabled"></a>
          <a href="#" class="NB-module-direction NB-module-next-page"></a>
        </div>
      </h5>
      
      <table class="" cellpadding="0" cellspacing="0">
        {% for feature in features %}
          <tr class="NB-module-feature {% if forloop.last %}last{% endif %} {% if feature.date > user.profile.last_seen_on %}NB-module-feature-new{% endif %}">
            <td class="NB-module-feature-date">{{ feature.date|date:"M d, Y" }}</td>
            <td class="NB-module-feature-description">{{ feature.description|typogrify }}</td>
          </tr>
        {% endfor %}
      </table>
      {% if user.is_staff %}
        <form action="{% url add-feature %}" id="add-feature-form" method="post">
          {{ feature_form.description }}
          <input type="submit" value="Add feature" />
        </form>
      {% endif %}
    </div>
    
    {% if user.is_authenticated %}
      <div class="NB-module NB-module-stats">
        <h5 class="NB-module-header">
          Spread the Love
        </h5>
      
        <table class="NB-module-features" cellpadding="0" cellspacing="0">
          <tr class="NB-module-feature {% if forloop.last %}last{% endif %}">
            <td class="NB-module-feature-description"><a href="http://twitter.com/?status=NewsBlur, an intelligent feed reader, makes me swoon: http://www.newsblur.com."><b>Tweet your support</b></a> <img class="NB-module-feature-arrow" src="{{ MEDIA_URL }}/img/icons/silk/arrow_right.png" /> The more people who use NewsBlur, the more incentive there is to continually improve it. <a href="http://twitter.com/samuelclay">Follow @samuelclay</a> for fun.</td>
          </tr>
        </table>
        {% if user.is_staff %}
          <form action="{% url add-feature %}" id="add-feature-form" method="post">
            {{ feature_form.description }}
            <input type="submit" value="Add feature" />
          </form>
        {% endif %}
      </div>
    {% endif %}
    
  </div>

    
  <div class="NB-splash-info">
    <ul class="NB-splash-links">
      <li class="NB-splash-link">Hand-crafted by: <a href="http://www.samuelclay.com">Samuel Clay</a></li>
      <li class="NB-splash-link">Write to me: <a href="mailto:samuel@ofbrooklyn.com">samuel@ofbrooklyn.com</a></li>
      <li class="NB-splash-link">Twitter, Twitter: <a href="http://twitter.com/samuelclay">@samuelclay</a></li>
    </ul>
    <div class="NB-splash-title"></div>
  </div>

</div>

<div class="left-pane">
    <ul class="left-center" id="feed_list"></ul>
    <div class="NB-taskbar left-south">
      <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">
    		<li class="task_button task_button_menu NB-task-manage NB-disabled">
    		</li>
    	</ul>
    	<div class="NB-taskbar-intelligence">
    	  <div class="NB-taskbar-intelligence-indicator NB-taskbar-intelligence-negative"></div>
    	  <div class="NB-taskbar-intelligence-indicator NB-taskbar-intelligence-neutral"></div>
    	  <div class="NB-taskbar-intelligence-indicator NB-taskbar-intelligence-positive"></div>
    	 <div class="NB-intelligence-slider"></div>
    	</div>
    </div>
    <div class="NB-menu-manage-container"></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 content-north">
          <ul class="taskbar_nav taskbar_nav_view">
            <li class="task_button task_button_view task_view_page NB-active"><span class="NB-task-title">Original</span>
              <div class="NB-task-view-page-to-feed-arrow"></div>
            </li>
            <li class="task_button task_button_view task_view_feed"><span class="NB-task-title">Feed</span></li>
            <li class="task_button task_button_view task_view_story"><span class="NB-task-title">Story</span></li>
          </ul>

          <ul class="taskbar_nav taskbar_nav_return">
            <li class="task_button task_return">
              <span class="NB-task-title">
                <div>Return to</div>
                <div>Original</div>
              </span>
            </li>
          </ul>

          <ul class="taskbar_nav taskbar_nav_story first">
            <li class="task_button task_button_story task_story_previous"></li>
            <li class="task_button task_button_story task_story_next_unread task_story_next_positive">
              <span class="NB-task-title">Next Unread</span>
            </li>
            <li class="task_button task_button_story task_story_next"></li>
            {% if not user.is_authenticated %}
              <li class="task_button task_button_signup"></li>
            {% endif %}
          </ul>
        	
        </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 class="NB-story-pane-container">
        		<iframe id="story_iframe" class="NB-feed-frame"></iframe>
        		<div class="NB-feed-story-view NB-view-hidden"></div>
            </div>
		
        </div>
        
        <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>    
    
</div>


{% endblock %}