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

import React, { Component }               from 'react';
import { Link,browserHistory }            from 'react-router';
import { FormGroup,Panel,Table,
  ButtonToolbar,Modal,
  FormControl,Glyphicon,Button }          from 'react-bootstrap';
import { AddStudent }                     from './addStudent';
import { StudentTable }                   from './StudentTable';
import { Header }                         from './Header';
import { FabMenuView }                    from './FabMenu';

export class StudentView extends Component {

  constructor(props) {
    super(props);
    this.state = {
      show: false
    };
    this.showModal = this.showModal.bind(this);
    this.hideModal = this.hideModal.bind(this);
    this.onUpdate = this.onUpdate.bind(this);
  };

    showModal() {
      this.setState({show: true});
    }

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

  render() {
    return (
      <div className="content has-detached-left">
					<div className="container-detached">
						<div className="content-detached">
            <Header/>
            <StudentTable
            data = {this.props.data}
            />
          <AddStudent/>

				</div>
			</div>
			<div className="sidebar-detached affix-top">
				<div className="sidebar sidebar-default">
					<div className="sidebar-content">

						<div className="sidebar-category">
							<div className="category-title">
								<span>Advanced Search</span>
								<ul className="icons-list">
									<li><a href="#" data-action="collapse"></a></li>
								</ul>
							</div>

							<div className="category-content">
								<form action="#">
									<div className="has-feedback has-feedback-left">
										<input type="search" className="form-control" placeholder="First Name" />
										<div className="form-control-feedback">
											<i className="icon-search4 text-size-base text-muted"></i>
										</div>
									</div>
								</form>
							</div>
							<div className="category-content">
								<form action="#">
									<div className="has-feedback has-feedback-left">
										<input type="search" className="form-control" placeholder="Last Name" />
										<div className="form-control-feedback">
											<i className="icon-search4 text-size-base text-muted"></i>
										</div>
									</div>
								</form>
							</div>

						</div>


					</div>
				</div>
			</div>
</div>
    );
  };

};