{% extends "layout.html" %}
{% block content %}
<!-- {% for post in posts %}
<p><a href="{{ url_for('post', post_id=post.id) }}"><img src="{{ url_for('static', filename='img/' + post.image_file) }}">
  "{{ post.title }}"</a>&nbsp
  by {{ post.user.username }}</p>
<p>{{ post.content }}</p>
{% endfor %} -->


<section id="cta" class="section">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-12 align-self-center">
                <h2>A Software Development Blog</h2>
                <p class="lead"> First solve the problem, then write the code. by John Johnson</p>
                <a href="{{ url_for('allposts') }}" class="btn btn-primary">Read all posts</a>
            </div>
            
        </div>
    </div>
</section>


<section class="section lb">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

                <div class="page-wrapper">
                    <div class="blog-custom-build">
                      {% for postIndex in range(0,3) %}
                          <div class="blog-box wow fadeIn">
                              <div class="post-media">
                                  <a href="{{ url_for('post', post_id=posts[postIndex].id) }}">
                                      <img src="{{ url_for('static', filename='images/' + posts[postIndex].image_file) }}" class="img-fluid">
                                      <div class="hovereffect">
                                          <span></span>
                                      </div>
                                  </a>
                              </div>
                              <!-- end media -->
                              <div class="blog-meta big-meta text-center">
                        
                                  <h4><a href="{{ url_for('post', post_id=posts[postIndex].id) }}" title="">{{ posts[postIndex].title }}</a></h4>
                                  <small><a href="{{ url_for('post', post_id=posts[postIndex].id) }}" title="">{{posts[postIndex].date}}</a></small>
                                  <small><a href="#" title="">by {{posts[postIndex].user.username}}</a></small>
                              </div><!-- end meta -->
                          </div><!-- end blog-box -->
                          <hr class="invis">
                        {% endfor %}

                    </div>

                   <a href="{{ url_for('allposts') }}" class="btn btn-primary" style="width: 100%">Read all posts</a>
     

<!--                 <div class="row">
                    <div class="col-md-12">
                        <nav aria-label="Page navigation">
                            <ul class="pagination justify-content-center">
                                <li class="page-item"><a class="page-link" href="#">1</a></li>
                                <li class="page-item"><a class="page-link" href="#">2</a></li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                <li class="page-item">
                                    <a class="page-link" href="#">Next</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div> -->
            </div><!-- end col -->

        </div><!-- end row -->
    </div><!-- end container -->
</section>


{% endblock content %}