{% import 'components/pager.html' as pager %}
{% import 'components/tasks-table.html' as tasks_table %}

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

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

    <div class="card mb-lg-32pt">
      <div class="card-header py-12pt d-flex align-items-center">
        <strong>Open</strong>
        <a href="#" class="d-inline-block mx-16pt"><i class="material-icons text-50">more_horiz</i></a>
        <div class="text-50">4</div>
        <div class="flex"></div>
        <a href="#"><i class="material-icons text-20">keyboard_arrow_up</i></a>
      </div>
      <div class="progress rounded-0" style="height: 4px;">
        <div class="progress-bar bg-accent" role="progressbar" style="width: 14%;" aria-valuenow="14" aria-valuemin="0" aria-valuemax="100"></div>
      </div>

      {{ tasks_table.component(items=[{
        title: "Add Fluid Layout Featuring A Vertical Menu With Icons Only",
        date: "02/01/20",
        attachments: 2,
        avatars: [
          "assets/images/256_luke-porter-261779-unsplash.jpg",
          "assets/images/256_michael-dam-258165-unsplash.jpg",
          "assets/images/256_rsz_1andy-lee-642320-unsplash.jpg"
        ],
        indicators: [
          "bg-primary",
          "bg-accent"
        ],
        selected: true
      },
      {
        title: "Add Initial Documentation Covering Basic Features",
        date: "03/01/20",
        avatars: [
          "assets/images/256_michael-dam-258165-unsplash.jpg",
          "assets/images/256_luke-porter-261779-unsplash.jpg"
        ],
        indicators: [
          "bg-warning"
        ]
      },
      {
        title: "Refactor HTML Markup To Be More SEO Friendly",
        date: "03/01/20",
        comments: 1,
        avatars_titles: [
          "LB",
          "AD"
        ],
        indicators: [
          "bg-primary"
        ]
      },
      {
        title: "Add Layout Options",
        date: "04/01/20",
        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"
        ],
        indicators: [
          "bg-accent"
        ],
        avatar: {
          image: "assets/images/stories/256_rsz_jared-rice-388260-unsplash.jpg"
        }
      }]) }}
    </div>

    <div class="card mb-lg-32pt">
      <div class="card-header py-12pt d-flex align-items-center">
        <strong>In Progress</strong>
        <a href="#" class="d-inline-block mx-16pt"><i class="material-icons text-50">more_horiz</i></a>
        <div class="text-50">10</div>
        <div class="flex"></div>
        <a href="#"><i class="material-icons text-20">keyboard_arrow_up</i></a>
      </div>
      <div class="progress rounded-0" style="height: 4px;">
        <div class="progress-bar bg-primary" role="progressbar" style="width: 35%;" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
      </div>

      {{ tasks_table.component(id="tasks2", items=[{
        title: "Add Initial Documentation Covering Basic Features",
        date: "02/01/20",
        avatars: [
          "assets/images/256_michael-dam-258165-unsplash.jpg",
          "assets/images/256_luke-porter-261779-unsplash.jpg"
        ],
        indicators: [
          "bg-primary"
        ]
      },
      {
        title: "Add Fluid Layout Featuring A Vertical Menu",
        date: "03/01/20",
        attachments: 2,
        avatars: [
          "assets/images/256_luke-porter-261779-unsplash.jpg",
          "assets/images/256_michael-dam-258165-unsplash.jpg",
          "assets/images/256_rsz_1andy-lee-642320-unsplash.jpg"
        ],
        indicators: [
          "bg-primary",
          "bg-accent"
        ]
      },
      {
        title: "Add Layout Options",
        date: "03/01/20",
        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"
        ],
        indicators: [
          "bg-primary"
        ],
        avatar: {
          image: "assets/images/stories/256_rsz_dex-ezekiel-761373-unsplash.jpg"
        }
      }]) }}
    </div>

    <div class="card mb-0 p-relative o-hidden">
      <div class="card-header py-12pt d-flex align-items-center">
        <strong>Closed</strong>
        <a href="#" class="d-inline-block mx-16pt"><i class="material-icons text-50">more_horiz</i></a>
        <div class="text-50">14</div>
        <div class="flex"></div>
        <a href="#"><i class="material-icons text-20">keyboard_arrow_down</i></a>
      </div>
      <div class="progress rounded-0" style="height: 4px;">
        <div class="progress-bar bg-warning" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
    </div>

  </div>
</div>