{% import 'components/discussions.html' as discussions %}

<div class="{{ containerClass or 'container' }}">
  <div class="page-section">

    <div class="page-separator">
      <div class="page-separator__text">{{ title }}</div>
    </div>

    <div class="card">
      <div class="card-header">
        <div class="row align-items-center" style="white-space: nowrap;">
          <div class="col-lg-auto">
            <form class="search-form {{ search_form }} d-lg-inline-flex mb-8pt mb-lg-0" action="{{ prefix or ''}}discussions.html">
              <input type="text" class="form-control w-lg-auto" placeholder="Search discussions">
              <button class="btn" type="submit" role="button"><i class="material-icons">search</i></button>
            </form>
          </div>
          <div class="col-lg d-flex flex-wrap align-items-center">
            <div class="ml-lg-auto dropdown">
              <a href="#" class="btn btn-link dropdown-toggle text-70" data-toggle="dropdown">All Topics</a>
              <div class="dropdown-menu dropdown-menu-right">
                <a href="" class="dropdown-item active">All Topics</a>
                <a href="" class="dropdown-item">My Topics</a>
              </div>
            </div>
            <div class="dropdown mr-8pt">
              <a href="#" class="btn btn-link dropdown-toggle text-70" data-toggle="dropdown">Newest</a>
              <div class="dropdown-menu dropdown-menu-right">
                <a href="" class="dropdown-item active">Newest</a>
                <a href="" class="dropdown-item">Unanswered</a>
              </div>
            </div>
            <a href="{{ prefix or '' }}discussions-ask.html" class="btn btn-accent">Ask a question</a>
          </div>
        </div>
      </div>
      
      {{ discussions.component(items=[{
        avatar: 'assets/images/people/110/guy-1.jpg',
        date: '2 days ago',
        name: 'Laza Bogdan',
        title: 'Using Angular HttpClientModule instead of HttpModule',
        chips: ['Angular fundamentals']
      }, {
        avatar: 'assets/images/people/110/guy-2.jpg',
        date: '3 days ago',
        name: 'Adam Curtis',
        title: 'Why am I getting an error when trying to install angular/http@2.4.2'
      }, {
        avatar: 'assets/images/people/110/woman-1.jpg',
        date: '4 days ago',
        name: 'Emilie Howard',
        title: 'Using Angular HttpClientModule instead of HttpModule'
      }, {
        avatar: 'assets/images/people/110/guy-3.jpg',
        date: '6 days ago',
        name: 'Jason Klein',
        title: 'Why am I getting an error when trying to install angular/http@2.4.2'
      }], prefix=prefix) }}

      <div class="card-body text-center">
        <a href="" class="text-70 text-underline">View more discussions</a>
      </div>
    </div>

  </div>
</div>