<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Blog</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="http://getbootstrap.com/examples/blog/blog.css">
  </head>

  <body>
    <div class="container">
      <div class="blog-header">
        <h1 class="blog-title"><a href="{% url 'blog' %}">Blog</a></h1>
        <p class="lead blog-description">Better blogging with Butter.</p>
      </div>

      <div class="row">
        <div class="col-sm-8 blog-main">
        {% block content %}

          {% for post in recent_posts %}
          <div class="blog-post">
            <h2 class="blog-post-title"><a href="{{ post.url }}">{{ post.title }}</a></h2>
            <p class="blog-post-meta"><a href="#">{{ post.author.first_name }} {{ post.author.last_name }}</a> on {{ post.created }}</p>
            <p class="blog-post-summary">{{ post.summary }}</p>
          </div><!-- /.blog-post -->
          {% endfor %}

        {% endblock %}

        </div><!-- /.blog-main -->


        <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
            <div class="sidebar-module">
              <h4>Recent Posts</h4>
              <ol class="list-unstyled">
                <li><a href="#">March 2015</a></li>
              </ol>
            </div>
            <div class="sidebar-module">
              <h4>Categories</h4>
              <ol class="list-unstyled">
                <li><a href="#">March 2015</a></li>
              </ol>
            </div>

        </div><!-- /.blog-sidebar -->

      </div><!-- /.row -->

    </div><!-- /.container -->

    <footer class="blog-footer">
      <p>
        <a href="#">Back to top</a>
      </p>
    </footer>

    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

  </body>
</html>
