'use strict';

import React from 'react';

class Dashboard extends React.Component {
  render() {
    return (
      <div>
        <div className="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
          <header className="demo-header mdl-layout__header mdl-color--white mdl-color--grey-100 mdl-color-text--grey-600">
            <div className="mdl-layout__header-row">
              <span className="mdl-layout-title">Home</span>
              <div className="mdl-layout-spacer" />
              <div className="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
                <label className="mdl-button mdl-js-button mdl-button--icon" htmlFor="search">
                  <i className="material-icons">search</i>
                </label>
                <div className="mdl-textfield__expandable-holder">
                  <input className="mdl-textfield__input" type="text" id="search" />
                  <label className="mdl-textfield__label" htmlFor="search">Enter your query...</label>
                </div>
              </div>
              <button className="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="hdrbtn">
                <i className="material-icons">more_vert</i>
              </button>
              <ul className="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" htmlFor="hdrbtn">
                <li className="mdl-menu__item">About</li>
                <li className="mdl-menu__item">Contact</li>
                <li className="mdl-menu__item">Legal information</li>
              </ul>
            </div>
          </header>
          <div className="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
            <header className="demo-drawer-header">
              <img src="images/user.jpg" className="demo-avatar" />
              <div className="demo-avatar-dropdown">
                <span>hello@email.com</span>
                <div className="mdl-layout-spacer" />
                <button id="accbtn" className="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
                  <i className="material-icons">arrow_drop_down</i>
                </button>
                <ul className="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" htmlFor="accbtn">
                  <button className="mdl-menu__item">hello@email.com</button>
                  <button className="mdl-menu__item">info@domain.net</button>
                  <button className="mdl-menu__item">Add another account...</button>
                </ul>
              </div>
            </header>
            <nav className="demo-navigation mdl-navigation mdl-color--blue-grey-800">
              <a className="mdl-navigation__link" href><i className="mdl-color-text--blue-grey-400 material-icons">home</i>Home</a>
              <a className="mdl-navigation__link" href><i className="mdl-color-text--blue-grey-400 material-icons">inbox</i>Inbox</a>
              <a className="mdl-navigation__link" href><i className="mdl-color-text--blue-grey-400 material-icons">delete</i>Trash</a>
              <a className="mdl-navigation__link" href><i className="mdl-color-text--blue-grey-400 material-icons">report</i>Spam</a>
              <a className="mdl-navigation__link" href><i className="mdl-color-text--blue-grey-400 material-icons">forum</i>Forums</a>
              <a className="mdl-navigation__link" href><i className="mdl-color-text--blue-grey-400 material-icons">flag</i>Updates</a>
              <a className="mdl-navigation__link" href><i className="mdl-color-text--blue-grey-400 material-icons">local_offer</i>Promos</a>
              <a className="mdl-navigation__link" href><i className="mdl-color-text--blue-grey-400 material-icons">shopping_cart</i>Purchases</a>
              <a className="mdl-navigation__link" href><i className="mdl-color-text--blue-grey-400 material-icons">people</i>Social</a>
              <div className="mdl-layout-spacer" />
              <a className="mdl-navigation__link" href><i className="mdl-color-text--blue-grey-400 material-icons">help_outline</i></a>
            </nav>
          </div>
          <main className="mdl-layout__content mdl-color--grey-100">
            <div className="mdl-grid demo-content">
              <div className="demo-charts mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-grid">
                <svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" className="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
                  <text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82<tspan font-size="0.2" dy="-0.07">%</tspan></text>
                </svg>
                <svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" className="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
                  <text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82<tspan dy="-0.07" font-size="0.2">%</tspan></text>
                </svg>
                <svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" className="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
                  <text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82<tspan dy="-0.07" font-size="0.2">%</tspan></text>
                </svg>
                <svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" className="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
                  <text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82<tspan dy="-0.07" font-size="0.2">%</tspan></text>
                </svg>
              </div>
              <div className="demo-graphs mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--8-col">
                <svg fill="currentColor" viewBox="0 0 500 250" className="demo-graph">
                </svg>
                <svg fill="currentColor" viewBox="0 0 500 250" className="demo-graph">
                </svg>
              </div>
              <div className="demo-cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-grid mdl-grid--no-spacing">
                <div className="demo-updates mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop">
                  <div className="mdl-card__title mdl-card--expand mdl-color--teal-300">
                    <h2 className="mdl-card__title-text">Updates</h2>
                  </div>
                  <div className="mdl-card__supporting-text mdl-color-text--grey-600">
                    Non dolore elit adipisicing ea reprehenderit consectetur culpa.
                  </div>
                  <div className="mdl-card__actions mdl-card--border">
                    <a href="#" className="mdl-button mdl-js-button mdl-js-ripple-effect">Read More</a>
                  </div>
                </div>
                <div className="demo-separator mdl-cell--1-col" />
                <div className="demo-options mdl-card mdl-color--deep-purple-500 mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--3-col-tablet mdl-cell--12-col-desktop">
                  <div className="mdl-card__supporting-text mdl-color-text--blue-grey-50">
                    <h3>View options</h3>
                    <ul>
                      <li>
                        <label htmlFor="chkbox1" className="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
                          <input type="checkbox" id="chkbox1" className="mdl-checkbox__input" />
                          <span className="mdl-checkbox__label">Click per object</span>
                        </label>
                      </li>
                      <li>
                        <label htmlFor="chkbox2" className="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
                          <input type="checkbox" id="chkbox2" className="mdl-checkbox__input" />
                          <span className="mdl-checkbox__label">Views per object</span>
                        </label>
                      </li>
                      <li>
                        <label htmlFor="chkbox3" className="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
                          <input type="checkbox" id="chkbox3" className="mdl-checkbox__input" />
                          <span className="mdl-checkbox__label">Objects selected</span>
                        </label>
                      </li>
                      <li>
                        <label htmlFor="chkbox4" className="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
                          <input type="checkbox" id="chkbox4" className="mdl-checkbox__input" />
                          <span className="mdl-checkbox__label">Objects viewed</span>
                        </label>
                      </li>
                    </ul>
                  </div>
                  <div className="mdl-card__actions mdl-card--border">
                    <a href="#" className="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--blue-grey-50">Change location</a>
                    <div className="mdl-layout-spacer" />
                    <i className="material-icons">location_on</i>
                  </div>
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>
    );
  }
}

export default Dashboard;