{% import 'pages/_results-heading.html' as results %}
{% import 'components/pager.html' as pager %}
{% import '_account-path-card.html' as path %}

{{ results.component(label='paths', sidebar_toggle=results_sidebar_toggle) }}

<div class="page-separator">
  <div class="page-separator__text">Development Paths</div>
</div>

{% set items = [{
  title: 'React Native',
  image: 'react'
}, {
  title: 'Dev Ops',
  image: 'devops'
}, {
  title: 'Redis',
  image: 'redis'
}, {
  title: 'MailChimp',
  image: 'mailchimp',
  open: true,
  favorite: true
}, {
  title: 'Angular',
  image: 'angular'
}, {
  title: 'Swift',
  image: 'swift'
}, {
  title: 'WordPress',
  image: 'wordpress'
}] %}

<div class="row card-group-row mb-lg-8pt">
  {% for item in items %}
  <div class="col-sm-4 card-group-row__col">
    {{ path.component(
      class='card-group-row__card', 
      title=item.title, 
      image=item.image,
      open=item.open,
      favorite=item.favorite,
      cta=false,
      prefix=prefix) }}
  </div>
  {% endfor %}
</div>

<div class="mb-32pt">
  {{ pager.pager() }}
</div>

<div class="page-separator">
  <div class="page-separator__text">Design Paths</div>
</div>

{% set items = [{
  title: 'Sketch',
  image: 'sketch'
}, {
  title: 'Flinto',
  image: 'flinto'
}, {
  title: 'Photoshop',
  image: 'photoshop'
}, {
  title: 'Figma',
  image: 'figma'
}, {
  title: 'Adobe XD',
  image: 'xd'
}, {
  title: 'inVision App',
  image: 'invision'
}, {
  title: 'Craft by inVision',
  image: 'craft'
}] %}

<div class="row card-group-row mb-lg-8pt">
  {% for item in items %}
  <div class="col-sm-4 card-group-row__col">
    {{ path.component(
      class='card-group-row__card', 
      title=item.title, 
      image=item.image,
      cta=false,
      prefix=prefix) }}
  </div>
  {% endfor %}
</div>

{{ pager.pager() }}