{% extends "base.html" %}

{% load humanize %}

{% block sub-header %}{% endblock %}
{% block keyboard-shortcuts %}{% endblock %}
{% block inline-js %}{% endblock %}
{% block snipt-templates %}{% endblock %}
{% block preload %}{% endblock %}
{% block main-edit %}{% endblock %}
{% block body-class %}homepage{% endblock %}
{% block html-class %}homepage{% endblock %}
{% block css %}
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/bootstrap-responsive.min.css" />
{% endblock %}

{% block header %}
    <header class="main">
        <div class="container">
            <div class="row">
                <h1 class="main-logo span2">
                    <a href="/">snip<span>t</span></a>
                </h1> 
                <nav class="span6 offset4">
                    <ul>
                        <li>
                            <a href="/public/">Public Snipts</a>
                        </li>
                        <li>
                            <a href="/search/">Search</a>
                        </li>
                        <li>
                            <a class="button" href="/login/">Log in</a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="row">
                <div class="sub span12">
                    <h2>The publishing platform for coders.</h2>
                    <h3>Store, share, blog, learn.</h3>
                </div>
            </div>
        </div>
    </header>
{% endblock %}
{% block main %}
    <section class="coders">
        <div class="container">
            <div class="row">
                <div class="span12">
                    <h4>{{ users_count|intcomma }} coders in over 120 countries have stored {{ snipts_count|intcomma }} snipts, in 145 languages.</h4>
                </div>
            </div>
        </div>
        <a href="/signup/" class="button">Sign up</a>
        <div class="faces group">
            <div class="inner">
                {% for coder in coders %}
                    <a href="/{{ coder.username }}/" title="{{ coder.username }}">
                        <img alt="{{ coder.username }}" title="{{ coder.username }}" src="https://secure.gravatar.com/avatar/{{ coder.email_md5 }}?s=50" />
                    </a>
                {% endfor %}
            </div>
        </div>
    </section>
    <section class="features">
        <div class="container">
            <div class="row">
                <header class="span4 offset4">
                    <h1>Built for coders.</h1>
                </header>
            </div>
            <div class="feature row store">
                <div class="inner">
                    <h2>Store private code snippets.</h2>
                    <p>Your snipts are <code>private</code> by default, making them perfect for storing and organizing code you never want to forget.</p>
                </div>
            </div>
            <div class="feature row share">
                <div class="inner">
                    <h2>Store public code snippets, and share.</h2>
                    <p>Mark a snipt as <code class="good">public</code> to share it with the world. Share on Twitter, comment with Disqus, etc.</p>
                </div>
            </div>
            <div class="feature row browse">
                <div class="inner">
                    <h2>Browse, search, learn.</h2>
                    <p><a href="/public/">Browse</a> and <a href="/search/">search</a> through public snipts to learn new approaches and best practices.</p>
                </div>
            </div>
            <div class="feature row blog">
                <div class="inner">
                    <h2>Fast, code-focused blogging.</h2>
                    <p><a href="/blogging/">A full blog in seconds</a>: mark a snipt as "Blog Post", and blog with ease. Markdown support built-in. Your domain, or ours.</p>
                </div>
            </div>
        </div>
    </section>
{% endblock %}