{% import 'components/projects-table.html' as projects_table %}
{% import 'components/pager.html' as pager %}

<div class="{{ containerClass or 'container' }}">
  <div class="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-4 card-group-row__col">

        <div class="card card-group-row__card">
          <div class="card-header d-flex">
            <div class="flex row">
              <div class="col-auto d-flex flex-column">
                <div class="h2 mb-0">14</div>
                <p class="mb-0"><strong>Projects</strong></p>
              </div>
              <div class="col-auto border-left d-flex flex-column">
                <div class="h2 mb-0">2</div>
                <p class="mb-0"><strong>Active</strong></p>
              </div>
            </div>
            <a href="#"><i class="material-icons text-50">more_horiz</i></a>
          </div>
          <div class="card-body d-flex flex-column justify-content-center">
            {% set list = [{
              title: 'Social Media API',
              meta: 'due in 12 days',
              class: 'bg-warning',
              percent: 20
            }, {
              title: 'Advertising Platform',
              meta: 'due in 30 days',
              class: 'bg-accent',
              percent: 100
            }] %}

            {% for item in list %}
            <div{% if not loop.last %} class="mb-8pt"{% endif %}>
              <p class="d-flex align-items-center mb-4pt">
                <small class="flex lh-24pt"><strong>{{ item.title }}</strong></small>
                <small class="text-50 lh-24pt">{{ item.meta }}</small>
              </p>
              <div class="progress" style="height: 4px;">
                <div class="progress-bar {{ item.class }}" role="progressbar" style="width: {{ item.percent }}%;" aria-valuenow="{{ item.percent }}" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
            {% endfor %}
          </div>
        </div>

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

        <div class="card card-group-row__card">
          <div class="card-header d-flex">
            <div class="flex d-flex align-items-center">
              <div class="h2 mb-0 mr-3">2</div>
              <div class="d-flex flex-column">
                <p class="mb-0"><strong>Team Members</strong></p>
                <small class="text-50">Joined this week</small>
              </div>
            </div>
            <i class="material-icons text-50">more_horiz</i>
          </div>

          {% set items = [
            {
              name: 'Gilbert Barrett',
              email: 'HR Manager',
              avatar: 'assets/images/256_rsz_1andy-lee-642320-unsplash.jpg'
            },
            {
              name: 'Noah Allen',
              email: 'iOS Developer',
              avatar: 'assets/images/256_michael-dam-258165-unsplash.jpg'
            }
          ] %}

          <div class="list-group list-group-flush">
            {% for item in items %}
            <div class="list-group-item p-16pt">
              <div class="d-flex align-items-center" style="white-space: nowrap;">
                {{ avatar.component(image=item.avatar, size='32pt', class='mr-8pt') }}
                <div class="flex ml-4pt">
                  <div class="d-flex flex-column">
                    <p class="mb-0"><strong>{{ item.name }}</strong></p>
                    <small class="text-50">{{ item.email }}</small>
                  </div>
                </div>
                <a href=""><i class="material-icons text-20 icon-16pt">email</i></a>
              </div>
            </div>
            {% endfor %}
          </div>
        </div>

      </div>

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

        <div class="card card-group-row__card">
          <div class="card-header p-0 nav border-0">
            <div class="row no-gutters flex" role="tablist">
              <div class="col-auto">
                <div class="p-card-header pr-0">
                  <div class="border-right pr-16pt">
                    <div class="h2 mb-0">&dollar;25k</div>
                    <div class="d-flex flex-column">
                      <p class="mb-0"><strong>Earnings</strong></p>
                      <small class="text-50">This billing cycle</small>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-auto flex">
                <div class="p-card-header d-flex flex-column align-items-end">
                  <a href="#"><i class="material-icons text-50">more_horiz</i></a>
                  <div class="flex d-flex align-items-center align-self-start">
                    <div class="position-relative mr-16pt">
                      <div class="text-center fullbleed d-flex align-items-center justify-content-center flex-column z-0">
                        <small>42%</small>
                      </div>
                      <canvas 
                        width="48" 
                        height="48" 
                        class="chart-canvas position-relative z-1 js-update-chart-progress-accent" 
                        id="invoicesProgressChart"
                        data-chart-line-background-color="teal;gray"
                        data-chart-disable-tooltips="true"></canvas>
                    </div>
                    <small class="text-50">4 of 12 invoices</small>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="card-body position-relative o-hidden p-0">
            <div class="chart z-0" style="height: 98px;">
              <canvas 
                id="earningsChart"
                class="chart-canvas js-update-chart-line js-update-chart-line-2nd-accent"
                data-chart-line-border-color="primary,teal"
                data-chart-hide-axes="true"></canvas>
            </div>
          </div>
        </div>

      </div>
    </div>

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

    <div class="card dashboard-area-tabs mb-32pt">
      <div class="card-header p-0 nav">
        <div class="row no-gutters" role="tablist">
          <div class="col-auto">
            <a 
              href="#" 
              data-toggle="tab" 
              role="tab" 
              aria-selected="true" 
              class="dashboard-area-tabs__tab card-body d-flex flex-row align-items-center justify-content-start active">
              <span class="h2 mb-0 mr-3">3</span>
              <span class="flex d-flex flex-column">
                <strong>Active</strong>
                <small class="text-50">Ongoing Projects</small>
              </span>
            </a>
          </div>
          <div class="col-auto border-left border-right">
            <a 
              href="#" 
              data-toggle="tab" 
              role="tab" 
              aria-selected="false" 
              class="dashboard-area-tabs__tab card-body d-flex flex-row align-items-center justify-content-start">
              <span class="h2 mb-0 mr-3">2</span>
              <span class="flex d-flex flex-column">
                <strong>Archived</strong>
                <small class="text-50">Past Projects</small>
              </span>
            </a>
          </div>
        </div>
      </div>
      {{ projects_table.component(items=[{
        avatar: { title: 'BN' },
        name: 'Billy Nunez',
        email: 'Quality Assurance',
        department: 'Social Media API',
        department_initials: 'SM',
        department_bg: 'bg-primary text-white',
        role: 'Twitter',
        status: {
          title: 'QA',
          indicator_bg: 'bg-warning'
        },
        budget: {
          amount: '1,200',
          status: 'Invoice Sent'
        },
        date: '19/02/2019',
        date_status: '18 days'
      }, {
        avatar: { title: 'TP' },
        name: 'Tony Parks',
        email: 'iOS Development',
        department: 'Project Management App',
        department_initials: 'PM',
        department_bg: 'bg-accent text-white',
        role: 'Github',
        status: {
          title: 'Finished',
          indicator_bg: 'bg-accent'
        },
        budget: {
          amount: '12,500',
          status: 'Paid'
        },
        date: '18/02/2019',
        date_status: 'Overdue',
        date_status_class: 'text-danger'
      }, {
        selected: false,
        avatar: { image: 'assets/images/people/110/guy-1.jpg' },
        name: 'Gilbert Barrett',
        email: 'Marketing',
        department: 'Advertising Platform',
        department_initials: 'AD',
        department_bg: 'bg-warning text-white',
        role: 'Facebook',
        status: {
          title: 'Finished',
          indicator_bg: 'bg-accent'
        },
        budget: {
          amount: '7,100',
          status: 'Paid'
        },
        date: '17/02/2019',
        date_status: '15 days'
      }, {
        selected: false,
        avatar: { image: 'assets/images/people/110/guy-2.jpg' },
        name: 'Ollie Wallace',
        email: 'Design',
        department: 'Frontend Development',
        department_initials: 'FD',
        department_bg: 'bg-light text-black-100',
        role: 'Trello',
        status: {
          title: 'Designing',
          indicator_bg: 'bg-primary'
        },
        budget: {
          amount: '4,200',
          status: 'Paid'
        },
        date: '16/02/2019',
        date_status: '15 days'
      }, {
        selected: true,
        avatar: { image: 'assets/images/people/110/guy-3.jpg' },
        name: 'Ricardo Bell',
        email: 'Web Development',
        department: 'Database Upgrade',
        department_initials: 'DU',
        department_bg: 'bg-light text-black-100',
        role: 'MySQL',
        status: {
          title: 'Waiting',
          indicator_bg: 'bg-danger'
        },
        budget: {
          amount: '130',
          status: 'Overdue',
          status_class: 'text-danger'
        },
        date: '01/12/2018',
        date_status: '1 day'
      }]) }}
    </div>

    <div class="row">
      <div class="col-lg-8">

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

        <div class="card mb-lg-0">
          <div class="card-header d-flex align-items-center">
            <strong class="flex">Checklist</strong>
            <div><a href="#" data-target="#todo" class="js-toggle-check-all">Mark All as Completed</a></div>
          </div>
          <div class="progress rounded-0" style="height: 4px;">
            <div class="progress-bar bg-primary" role="progressbar" style="width: 40%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <div class="card-body">
            <ul class="list-unstyled list-todo" id="todo">
              <li>
                <div class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" id="customCheck1">
                  <label class="custom-control-label" for="customCheck1">Add Fluid Layout Featuring A Vertical Menu With Icons Only</label>
                </div>
              </li>
              <li>
                <div class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" id="customCheck2">
                  <label class="custom-control-label" for="customCheck2">Refactor HTML Markup To Be More SEO Friendly</label>
                </div>
              </li>
              <li>
                <div class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" id="customCheck4">
                  <label class="custom-control-label" for="customCheck4">Design A New Page In Sketch</label>
                </div>
              </li>
              <li>
                <div class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" checked="" id="customCheck5">
                  <label class="custom-control-label" for="customCheck5">Quote the custom work</label>
                </div>
              </li>
              <li>
                <div class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" checked="" id="customCheck6">
                  <label class="custom-control-label" for="customCheck6">Interview John for Full-Stack Developer</label>
                </div>
              </li>
              <li>
                <div class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" checked="" id="customCheck7">
                  <label class="custom-control-label" for="customCheck7">Research the success of CRM</label>
                </div>
              </li>
            </ul>
          </div>
          <div class="card-footer p-8pt">
            {{ pager.pager() }}
          </div>
        </div>

      </div>
      <div class="col-lg-4">

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

        {% set tasks = [
          {
            title: "Add Fluid Layout Featuring A Vertical Menu With Icons Only",
            date: "Today",
            attachments: true,
            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: "Tomorrow",
            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"
            ],
            image: "assets/images/stories/256_rsz_jared-rice-388260-unsplash.jpg"
          }
        ] %}

        <div class="card mb-lg-0">
          <div class="card-header d-flex align-items-center">
            <strong class="flex">Tasks</strong>
            <div><a href="#">View all</a></div>
          </div>
          <div class="progress rounded-0" style="height: 4px;">
            <div class="progress-bar bg-accent" role="progressbar" style="width: 40%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <div class="list-group list-group-flush">

            {% for item in tasks %}
            <div class="list-group-item p-16pt">

              {% if item.image %}
              <a href="" class="d-block mb-16pt"><img src="{{ item.image }}" alt="" style="height: 64px;" class="card-img card-img-cover"></a>
              {% endif %}

              <div class="d-flex">
                <div class="d-flex flex-column flex">
                  <a href="#" class="mb-8pt"><strong>{{ item.title }}</strong></a>
                  <div class="d-flex align-items-center mb-8pt">
                    {% for indicator in item.indicators %}
                    <a href="" class="mr-4pt"><span class="indicator-line rounded {{ indicator }}"></span></a>
                    {% endfor %}
                  </div>
                </div>
                <a href="#"><i class="material-icons text-50">more_horiz</i></a>
              </div>
              <div class="d-flex align-items-center">
                <div class="flex d-flex align-items-center">
                  <small class="text-50 mr-16pt">{{ item.date }}</small>

                  {% if item.attachments %}
                  <i class="material-icons icon-16pt text-20 mr-4pt">link</i>
                  <small class="text-50">2</small>
                  {% endif %}
                </div>
                <div class="d-flex align-items-center">
                  <div class="avatar-group flex mr-8pt">
                    {% for avatar in item.avatars %}
                    <div class="avatar avatar-xs" data-toggle="tooltip" data-placement="top" title="Janell D.">
                      <a href=""><img src="{{ avatar }}" alt="Avatar" class="avatar-img rounded-circle"></a>
                    </div>
                    {% endfor %}
                  </div>
                  <a style="text-decoration: none;" class="rounded-circle d-flex align-items-center border align-items-center text-50" href=""><i class="material-icons icon-16pt m-1">add</i></a>
                </div>
              </div>              
            </div>
            {% endfor %}

          </div>
        </div>

      </div>
    </div>

  </div>
</div>