{% import 'components/avatar.html' as avatar %}
{% import 'components/category-overview-card.html' as category_overview_card %}
{% import 'components/shifts-table.html' as shifts_table %}

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

    <div class="row mb-lg-8pt">
      <div class="col-lg-8">
        
        <div class="page-separator">
          <div class="page-separator__text">Overview</div>
        </div>

        <div class="row">
          <div class="col-md-6">

            {{ category_overview_card.component(
              title='Employees',
              count=65,
              list=[{
                title: 'In-time',
                count: 60,
                percent: 91,
                class: 'bg-primary'
              }, {
                title: 'Late',
                count: 15,
                percent: 22,
                class: 'bg-accent'
              }, {
                title: 'Absents',
                count: 4,
                percent: 5,
                class: 'bg-warning'
              }, {
                title: 'Out on Vacation',
                count: 1,
                percent: 1.06,
                class: 'bg-warning'
              }],
              cta_label='View employees'
            ) }}

          </div>
          <div class="col-md-6">

            {{ category_overview_card.component(
              title='Departments',
              count=12,
              list=[{
                title: 'Human Resources',
                count: 2,
                percent: 7,
                class: 'bg-primary'
              }, {
                title: 'Entrepreneurship',
                count: 8,
                percent: 29,
                class: 'bg-primary'
              }, {
                title: 'Operations',
                count: 7,
                percent: 25,
                class: 'bg-primary'
              }, {
                title: 'Engineering',
                count: 10,
                percent: 37,
                class: 'bg-primary'
              }],
              cta_label='View departments'
            ) }}

          </div>
        </div>

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

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

        <div class="card">
          <div class="card-header">
            <div class="d-flex align-items-center">
              <div class="flex">
                <strong>Today</strong>
              </div>
              <i class="material-icons text-50">more_horiz</i>
            </div>
          </div>
          <div class="card-body">
            <div class="alert alert-soft-warning mb-0 p-8pt">
              <div class="d-flex align-items-start">
                <div class="mr-8pt">
                  <i class="material-icons">card_giftcard</i>
                </div>
                <div class="flex">
                  <small class="text-100">Take a minute and congratulate them on their special day!</small>
                </div>
              </div>
            </div>
          </div>

          {% set items = [
            {
              name: 'Gilbert Barrett',
              email: 'paolo.zieme@gmail.com',
              avatar: 'assets/images/256_rsz_1andy-lee-642320-unsplash.jpg'
            },
            {
              name: 'Noah Allen',
              email: 'shanny.sawayn@yahoo.com',
              avatar: 'assets/images/256_michael-dam-258165-unsplash.jpg'
            }
          ] %}

          <div class="list-group list-group-flush border-top">
            {% 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>

    <div class="row mb-lg-8pt">
      <div class="col-lg-8">
        
        <div class="page-separator">
          <div class="page-separator__text">Attendance</div>
        </div>

        <div class="card">
          <div class="card-body p-24pt">
            <div class="row">
              <div class="col-6">
                <div class="chart" style="height: 262px;">
                  <div class="text-center fullbleed d-flex align-items-center justify-content-center flex-column z-0">
                    <h2 class="m-0">25%</h2>
                    <strong>In-time</strong>
                  </div>
                  <canvas 
                    class="chart-canvas position-relative z-1" 
                    id="attendanceDoughnutChart" 
                    data-chart-legend="#attendanceDoughnutChartLegend"
                    data-chart-line-background-color="primary;teal;gray.700;gray">
                    <span style="font-size: 1rem;" class="text-muted"><strong>Attendance</strong> doughnut chart goes here.</span>
                  </canvas>
                </div>
              </div>
              <div class="col-6">
                <div class="nav border-0">
                  <div class="row no-gutters flex" role="tablist">
                    <div class="col-auto">
                      <div class="d-flex align-items-center">
                        <div class="h2 mb-0 mr-3">17</div>
                        <div class="flex">
                          <p class="mb-0"><strong>Leave requests</strong></p>
                          <p class="text-50 mb-0 lh-1">
                            <small>Last 30 days</small>
                          </p>
                        </div>
                      </div>
                    </div>
                    <div class="col-auto ml-sm-auto">
                      <a href="#"><i class="material-icons text-50">more_horiz</i></a>
                    </div>
                  </div>
                </div>
                <div id="attendanceDoughnutChartLegend" class="chart-legend chart-legend--vertical mt-24pt"></div>
              </div>
            </div>
          </div>
        </div>

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

        <div class="page-separator">
          <div class="page-separator__text">Self service</div>
        </div>

        <div class="card">
          <div class="card-header">
            <div class="d-flex align-items-center">
              <div class="flex">
                <strong>Attendance</strong>
              </div>
              <i class="material-icons text-50">more_horiz</i>
            </div>
          </div>
          <div class="card-body d-flex flex-column align-items-center justify-content-center p-24pt">
            <div class="mb-24pt d-inline-flex flex-column text-center">
              <i class="material-icons text-50 icon-32pt">access_time</i>
              <div class="d-flex align-items-center">
                <h2 class="m-0">08:58:05</h2>
                <strong class="text-50 ml-8pt">am</strong>
              </div>
            </div>
            <div class="d-inline-flex">
              <div>
                <a href="" class="btn btn-accent mb-16pt">Checkin</a>
                <p class="text-70 m-0"><strong>Time</strong></p>
                <div class="lh-1"><small class="text-50">08:30 am</small></div>
              </div>
              <div class="ml-16pt">
                <a href="" class="btn btn-secondary disabled mb-16pt">Checkout</a>
                <p class="text-70 m-0"><strong>Duration</strong></p>
                <div class="lh-1"><small class="text-50">00:28:05</small></div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>

    <div class="page-separator">
      <div class="page-separator__text">Shift distribution</div>
    </div>

    <div class="card mb-0">
      {{ shifts_table.component(items=[{
        avatar: { title: 'BN' },
        name: 'Billy Nunez',
        monday: {
          title: 'Night', 
          time: '20:00 - 08:00'
        },
        tuesday: {
          title: 'Night', 
          time: '20:00 - 08:00'
        },
        friday: {
          title: 'Day', 
          time: '07:30 - 20:00'
        },
        saturday: {
          title: 'Day', 
          time: '07:30 - 20:00'
        },
        sunday: {
          title: 'Day', 
          time: '07:30 - 20:00'
        }
      }, {
        avatar: { title: 'TP' },
        name: 'Tony Parks',
        wednesday: {
          title: 'Night', 
          time: '20:00 - 08:00'
        },
        thursday: {
          title: 'Night', 
          time: '20:00 - 08:00'
        }
      }, {
        selected: true,
        avatar: { image: 'assets/images/people/110/guy-1.jpg' },
        name: 'Gilbert Barrett',
        monday: {
          title: 'Day', 
          time: '07:30 - 20:00'
        },
        tuesday: {
          title: 'Day', 
          time: '07:30 - 20:00'
        },
        friday: {
          title: 'Night', 
          time: '20:00 - 08:00'
        },
        saturday: {
          title: 'Night', 
          time: '20:00 - 08:00'
        },
        sunday: {
          title: 'Night', 
          time: '20:00 - 08:00'
        }
      }, {
        avatar: { image: 'assets/images/people/110/guy-2.jpg' },
        name: 'Ollie Wallace',
        wednesday: {
          title: 'Day', 
          time: '07:30 - 20:00'
        },
        thursday: {
          title: 'Day', 
          time: '07:30 - 20:00'
        }
      }]) }}
    </div>

  </div>
</div>