{% extends "base.html" %}
{% load static %}

{% block body %}

  <!-- Section -->
  <section>
    <header class="major">
      <h2>Projects by popularity</h2>
    </header>
    <div class="posts">
      {% for project in projects %}
        <article>
          <h2><a href="{{ project.url }}">{{ project.project_name }}</a></h2>
          <h3>
            <i class="fa fa-thumbs-o-up" aria-hidden="true"></i> {{ project.vote_count }} | <i class="fa fa-eye" aria-hidden="true"></i> {{ project.view_count }}
          </h3>
          <h4>Uploaded by: <a href="/@{{ project.owner.nickname }}/">@{{ project.owner.nickname }}</a></h4>
          <p>{{ project.description }}</p>
          <ul class="actions">
            <li><a href="{{ project.url }}" class="button">Project Page</a></li>
            {% if project.is_owner %}
              <li><a href="{{ project.url }}edit" class="button">Edit</a></li>
            {% endif %}
          </ul>
        </article>
      {% endfor %}
      {% if projects_are_odd %}
        <article></article>
      {% endif %}
    </div>

    {% if projects.has_other_pages %}
      <ul class="pagination" style="text-align: center; font-size: 1.3em">
        {% if projects.has_previous %}
          <li><a href="?page={{ projects.previous_page_number }}">&laquo;</a></li>
        {% else %}
          <li class="disabled"><span>&laquo;</span></li>
        {% endif %}
        {% for i in projects.paginator.page_range %}
          {% if projects.number == i %}
            <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
          {% else %}
            <li><a href="?page={{ i }}">{{ i }}</a></li>
          {% endif %}
        {% endfor %}
        {% if projects.has_next %}
          <li><a href="?page={{ projects.next_page_number }}">&raquo;</a></li>
        {% else %}
          <li class="disabled"><span>&raquo;</span></li>
        {% endif %}
      </ul>
    {% endif %}

  </section>

{% endblock %}