{% set active_page = "Project" -%}

{% extends "layouts/" + layout + ".html" %}

{% block styles %}
<style>
  /* Page specific rules */
  .portal-widget__heading {
    margin-bottom: 16px;
  }
  .portal-widget__heading--tall {
    margin-top: 36px;
  }
  .portal-table-widget {
    overflow: auto;
  }
  .mdc-list.mdc-list--avatar-list {
    padding: 0;
  }
  table.mdl-data-table th {
    padding-top: 16px;
    padding-bottom: 16px;
    vertical-align: middle;
  }
  .mdl-data-table td:first-of-type, .mdl-data-table th:first-of-type {
    text-align: center;
    width: 60px;
  }
  .portal-display-streched {
    display: flex;
    align-items: flex-end;
    justify-content: stretch;
  }
  .portal-display-streched .portal-widget__canvas {
    width: 100%;
  }
</style>
{% endblock %}

{% block content %}
  <div class="mdc-layout-grid portal-dashboard">
    <div class="mdc-layout-grid__inner">
      <div class="portal-widget mdc-layout-grid__cell--span-9-desktop mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone">
        <p class="portal-widget__heading mdc-typography--subheading2">Project Status</p>
        <div class="portal-widget__card portal-widget__card--rounded portal-display-flex__flexed">
          <div class="portal-project-stepper">
            <div role="progressbar" class="portal-project-stepper__progress">
              <div class="portal-project-stepper__progress-bar" style="width: 80%;"></div>
            </div>
            <div class="portal-project-stepper__step portal-project-stepper__step--done">
              <h3 class="portal-project-stepper__step__heading portal-text-medium">
                Phase 01
              </h3>
              <p class="portal-project-stepper__step__content mdc-typography--body1">
                In this phase initial research will be required. Also the framework and the assets to be used have to be decided.
              </p>
            </div>
            <div class="portal-project-stepper__step portal-project-stepper__step--done">
              <h3 class="portal-project-stepper__step__heading portal-text-medium">
                Phase 02
              </h3>
              <p class="portal-project-stepper__step__content mdc-typography--body1">
                In this phase the design process will take place. All components will be created as HTML and CSS working prototypes.
              </p>
            </div>
            <div class="portal-project-stepper__step">
              <h3 class="portal-project-stepper__step__heading portal-text-medium">
                Phase 03
              </h3>
              <p class="portal-project-stepper__step__content mdc-typography--body1">
                In the final stage the prototype will be tested on various devices including desktop computer and mobile devices.
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="portal-widget mdc-layout-grid__cell--span-3-desktop mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone">
        <p class="portal-widget__heading mdc-typography--subheading2">Weekly Issues</p>
        <div class="portal-widget__card portal-widget__card--rounded portal-display-flex__flexed portal-display-streched">
          <div class="portal-widget__canvas">
            <canvas id="weeklyIssuesChart"></canvas>
          </div>
        </div>
      </div>
    </div>
    <div class="mdc-layout-grid__inner">
      <div class="mdc-layout-grid__cell--span-7-desktop mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone">
        <div class="portal-widget">
          <p class="portal-widget__heading mdc-typography--subheading2 portal-widget__heading--tall">Issues Status</p>
          <div class="mdc-card portal-widget__card portal-widget__card--rounded">
            <div class="portal-widget__card-content portal-widget__card-content--extra portal-display-flex">
              <div class="portal-display-flex__flexed">
                <h2 class="mdc-typography--subheading2 portal-margin-none portal-text-medium">
                  Monthly View
                </h2>
                <h4 class="mdc-typography--caption portal-margin-none">
                  June 2018 - July 2018
                </h4>
              </div>
              <div id="table-widget-menu-button" class="mdc-menu-anchor mdc-icon-toggle material-icons portal-widget__menu-icon" aria-label="Issues/Project">
                more_vert
                <div class="mdc-menu" id="table-widget-menu">
                  <div class="mdc-menu__items mdc-list" role="menu" aria-hidden="true">
                    <a href="dashboard-commerce.html" class="mdc-list-item" role="menuitem">Month</a>
                    <a href="dashboard-commerce.html" class="mdc-list-item" role="menuitem">Week</a>
                    <a href="dashboard-commerce.html" class="mdc-list-item" role="menuitem">Day</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="portal-widget__canvas">
              <canvas id="issuesStatusChart" style="height: 350px;"></canvas>
            </div>
          </div>
        </div>
        <div class="portal-widget">
          <p class="portal-widget__heading mdc-typography--subheading2 portal-widget__heading--tall">Backlog</p>
          <div class="mdc-card portal-widget__card portal-widget__card--rounded mdc-card--portal-fullheight mdc-card--portal-space-between">
            <div class="portal-table-widget">
              <table class="mdl-data-table">
                <thead>
                  <tr>
                    <th>
                      <div class="mdc-form-field">
                        <div class="mdc-checkbox">
                          <input type="checkbox"
                                  id="basic-checkbox"
                                  class="mdc-checkbox__native-control"/>
                          <div class="mdc-checkbox__background">
                            <svg class="mdc-checkbox__checkmark"
                                  viewBox="0 0 24 24">
                              <path class="mdc-checkbox__checkmark-path"
                                    fill="none"
                                    stroke="white"
                                    d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
                            </svg>
                            <div class="mdc-checkbox__mixedmark"></div>
                          </div>
                        </div>
                      </div>
                    </th>
                    <th class="mdl-data-table__cell--non-numeric">Issue name</th>
                    <th>Estimated time</th>
                    <th>Status</th>
                    <th>Priority</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>
                      <div class="mdc-form-field">
                        <div class="mdc-checkbox">
                          <input type="checkbox"
                                  id="basic-checkbox-2"
                                  class="mdc-checkbox__native-control"/>
                          <div class="mdc-checkbox__background">
                            <svg class="mdc-checkbox__checkmark"
                                  viewBox="0 0 24 24">
                              <path class="mdc-checkbox__checkmark-path"
                                    fill="none"
                                    stroke="white"
                                    d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
                            </svg>
                            <div class="mdc-checkbox__mixedmark"></div>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td class="mdl-data-table__cell--non-numeric">Styling the navigation</td>
                    <td>11h</td>
                    <td>Pending</td>
                    <td class="mdc-theme--secondary">High</td>
                  </tr>
                  <tr>
                    <td>
                      <div class="mdc-form-field">
                        <div class="mdc-checkbox">
                          <input type="checkbox"
                                  id="basic-checkbox-3"
                                  class="mdc-checkbox__native-control"/>
                          <div class="mdc-checkbox__background">
                            <svg class="mdc-checkbox__checkmark"
                                  viewBox="0 0 24 24">
                              <path class="mdc-checkbox__checkmark-path"
                                    fill="none"
                                    stroke="white"
                                    d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
                            </svg>
                            <div class="mdc-checkbox__mixedmark"></div>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td class="mdl-data-table__cell--non-numeric">JS lint</td>
                    <td>3h</td>
                    <td>Pending</td>
                    <td class="mdc-theme--primary">Low</td>
                  </tr>
                  <tr>
                    <td>
                      <div class="mdc-form-field">
                        <div class="mdc-checkbox">
                          <input type="checkbox"
                                  id="basic-checkbox-4"
                                  class="mdc-checkbox__native-control"/>
                          <div class="mdc-checkbox__background">
                            <svg class="mdc-checkbox__checkmark"
                                  viewBox="0 0 24 24">
                              <path class="mdc-checkbox__checkmark-path"
                                    fill="none"
                                    stroke="white"
                                    d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
                            </svg>
                            <div class="mdc-checkbox__mixedmark"></div>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td class="mdl-data-table__cell--non-numeric">HTML Validation</td>
                    <td>1d</td>
                    <td>Pending</td>
                    <td class="mdc-theme--primary">Low</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="portal-widget mdc-layout-grid__cell--span-5-desktop mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone">
        <p class="portal-widget__heading mdc-typography--subheading2 portal-widget__heading--tall">Tasks by User</p>
        <div class="mdc-card portal-widget__card portal-widget__card--rounded mdc-card--portal-fullheight mdc-card--portal-space-between">
          <div class="mdc-list mdc-list--two-line mdc-list--avatar-list">
            <div class="mdc-list-item mdc-list-item--selected">
              <img class="mdc-list-item__graphic" src="{{ base }}assets/images/male/4.jpg" width="56" height="56" alt="Developer">
              <span class="mdc-list-item__text">
                John Langan / Developer
                <span class="mdc-list-item__secondary-text">12 closed issues, 2 new</span>
              </span>
              <span class="mdc-list-item__meta portal-badge portal-badge--secondary">2</span>
            </div>
            <div class="mdc-list-item">
              <img class="mdc-list-item__graphic" src="{{ base }}assets/images/male/1.jpg" width="56" height="56" alt="Developer">
              <span class="mdc-list-item__text">
                George Harrison / Java Developer
                <span class="mdc-list-item__secondary-text">8 closed issues, 1 new</span>
              </span>
              <span class="mdc-list-item__meta portal-badge portal-badge--secondary">1</span>
            </div>
            <div class="mdc-list-item">
              <img class="mdc-list-item__graphic" src="{{ base }}assets/images/male/2.jpg" width="56" height="56" alt="Developer">
              <span class="mdc-list-item__text">
                Chris Jackson / Designer
                <span class="mdc-list-item__secondary-text">8 closed issues, 6 new</span>
              </span>
              <span class="mdc-list-item__meta portal-badge portal-badge--secondary">6</span>
            </div>
            <div class="mdc-list-item">
              <img class="mdc-list-item__graphic" src="{{ base }}assets/images/male/3.jpg" width="56" height="56" alt="Developer">
              <span class="mdc-list-item__text">
                Mary Smith / IOS Developer
                <span class="mdc-list-item__secondary-text">12 closed issues, 4 new</span>
              </span>
              <span class="mdc-list-item__meta portal-badge portal-badge--secondary">4</span>
            </div>
            <div class="mdc-list-item">
              <img class="mdc-list-item__graphic" src="{{ base }}assets/images/male/5.jpg" width="56" height="56" alt="Developer">
              <span class="mdc-list-item__text">
                Mandy Smith / Android Developer
                <span class="mdc-list-item__secondary-text">8 closed issues, 3 new</span>
              </span>
              <span class="mdc-list-item__meta portal-badge portal-badge--secondary">3</span>
            </div>
            <div class="mdc-list-item">
              <img class="mdc-list-item__graphic" src="{{ base }}assets/images/male/6.jpg" width="56" height="56" alt="Developer">
              <span class="mdc-list-item__text">
                Cate Anderson / Designer
                <span class="mdc-list-item__secondary-text">23 closed issues, 7 new</span>
              </span>
              <span class="mdc-list-item__meta portal-badge portal-badge--secondary">7</span>
            </div>
            <div class="mdc-list-item">
              <img class="mdc-list-item__graphic" src="{{ base }}assets/images/male/7.jpg" width="56" height="56" alt="Developer">
              <span class="mdc-list-item__text">
                Ann Johnson / CSS Developer
                <span class="mdc-list-item__secondary-text">2 closed issues, 2 new</span>
              </span>
              <span class="mdc-list-item__meta portal-badge portal-badge--secondary">2</span>
            </div>
            <div class="mdc-list-item">
              <img class="mdc-list-item__graphic" src="{{ base }}assets/images/male/9.jpg" width="56" height="56" alt="Developer">
              <span class="mdc-list-item__text">
                Arch Sporer / Full Stack
                <span class="mdc-list-item__secondary-text">5 closed issues, 4 new</span>
              </span>
              <span class="mdc-list-item__meta portal-badge portal-badge--secondary">4</span>
            </div>
            <div class="mdc-list-item">
              <img class="mdc-list-item__graphic" src="{{ base }}assets/images/male/13.jpg" width="56" height="56" alt="Brown Bear">
              <span class="mdc-list-item__text">
                Dr. Moises Beahan / Server Admin
                <span class="mdc-list-item__secondary-text">6 closed issues, 7 new</span>
              </span>
              <span class="mdc-list-item__meta portal-badge portal-badge--secondary">7</span>
            </div>
            <div class="mdc-list-item">
              <img class="mdc-list-item__graphic" src="{{ base }}assets/images/male/14.jpg" width="56" height="56" alt="Brown Bear">
              <span class="mdc-list-item__text">
                Berry Dooley / Senior Manager
                <span class="mdc-list-item__secondary-text">4 closed issues, 2 new</span>
              </span>
              <span class="mdc-list-item__meta portal-badge portal-badge--secondary">2</span>
            </div>
            <div class="mdc-list-item">
              <img class="mdc-list-item__graphic" src="{{ base }}assets/images/male/1.jpg" width="56" height="56" alt="Developer">
              <span class="mdc-list-item__text">
                George Harrison / Java Developer
                <span class="mdc-list-item__secondary-text">8 closed issues, 1 new</span>
              </span>
              <span class="mdc-list-item__meta portal-badge portal-badge--secondary">1</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block scripts %}
  <script>
    (function() {

      function setupDashboardCharts() {
        const weeklyIssuesCtx = document.getElementById('weeklyIssuesChart') ? document.getElementById('weeklyIssuesChart').getContext('2d') : '';
        const issuesStatusCtx = document.getElementById('issuesStatusChart') ? document.getElementById('issuesStatusChart').getContext('2d') : '';

        let primaryColor = window.getComputedStyle(document.documentElement).getPropertyValue('--mdc-theme-primary');
        let primaryDarkColor = ColorLuminance(primaryColor, -0.2);
        let primaryLightColor = ColorLuminance(primaryColor, 0.2);
        let secondaryColor = window.getComputedStyle(document.documentElement).getPropertyValue('--mdc-theme-secondary');
        let secondaryDarkColor = ColorLuminance(secondaryColor, -0.2);
        let secondaryLightColor = ColorLuminance(secondaryColor, 0.2);

        // Fallback for IE11, whereby getPropertyValue returns an empty string.
        primaryColor = '' === primaryColor ? '#03A9F4' : primaryColor;
        secondaryColor = '' === secondaryColor ? '#FF4081' : secondaryColor;

        const areaChartConfig = {
          type: 'line',
          data: {
            labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            datasets: [{
              label: 'Closed',
              data: randomData(10, 40, 7, false),
              backgroundColor: primaryDarkColor,
              borderColor: primaryColor,
              borderWidth: 2,
              pointBackgroundColor: primaryColor,
              pointBorderColor: '#fff',
              pointHoverBackgroundColor: secondaryDarkColor,
              pointHoverBorderColor: secondaryColor,
              lineTension: 0,
              pointBorderWidth: 1,
              pointRadius: 3,
              fill: 'start'
            }, {
              label: 'Open',
              data: randomData(50, 100, 7, false),
              backgroundColor: primaryColor,
              borderColor: primaryColor,
              borderWidth: 2,
              pointBackgroundColor: primaryDarkColor,
              pointBorderColor: '#fff',
              pointHoverBackgroundColor: secondaryDarkColor,
              pointHoverBorderColor: secondaryColor,
              lineTension: 0,
              pointBorderWidth: 1,
              pointRadius: 3,
              fill: 'start'
            }]
          },
          options: {
            legend: {
              display: true,
              position: 'top',
              labels: {
                boxWidth: 12
              }
            },
            tooltips: {
              enabled: true,
              xPadding: 5,
              yPadding: 5,
              displayColors: false,
              backgroundColor: primaryColor
            },
            scales: {
              xAxes: [{
                display: false
              }],
              yAxes: [{
                display: false
              }]
            },
            responsive: true,
            maintainAspectRatio: false
          }
        };

        // Weekly Issues Chart
        let weeklyIssuesChart;
        if (weeklyIssuesCtx) {
          weeklyIssuesChart = new Chart(weeklyIssuesCtx, areaChartConfig);
        }

        const lineChartConfig = {
          type: 'line',
          data: {
            labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            datasets: [{
              label: 'New',
              data: randomData(50, 100, 7, false),
              backgroundColor: 'rgba(255, 255, 255, 0)',
              borderColor: primaryLightColor,
              borderWidth: 1.5,
              lineTension: 0,
              pointBorderWidth: 1.5,
              pointBackgroundColor: primaryLightColor,
              pointBorderColor: '#fff',
              pointHoverBackgroundColor: primaryColor,
              pointHoverBorderColor: primaryLightColor,
              pointRadius: [0, 0, 0, 4, 0, 0, 0]
            }, {
              label: 'Done',
              data: randomData(30, 80, 7, false),
              backgroundColor: 'rgba(255, 255, 255, 0)',
              borderColor: primaryDarkColor,
              borderWidth: 1.5,
              lineTension: 0,
              pointBorderWidth: 1.5,
              pointBackgroundColor: primaryDarkColor,
              pointBorderColor: '#fff',
              pointHoverBackgroundColor: primaryColor,
              pointHoverBorderColor: primaryLightColor,
              pointRadius: [0, 0, 0, 4, 0, 0, 0]
            }, {
              label: 'Unresolved',
              data: randomData(10, 60, 7, false),
              backgroundColor: 'rgba(255, 255, 255, 0)',
              borderColor: secondaryColor,
              borderWidth: 1.5,
              lineTension: 0,
              pointBorderWidth: 1.5,
              pointBackgroundColor: secondaryDarkColor,
              pointBorderColor: '#f0f0ff',
              pointHoverBackgroundColor: secondaryColor,
              pointHoverBorderColor: secondaryLightColor,
              pointRadius: [0, 0, 0, 4, 0, 0, 0]
            }]
          },
          options: {
            legend: {
              display: true,
              position: 'top',
              labels: {
                boxWidth: 10
              }
            },
            tooltips: {
              enabled: true,
              xPadding: 20,
              yPadding: 10,
              displayColors: false,
              backgroundColor: primaryColor
            },
            scales: {
              xAxes: [{
                display: false
              }]
            },
            responsive: true,
            maintainAspectRatio: false
          }
        };

        let issuesStatusChart;
        // Issues Status Chart
        if (issuesStatusCtx) {
          issuesStatusChart = new Chart(issuesStatusCtx, lineChartConfig);
        }

        const body = document.getElementsByTagName('body').item(0);
        body.addEventListener('portalThemeChanged', () => {
          issuesStatusChart.destroy();
          weeklyIssuesChart.destroy();
          setupDashboardCharts();
        });
      }
      function randomData(min, max, count, firstZero) {
        const data = [];
        for (let x = 0; x < count; x++) {
          const element = data[x];
          data[x] = min + Math.round(Math.random() * max);
        }
        if (firstZero === true) {
          data[0] = 0;
        }
        return data;
      }
      // Wait 1sec before initializing the charts so the switcher CSS works.
      setTimeout(setupDashboardCharts, 1000);

    })();

    // Changes the opacity of a hex colour.
    function ColorLuminance(hex, lum) {
      // validate hex string
      hex = String(hex).replace(/[^0-9a-f]/gi, '');
      if (hex.length < 6) {
        hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
      }
      lum = lum || 0;
      // convert to decimal and change luminosity
      var rgb = "#", c, i;
      for (i = 0; i < 3; i++) {
        c = parseInt(hex.substr(i*2,2), 16);
        c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
        rgb += ("00"+c).substr(c.length);
      }
      return rgb;
    }

    // Menu button on table widget
    const tableWidgetMenuEl = document.querySelector('#table-widget-menu');
    if (tableWidgetMenuEl !== null) {
      // Create layout menu.
      const tableWidgetMenu = new mdc.menu.MDCMenu(tableWidgetMenuEl);
      tableWidgetMenu.setAnchorCorner(mdc.menu.MDCMenuFoundation.Corner.BOTTOM_START);
      // Set listener for opening menu.
      document.querySelector('#table-widget-menu-button').addEventListener('click', function() {
        tableWidgetMenu.open = !tableWidgetMenu.open;
      });
    }
  </script>
{% endblock %}