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

<div class="{{ containerClass }} page__container page-section">
  <div class="page-separator">
    <div class="page-separator__text">Overview</div>
  </div>

  <div class="row card-group-row mb-lg-8pt">
    <div class="col-lg-7 card-group-row__col">

      <div class="card card-group-row__card d-flex flex-column">
        <div class="row no-gutters flex">
          <div class="col-6">
            <div class="card-body">
              <h6 class="text-50">Overview</h6>

              <div class="h2 mb-0">92</div>
              <div class="d-flex flex-column">
                <strong>Total Posts</strong>
                <small class="text-50">13 this week</small>
              </div>
            </div>
            <div class="card-body">
              <div class="h2 mb-0">+3</div>
              <div class="d-flex flex-column">
                <strong>Today</strong>
                <small class="text-50">Published</small>
              </div>
            </div>
          </div>
          <div class="col-6 border-left">
            <div class="card-body">
              <h6 class="text-50">Engagement</h6>

              <div class="h2 mb-0">2,211</div>
              <div class="d-flex flex-column">
                <strong>Total Views</strong>
                <small class="text-50">1.3k today</small>
              </div>
            </div>
            <div class="card-body">
              <div class="h2 mb-0">113</div>
              <strong>Comments</strong>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div class="col-lg-5 card-group-row__col">

      <div class="card card-group-row__card">
        <div class="card-body">
          <h6>Latest Posts</h6>

          <div class="d-flex align-items-center">
            <div class="mr-12pt">
              <div class="avatar avatar-xl avatar-4by3">
                <img src="assets/images/stories/256_rsz_clem-onojeghuo-193397-unsplash.jpg" alt="Avatar" class="avatar-img rounded">
              </div>
            </div>
            <div class="flex">
              <h5 class="card-title m-0"><a href="" class="headings-color">Cheap Romantic Vacations</a></h5>
              <small class="text-50">35 views this week</small>
            </div>
          </div>
        </div>
        <div class="card-body">

          {% set posts = [{
            avatar: "assets/images/stories/256_rsz_dex-ezekiel-761373-unsplash.jpg",
            title: "Copper Canyon",
            views: 78,
            tag: "future",
            date: "10 Nov, 2018 08:25 AM",
            avatarGroup: true,
            avatarCount: 2,
            avatars: [
              "assets/images/256_joao-silas-636453-unsplash.jpg",
              "assets/images/256_jeremy-banks-798787-unsplash.jpg",
              "assets/images/256_daniel-gaffey-1060698-unsplash.jpg"
            ]
          }, {
            avatar: "assets/images/stories/256_rsz_rhema-kallianpur-275251-unsplash.jpg",
            title: "Selecting The Right Hotel",
            views: 78,
            tag: "video",
            date: "09 Nov, 2018 07:13 PM",
            avatarGroup: true,
            avatarCount: 1,
            avatars: [
              "assets/images/256_rsz_1andy-lee-642320-unsplash.jpg",
              "assets/images/256_michael-dam-258165-unsplash.jpg",
              "assets/images/256_luke-porter-261779-unsplash.jpg"
            ]
          }] %}
          
          {% for item in posts %}
          <div class="d-flex align-items-center{% if not loop.last %} mb-8pt{% endif %}">
            <div class="mr-8pt">
              <div class="avatar avatar-sm avatar-4by3">
                <img src="{{ item.avatar }}" alt="Avatar" class="avatar-img rounded">
              </div>
            </div>
            <div class="flex d-flex flex-column">
              <h5 class="card-title m-0"><a href="" class="headings-color">{{ item.title }}</a></h5>
              <small class="text-50">{{ item.views }} views this week</small>
            </div>
          </div>
          {% endfor %}

        </div>
      </div>

    </div>
  </div>

  <div class="page-separator">
    <div class="page-separator__text">Popular</div>
  </div>

  {% set posts = [{
    avatar: "assets/images/stories/256_rsz_clem-onojeghuo-193397-unsplash.jpg",
    title: "Cheap Romantic Vacations",
    views: 35,
    tag: "future",
    date: "11 Nov, 2018 07:46 AM",
    avatarGroup: true,
    avatarCount: 3,
    avatars: [
      "assets/images/256_rsz_1andy-lee-642320-unsplash.jpg",
      "assets/images/256_michael-dam-258165-unsplash.jpg",
      "assets/images/256_luke-porter-261779-unsplash.jpg"
    ]
  }, {
    avatar: "assets/images/stories/256_rsz_dex-ezekiel-761373-unsplash.jpg",
    title: "Copper Canyon",
    views: 78,
    tag: "future",
    date: "10 Nov, 2018 08:25 AM",
    avatarGroup: true,
    avatarCount: 2,
    avatars: [
      "assets/images/256_joao-silas-636453-unsplash.jpg",
      "assets/images/256_jeremy-banks-798787-unsplash.jpg",
      "assets/images/256_daniel-gaffey-1060698-unsplash.jpg"
    ]
  }, {
    avatar: "assets/images/stories/256_rsz_rhema-kallianpur-275251-unsplash.jpg",
    title: "Selecting The Right Hotel",
    views: 78,
    tag: "video",
    date: "09 Nov, 2018 07:13 PM",
    avatarGroup: true,
    avatarCount: 1,
    avatars: [
      "assets/images/256_rsz_1andy-lee-642320-unsplash.jpg",
      "assets/images/256_michael-dam-258165-unsplash.jpg",
      "assets/images/256_luke-porter-261779-unsplash.jpg"
    ]
  }] %}

  <div class="posts-cards mb-24pt">
    {% for item in posts %}
    <div class="card posts-card">
      <div class="posts-card__content d-flex align-items-center flex-wrap">
        <div class="avatar avatar-lg mr-3">
          <a href=""><img src="{{ item.avatar }}" alt="avatar" class="avatar-img rounded"></a>
        </div>
        <div class="posts-card__title flex d-flex flex-column">
          <h5 class="card-title m-0"><a href="" class="headings-color">{{ item.title }}</a></h5>
          <small class="text-50">{{ item.views }} views last week</small>
        </div>
        <div class="d-flex align-items-center flex-column flex-sm-row posts-card__meta">
          <div class="mr-3 text-50 text-uppercase posts-card__tag d-flex align-items-center">
            <i class="material-icons text-muted-light mr-1">folder_open</i> {{ item.tag }}
          </div>
          <div class="mr-3 text-50 posts-card__date">
            <small>{{ item.date }}</small>
          </div>
          <div class="media mr-2 ml-sm-auto align-items-center">
            <div class="media-left mr-2{% if item.avatarGroup %} avatar-group{% endif %}">
              {% for avatar in item.avatars %}
              <div class="avatar avatar-xs" data-toggle="tooltip" data-placement="top" title="Janell D.">
                <img src="{{ avatar }}" alt="Avatar" class="avatar-img rounded-circle">
              </div>
              {% endfor %}
            </div>
            <div class="media-body">
              {% if item.avatarCount > 1 %}
              <a href="">+{{ item.avatarCount-1 }} more</a>
              {% endif %}
            </div>
          </div>
        </div>
        <div class="dropdown ml-auto">
          <a href="#" data-toggle="dropdown" data-caret="false" class="text-muted"><i class="material-icons">more_vert</i></a>
          <div class="dropdown-menu dropdown-menu-right">
            <a href="javascript:void(0)" class="dropdown-item">Action</a>
            <a href="javascript:void(0)" class="dropdown-item">Other Action</a>
            <div class="dropdown-divider"></div>
            <a href="javascript:void(0)" class="dropdown-item">Some Other Action</a>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>

  <div class="card p-8pt mb-0 d-inline-block">
    {{ pager.pager() }}
  </div>

</div>