{#  -*- coding: utf-8 -*- #}
{% extends 'base.tmpl' %}
{% import 'project_helper.tmpl' as project with context %}
{% block content %}
    <header class="page-header">
        <h1>{{ title }}</h1>
    </header>
{% if featured %}
<div class="carousel">
  {% for p in featured %}
  <input type="checkbox" class="faux-ui-facia">
  <div class="slide" annot="{{ p.title() }}">
    <img src="{{ p.meta('previewimage') }}" alt="{{ p.title() }}">
  </div>
  {% endfor %}
</div>

{% endif %}

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    {% for p in featured %}
    <div class="carousel-item
{% if loop.index0 == 0 %}
active
{% endif %}
">
    <a href="{{ p.permalink() }}">
      <img class="d-block w-100" style="max-width: 100%" src="{{ p.meta('previewimage') }}" alt="{{ p.title() }}">
    </a>
      <div class="carousel-caption d-none d-md-block">
        <h3>{{ p.title() }} {{ project.devstatus(p.meta('devstatus')) }}</h3>
        <p>{{ p.description() }}</p>
        <a href="{{ p.permalink() }}" class="btn btn-primary"><i class="fa fa-info-circle"></i> View details</a>
      </div>
    </div>
    {% endfor %}
  </div>

  <a class="carousel-control-prev" href="#project-carousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#project-carousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>


<h2>All projects</h2>

    <ul class="project-list">
    {% for p in projects %}
        <li class="project project-sort-{{ p.meta('sort') }}"><a href="{{ p.permalink() }}">{{ p.title() }}</a> {{ project.devstatus(p.meta('devstatus')) }}</a></li>
    {% endfor %}
    </ul>
{% endblock %}