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';
import { Header }                         from '../Header';
import { AdminSidebar }                   from '../Sidebar'
import { AdminBreadcrumb }                from '../Breadcrumb'
import { ParentTable }                     from './view/ParentTable'


export class ParentsView extends Component {

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

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

  onUpdate(key, value) {
    this.setState({[key]: value});
  };
  togglePanel(){
    this.setState({panleOpen: !this.state.panleOpen});
  }

  render() {
    const {user, org, parent} = this.props.data;
    return (
      <div className="appLayout-box">
          <div className="page-container">
              <div className="page-content">
              <AdminSidebar
                user = {user}
                org = {org}
              />
                  <div className="content-wrapper">
                      <AdminBreadcrumb />

                      <div className="content has-detached-left">
                          <div className="container-detached">
                                <Header
                                  user = {user}
                                  org = {org}
                                />
                                <ParentTable
                                    data = {this.props.data}
                                    parent = {parent}
                                  />
                                {/* <AddStaff/>
                                <UploadCsvStaff /> */}
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
    );
  };


};