
<div class="container">
  <div class="grid">
    {% for item in __SELF__.portfolio %}
      <div class="card">
        <a href="{{item.url}}">
          {% if item.images | length > 0 %}
              <img src="{{ item.images[0].thumb(400, { extension: 'jpg' }) }}" width="100%" alt="">
          {% endif %}
        </a>
        <div class="base-padding">
          <h3><a href="{{item.url}}">{{item.title}}</a></h3>
          {% if item.description %}
            <p> {{ item.description | raw }} </p>
          {% endif %}
        </div>
      </div>
    {% endfor %}
  </div>

  {% if __SELF__.portfolio.lastPage > 1 %}
    <div class="flex pagination">
      {% if __SELF__.portfolio.currentPage > 1 %}
        <a href="{{ this.page.baseFileName|page({ page: (__SELF__.portfolio.currentPage - 1) }) }}">&larr; Prev</a>
      {% endif %}

      {% for page in 1..__SELF__.portfolio.lastPage %}
        <a class="{{__SELF__.portfolio.currentPage == page ? 'active' : null }}"
           href="{{ this.page.baseFileName|page({ page: page }) }}">{{ page }}
        </a>
      {% endfor %}

      {% if __SELF__.portfolio.lastPage > __SELF__.portfolio.currentPage %}
        <a href="{{ this.page.baseFileName|page({ page: (__SELF__.portfolio.currentPage + 1)} ) }}">Next &rarr;</a>
      {% endif %}
    </div>
  {% endif %}
</div>
