{% 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 %}
    
    {% if custom_styling and custom_styling.custom_js %}
    <script id="NB-custom-js">
{{ custom_styling.custom_js|safe }}
    </script>
    {% endif %}

    {% if custom_styling and custom_styling.custom_css %}
    <style id="NB-custom-css">
{{ custom_styling.custom_css|safe }}
    </style>
    {% endif %}
{% endblock %}

{% block bodyclass %}
  NB-body-main 
  {% if preferences.theme == "dark" %}NB-dark{% endif %}
{% 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 242 %}px">
  <div class="NB-splash-modules">
    <div class="NB-modules-center">

	<div class="NB-module NB-module-account">
	    <h5 class="NB-module-header">
			 <div class="NB-module-account-settings NB-javascript"></div>
	        Welcome, <span class="NB-module-account-username">{{ user.username }}</span>
	    </h5>

	    <div class="NB-module-item">
	        <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 Account
	            {% endif %}
	        </h3>
	        <div class="NB-module-stats-counts">
	            <div class="NB-module-stats-count">
	                <div class="NB-module-stats-count-number NB-module-stats-count-number-sites">{{ feed_count|commify }}</div>
	                <div class="NB-module-stats-count-description">{{ feed_count|pluralize:"Site,Sites" }}</div>
	            </div>
	            <div class="NB-module-stats-count">
	                <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">
	                <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>
	
        {% if not user_profile.hide_getting_started %}
            {% render_getting_started %}
        {% endif %}
          
        <div class="NB-module NB-module-river">
            <h5 class="NB-module-header">
                <div class="NB-module-river-settings NB-javascript"></div>
                All Site Stories
            </h5>
            
            <div class="NB-view-river">
                <div class="NB-module-item NB-story-pane-west">
                    <div class="NB-story-titles"></div>
                </div>
            </div>
        </div>
        
        {% 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 class="NB-module-search NB-module">
            <h5 class="NB-module-header">
                Search Sites and People
            </h5>
            
            <div class="NB-module-search-container">
                <div class="NB-module-search-input NB-module-search-sites">
                    <div class="NB-search-close"></div>
                    <label for="search_site"><img src="{{ MEDIA_URL }}img/reader/search_light.png"></label>
                    <input id="search_site" name="search_site" placeholder="Site name or address...">
                </div>
                <div class="NB-module-search-input NB-module-search-people">
                    <div class="NB-search-close"></div>
                    <label for="search_people"><img src="{{ MEDIA_URL }}img/reader/search_light.png"></label>
                    <input id="search_people" name="search_people" placeholder="Username or email...">
                </div>
                <div class="NB-module-search-results"></div>
            </div>
        </div>

    </div>

    <div class="NB-account">        
		{% render_account_module %}
		{% render_manage_module %}
		{% render_statistics_graphs statistics %}
	</div>
	<div class="NB-manage">
	</div>

  </div>
</div>

{% render_feeds_skeleton %}

{% endblock %}