import _                                  from 'lodash';
import { Meteor }                         from 'meteor/meteor';

import React, { Component }               from 'react';
import { Link,browserHistory }            from 'react-router';
import { FormGroup,
  FormControl,Glyphicon,Button }          from 'react-bootstrap';


export class Header extends Component {

  constructor(props) {
    super(props);
    this.state = {

    };
    this.onUpdate = this.onUpdate.bind(this);
  };

  onUpdate(key, value) {
    this.setState({[key]: value});
  };

  render() {
    return (
      <div className = "enterPane-box">
      <div className="row">
        <div className="col-lg-3 col-md-6">
          <div className="panel panel-body">
            <div className="media">
              <div className="media-left">
                <a href="assets/images/placeholder.png" data-popup="lightbox">
                  <img src="assets/images/download2.png" className="img-circle img-lg" alt="" />
                </a>
              </div>
              <div className="media-body">
                <h6 className="media-heading">Students</h6>
                <span className="text-muted">Click to view</span>
              </div>
            </div>
          </div>
        </div>
      <div className="col-lg-3 col-md-6">
        <div className="panel panel-body">
          <div className="media">
            <div className="media-left">
              <a href="assets/images/placeholder.jpg" data-popup="lightbox">
                <img src="assets/images/download.png" className="img-circle img-lg" alt="" />
              </a>
            </div>

            <div className="media-body">
              <h6 className="media-heading">Teachers</h6>
              <span className="text-muted">Click to view</span>
            </div>
          </div>
        </div>
      </div>

      <div className="col-lg-3 col-md-6">
        <div className="panel panel-body">
          <div className="media">
            <div className="media-left">
              <a href="assets/images/placeholder.jpg" data-popup="lightbox">
                <img src="assets/images/download3.png" className="img-circle img-lg" alt="" />
              </a>
            </div>

            <div className="media-body">
              <h6 className="media-heading">Parents</h6>
              <span className="text-muted">Click to view</span>
            </div>
          </div>
        </div>
      </div>

      <div className="col-lg-3 col-md-6">
        <div className="panel panel-body">
          <div className="media">
            <div className="media-left">
              <a href="assets/images/placeholder.jpg" data-popup="lightbox">
                <img src="assets/images/download1.png" className="img-circle img-lg" alt="" />
              </a>
            </div>

            <div className="media-body">
              <h6 className="media-heading">Non Teaching Staff</h6>
              <span className="text-muted">Click to view</span>
            </div>
          </div>
        </div>
      </div>
    </div>
      </div>
    );
  };

};