{% macro component() %}
{% import 'components/achievement.html' as achievement %}

{% set achievements = [{
  image: 'assets/images/achievements/flinto.png',
  logo: 'assets/images/paths/flinto_40x40@2x.png',
  title: 'Flinto',
  description: 'Introduction to The App Design Application',
  date: 'Jun 5, 2018'
}, {
  image: 'assets/images/achievements/angular.png',
  logo: 'assets/images/paths/angular_64x64.png',
  title: 'Angular fundamentals',
  description: 'Creating and Communicating Between Angular Components',
  date: 'Jun 5, 2018'
}] %}

<div id="carouselExampleFade" class="carousel carousel-card slide mb-24pt">
  <div class="carousel-inner">
    {% for item in achievements %}
    <div class="carousel-item{% if loop.index === 1 %} active{% endif %}">
      {{ achievement.component(item=item, prefix=prefix) }}
    </div>
    {% endfor %}
  </div>
  <!-- <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
    <span class="carousel-control-icon material-icons" aria-hidden="true">keyboard_arrow_left</span>
    <span class="sr-only">Previous</span>
  </a> -->
  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-icon material-icons" aria-hidden="true">keyboard_arrow_right</span>
    <span class="sr-only">Next</span>
  </a>
</div>
{% endmacro %}
{{ component() }}