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

<div class="{{ containerClass or 'container' }}">
  <div class="page-section">
    <div class="card border-left-4 border-left-accent card-sm mb-lg-32pt">
      <div class="card-body pl-16pt">
        <div class="media flex-wrap align-items-center">
          <div class="media-left">
            <i class="material-icons text-50">access_time</i>
          </div>
          <div class="media-body" style="min-width: 180px">
            Your subscription ends on <strong>25 February 2015</strong>
          </div>
          <div class="media-right mt-2 mt-sm-0">
            <a class="btn btn-link text-secondary" href="{{ prefix or '' }}student-billing.html">Upgrade</a>
          </div>
        </div>
      </div>
    </div>

    <div class="row mb-lg-8pt">
      <div class="col-lg-6">

        <div class="card">
          <div class="card-header d-flex align-items-center">
            <div class="h2 mb-0 mr-3 text-accent">116</div>
            <div class="flex">
              <p class="mb-0"><strong>Angular</strong></p>
              <p class="text-50 mb-0 mt-n1">Best score</p>
            </div>
            <div class="dropdown">
              <a href="#" class="dropdown-toggle text-70" data-toggle="dropdown">Popular Topics</a>
              <div class="dropdown-menu dropdown-menu-right">
                <a href="" class="dropdown-item">Popular Topics</a>
                <a href="" class="dropdown-item">Web Design</a>
              </div>
            </div>
          </div>
          <div class="card-body p-24pt">
            <div class="chart" style="height: 344px;">
              <canvas id="topicIqChart" class="chart-canvas"></canvas>
            </div>
          </div>
        </div>

      </div>
      <div class="col-lg-6">
        
        <div class="card">
          <div class="card-header d-flex align-items-center border-0">
            <div class="h2 mb-0 mr-3 text-accent">432</div>
            <div class="flex">
              <p class="mb-0"><strong>Experience IQ</strong></p>
              <p class="text-50 mb-0 mt-n1">4 days streak this week</p>
            </div>
            <i class="material-icons text-muted ml-2">trending_up</i>
          </div>
          <div class="card-body pt-0">
            <div class="chart" style="height: 128px;">
              <canvas id="iqChart" class="chart-canvas"></canvas>
            </div>
          </div>
        </div>

        {% include 'components/achievements.carousel.html' %}

      </div>
    </div>

    <div class="row mb-lg-8pt">
      <div class="col-lg-6 mb-8pt mb-sm-0">
        <div class="page-heading">
          <h4>Learning Paths</h4>
          <a 
            href="{{ prefix or '' }}student-my-courses.html" 
            class="text-underline ml-sm-auto">My learning paths</a>
        </div>

        {% import '_account-path-card.html' as path %}

        {{ path.component(title='Angular', image='angular') }}
        {{ path.component(title='Swift', image='swift', favorite=true) }}
        {{ path.component(title='React Native', image='react', position='left') }}
      </div>
      <div class="col-lg-6">
        <div class="page-heading">
          <h4>Courses</h4>
          <a 
            href="{{ prefix or '' }}student-my-courses.html" 
            class="text-underline ml-sm-auto">My courses</a>
        </div>

        {% import '_courses.carousel.html' as carousel %}
        {{ carousel.component(control=true, col_class='col-sm-6', account=true) }}
      </div>
    </div>

    <h4>Discussions</h4>

    <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 ''}}student-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">My Posts</a>
              <div class="dropdown-menu dropdown-menu-right">
                <a href="" class="dropdown-item active">My Posts</a>
                <a href="" class="dropdown-item">All Posts</a>
              </div>
            </div>
            <a href="{{ prefix or '' }}student-discussions-ask.html" class="btn btn-outline-secondary">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'
      }]) }}

      <div class="card-body text-center">
        <a href="{{ prefix or '' }}student-discussions.html" class="text-underline">View more discussions</a>
      </div>
    </div>

  </div>
</div>