{% import 'components/panel.html' as panel %}
{% import 'components/samples/tables.html' as samples %}
{% import "components/sort-table.html" as sort_table %}
{% import 'components/staff-table.html' as staff_table %}
{% import 'components/employees-table.html' as employees_table %}
{% import 'components/shifts-table.html' as shifts_table %}
{% import 'components/leaves-table.html' as leaves_table %}
{% import 'components/contacts-table.html' as contacts_table %}
{% import 'components/projects-table.html' as projects_table %}

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

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

  <div class="card dashboard-area-tabs p-relative o-hidden mb-lg-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 class="card-title">Active</strong>
              <small class="card-subtitle 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 class="card-title">Archived</strong>
              <small class="card-subtitle 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="page-separator">
    <div class="page-separator__text">Clients</div>
  </div>

  <div class="card mb-lg-32pt">
    {{ contacts_table.component(id='clients', items=[{
      avatar: { title: 'BN' },
      name: 'Billy Nunez',
      email: 'annabell.kris@yahoo.com',
      phone: '239-721-3649',
      company: 'Frontend Matter Inc.',
      company_initials: 'FM',
      company_bg: 'bg-warning',
      location: 'Leuschkefurt',
      projects: 42,
      chips: ['User'],
      date: '19 February 2019'
    }, {
      avatar: { title: 'TP' },
      name: 'Tony Parks',
      email: 'vida_glover@gmail.com',
      phone: '169-769-4821',
      company: 'Huma Huma Inc.',
      company_initials: 'HH',
      company_bg: 'bg-accent',
      location: 'Mayerberg',
      chips: ['Admin'],
      date: '18 February 2019'
    }, {
      selected: true,
      avatar: { image: 'assets/images/people/110/guy-1.jpg' },
      name: 'Gilbert Barrett',
      phone: '462-060-7408',
      email: 'paolo.zieme@gmail.com',
      chips: ['Admin'],
      date: '17 February 2019'
    }, {
      selected: true,
      avatar: { image: 'assets/images/people/110/guy-2.jpg' },
      name: 'Ollie Wallace',
      phone: '285-626-6050',
      email: 'lorna_kirlin@nora.biz',
      chips: ['Manager'],
      date: '16 February 2019'
    }]) }}
  </div>

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

  <div class="card mb-lg-32pt">
    {{ employees_table.component(id="employees", items=[{
      avatar: { title: 'BN' },
      name: 'Billy Nunez',
      email: 'annabell.kris@yahoo.com',
      phone: '239-721-3649',
      meta: {
        icon: 'link',
        count: 2
      },
      department: 'Design',
      department_initials: 'Ds',
      department_bg: 'bg-light text-black-100',
      role: 'UX Designer',
      status: {
        title: 'Probation',
        indicator_bg: 'bg-warning'
      },
      type: 'Temporary',
      date: '19/02/2019'
    }, {
      avatar: { title: 'TP' },
      name: 'Tony Parks',
      email: 'vida_glover@gmail.com',
      phone: '169-769-4821',
      meta: {
        icon: 'comment',
        count: 1
      },
      department: 'Development',
      department_initials: 'Dv',
      department_bg: 'bg-light text-black-100',
      role: 'Senior Frontend Developer',
      status: {
        title: 'Active',
        indicator_bg: 'bg-primary'
      },
      type: 'On Contract',
      date: '18/02/2019'
    }, {
      selected: false,
      avatar: { image: 'assets/images/people/110/guy-1.jpg' },
      name: 'Gilbert Barrett',
      email: 'paolo.zieme@gmail.com',
      phone: '462-060-7408',
      meta: {
        icon: 'comment',
        count: 1
      },
      department: 'Customer Relationship',
      department_initials: 'CR',
      department_bg: 'bg-light text-black-100',
      role: 'CRM Manager',
      status: {
        title: 'Active',
        indicator_bg: 'bg-primary'
      },
      type: 'On Contract',
      date: '17/02/2019'
    }, {
      selected: false,
      avatar: { image: 'assets/images/people/110/guy-2.jpg' },
      name: 'Ollie Wallace',
      phone: '285-626-6050',
      email: 'lorna_kirlin@nora.biz',
      department: 'HR',
      department_initials: 'HR',
      department_bg: 'bg-light text-black-100',
      role: 'HR Manager',
      status: {
        title: 'Active',
        indicator_bg: 'bg-primary'
      },
      type: 'Full Time',
      date: '16/02/2019'
    }, {
      selected: true,
      avatar: { image: 'assets/images/people/110/guy-3.jpg' },
      name: 'Ricardo Bell',
      phone: '285-626-6050',
      email: 'smith_winfield@douglas.io',
      department: 'Design',
      department_initials: 'Ds',
      department_bg: 'bg-light text-black-100',
      role: 'UX Designer',
      status: {
        title: 'Terminated',
        indicator_bg: 'bg-danger'
      },
      type: 'Temporary',
      date: '01/12/2018'
    }]) }}
  </div>

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

  <div class="card mb-lg-32pt">
    {{ 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 class="page-separator">
    <div class="page-separator__text">Leave requests</div>
  </div>

  <div class="card mb-lg-32pt">
    {{ leaves_table.component(items=[{
      avatar: { title: 'BN' },
      name: 'Billy Nunez',
      email: 'annabell.kris@yahoo.com',
      status: {
        title: 'Pending',
        indicator_bg: 'bg-warning'
      },
      policy: 'Anual Leave',
      reason: 'Family Vacation',
      days: '15 days',
      available: '22 days',
      from: '19/02/2019',
      to: '19/02/2019'
    }, {
      avatar: { title: 'TP' },
      name: 'Tony Parks',
      email: 'vida_glover@gmail.com',
      status: {
        title: 'Approved',
        indicator_bg: 'bg-primary'
      },
      policy: 'Anual Leave',
      days: '7 days',
      available: '15 days',
      from: '18/02/2019',
      to: '18/02/2019'
    }, {
      selected: false,
      avatar: { image: 'assets/images/people/110/guy-1.jpg' },
      name: 'Gilbert Barrett',
      email: 'paolo.zieme@gmail.com',
      status: {
        title: 'Approved',
        indicator_bg: 'bg-primary'
      },
      policy: 'Anual Leave',
      days: '7 days',
      available: '22 days',
      from: '17/02/2019',
      to: '17/02/2019'
    }, {
      selected: false,
      avatar: { image: 'assets/images/people/110/guy-2.jpg' },
      name: 'Ollie Wallace',
      email: 'lorna_kirlin@nora.biz',
      status: {
        title: 'Approved',
        indicator_bg: 'bg-primary'
      },
      policy: 'Anual Leave',
      days: '15 days',
      available: '15 days',
      from: '16/02/2019',
      to: '16/02/2019'
    }, {
      selected: true,
      avatar: { image: 'assets/images/people/110/guy-3.jpg' },
      name: 'Ricardo Bell',
      email: 'smith_winfield@douglas.io',
      status: {
        title: 'Rejected',
        indicator_bg: 'bg-danger'
      },
      policy: 'Anual Leave',
      days: '15 days',
      available: '7 days',
      from: '01/12/2018',
      to: '01/12/2018'
    }]) }}
  </div>

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

  <div class="card mb-lg-32pt">
    {{ staff_table.component(id="users", filters=false, items=[{
      selected: true,
      avatar: { image: 'assets/images/people/110/guy-1.jpg' },
      name: 'Michael Smith',
      employer: 'Black Ops',
      projects: 12,
      chips: ['Admin'],
      date: '3 days ago',
      earnings: '$12,402'
    }, {
      avatar: { title: 'CS' },
      name: 'Connie Smith',
      employer: 'Backend Ltd',
      projects: 42,
      chips: ['User'],
      date: '1 week ago',
      earnings: '$1,943'
    }, {
      avatar: { image: 'assets/images/people/110/guy-2.jpg' },
      name: 'John Connor',
      employer: 'Frontted',
      projects: 31,
      chips: ['Manager'],
      date: '2 weeks ago',
      earnings: '$1,401'
    }, {
      selected: true,
      avatar: { title: 'LB' },
      name: 'Laza Bogdan',
      employer: 'Frontted',
      projects: 44,
      chips: ['Admin'],
      date: '3 weeks ago',
      earnings: '$22,402'
    }]) }}
  </div>

  {% call panel.component(title='Toggle Checkboxes', description='A tiny plugin which adds the ability to toggle all checkboxes within a table.') %}
    <div class="card m-0">
      {{ staff_table.component(id='toggle', employer=false, projects=false, pagination=false, items=[{
        selected: true,
        avatar: { image: 'assets/images/people/110/guy-1.jpg' },
        name: 'Michael Smith',
        email: 'lorna_kirlin@nora.biz',
        employer: 'Black Ops',
        projects: 12,
        chips: ['Admin'],
        date: '3 days ago',
        earnings: '$12,402'
      }, {
        avatar: { title: 'CS' },
        name: 'Connie Smith',
        email: 'paolo.zieme@gmail.com',
        employer: 'Backend Ltd',
        projects: 42,
        chips: ['User'],
        date: '1 week ago',
        earnings: '$1,943'
      }, {
        avatar: { image: 'assets/images/people/110/guy-2.jpg' },
        name: 'John Connor',
        email: 'vida_glover@gmail.com',
        employer: 'Frontted',
        projects: 31,
        chips: ['Manager'],
        date: '2 weeks ago',
        earnings: '$1,401'
      }, {
        selected: true,
        avatar: { title: 'LB' },
        name: 'Laza Bogdan',
        email: 'annabell.kris@yahoo.com',
        employer: 'Frontted',
        projects: 44,
        chips: ['Admin'],
        date: '3 weeks ago',
        earnings: '$22,402'
      }]) }}
    </div>
  {% endcall %}

  {% call panel.component(title='Search', description='Add search functionality to your tables with List.js. Please read the <a href="http://listjs.com/" target="_blank">official plugin documentation</a> for a full list of options.') %}
    <div class="card m-0">
      {{ staff_table.component(
        id="search",
        checkboxes=false, 
        avatar=false, 
        employer=false, 
        projects=false, 
        pagination=false, 
        search=true, items=[{
          selected: true,
          avatar: { image: 'assets/images/people/110/guy-1.jpg' },
          name: 'Michael Smith',
          email: 'lorna_kirlin@nora.biz',
          employer: 'Black Ops',
          projects: 12,
          chips: ['Admin'],
          date: '3 days ago',
          earnings: '$12,402'
        }, {
          avatar: { title: 'CS' },
          name: 'Connie Smith',
          email: 'paolo.zieme@gmail.com',
          employer: 'Backend Ltd',
          projects: 42,
          chips: ['User'],
          date: '1 week ago',
          earnings: '$1,943'
        }, {
          avatar: { image: 'assets/images/people/110/guy-2.jpg' },
          name: 'John Connor',
          email: 'vida_glover@gmail.com',
          employer: 'Frontted',
          projects: 31,
          chips: ['Manager'],
          date: '2 weeks ago',
          earnings: '$1,401'
        }, {
          selected: true,
          avatar: { title: 'LB' },
          name: 'Laza Bogdan',
          email: 'annabell.kris@yahoo.com',
          employer: 'Frontted',
          projects: 44,
          chips: ['Admin'],
          date: '3 weeks ago',
          earnings: '$22,402'
        }]) }}
    </div>
  {% endcall %}

  {% call panel.component(title='Sort Columns', description='Add sorting functionality to your tables with by List.js. Please read the <a href="http://listjs.com/" target="_blank">official plugin documentation</a> for a full list of options.') %}
    <div class="card m-0">
      {{ sort_table.component() }}
    </div>
  {% endcall %}
</div>