{% import 'components/card-faq.html' as faq %}
{% import 'components/pager.html' as pager %}

<div class="flex search-form form-control-rounded search-form--light mb-16pt" style="min-width: 200px;">
  <input type="text" class="form-control" placeholder="Search articles" id="searchSample02">
  <button class="btn pr-3" type="button" role="button"><i class="material-icons">search</i></button>
</div>
<div class="mb-32pt d-flex align-items-center">
  <small class="text-black-70 text-headings text-uppercase mr-3">Displaying 10 out of 5,234 articles</small>
  <div class="dropdown ml-auto">
    <a href="" data-toggle="dropdown" class="dropdown-toggle text-black-70">All Topics</a>
    <div class="dropdown-menu dropdown-menu-right">
      <a href="" class="dropdown-item active">All Topics</a>
      <a href="" class="dropdown-item">General</a>
      <a href="" class="dropdown-item">Lessons</a>
      <a href="" class="dropdown-item">Customer Support</a>
    </div>
  </div>
</div>

<div class="row card-group-row">
  <div class="col-md-6 card-group-row__col">
    {{ faq.component(
      title='Do you offer a free trial?',
      description='We offer everyone a 7 day free trial! You can take advantage of it by visiting our sign-up page! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, ab!',
      class='card-group-row__card') }}
  </div>
  <div class="col-md-6 card-group-row__col">
    {{ faq.component(
      title='Can I gift a subscription to someone?',
      description='Yes! We do offer certificates. Please email us for more information. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, ad!',
      class='card-group-row__card') }}  
  </div>
  <div class="col-md-6 card-group-row__col">
    {{ faq.component(
      title='I have a great idea for an application or website, but need help on where to begin. Can you guys help me?',
      description='We advise posting personal requests in our Community Forum Lorem ipsum dolor sit amet.',
      class='card-group-row__card') }}
  </div>
  <div class="col-md-6 card-group-row__col">
    {{ faq.component(
      title='I found a bug. Where can I report that?',
      description='In the unlikely situation you stumble across a bug, go ahead and shoot us an email. Lorem ipsum dolor sit amet.',
      class='card-group-row__card') }}
  </div>
</div>

{{ pager.pager() }}