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 { AddStudentForm }               from './addStudentForm';

export class StudentTable extends Component {

  constructor(props) {
    super(props);
    this.state = {
      show: false
    };
    this.onUpdate = this.onUpdate.bind(this);
  };
  onUpdate(key, value) {
    this.setState({[key]: value});
  };

  render() {
    return (
      <div className="panel panel-flat">
        <div className="panel-heading">
          <h5 className="panel-title">Student Details</h5>
          <div className="heading-elements">
            <ul className="icons-list">
                      <li><a data-action="collapse"></a></li>
                      <li><a data-action="reload"></a></li>
                    </ul>
                  </div>
        </div>


        <Table striped bordered condensed hover>
          <thead>
            <tr>
              <th>First Name</th>
              <th>Last Name</th>
              <th>className</th>
              <th>DOB</th>
              <th>Status</th>
              <th className="text-center">Actions</th>
            </tr>
          </thead>
          <tbody>
          {
            this.props.data.students.map(function(student, i)
              {
                return(
                  <tr key={i}>
              <td>{student.firstName}</td>
              <td>{student.lastName}</td>
              <td>VII</td>
              <td>22 Jun 1972</td>
              <td><span className="label label-success">Active</span></td>
              <td className="text-center">
                <ul className="icons-list">
                  <li className="dropdown">
                    <a href="#" className="dropdown-toggle" data-toggle="dropdown">
                      <i className="icon-menu9"></i>
                    </a>

                    <ul className="dropdown-menu dropdown-menu-right">
                      <li><a href="#"><i className="icon-file-pdf"></i> Export to .pdf</a></li>
                      <li><a href="#"><i className="icon-file-excel"></i> Export to .csv</a></li>
                      <li><a href="#"><i className="icon-file-word"></i> Export to .doc</a></li>
                    </ul>
                  </li>
                </ul>
              </td>
            </tr>
          )
        })
      }
            <tr>
              <td>Jackelyn</td>
              <td>Weible</td>
              <td><a href="#">XI</a></td>
              <td>3 Oct 1981</td>
              <td><span className="label label-default">Inactive</span></td>
              <td className="text-center">
                <ul className="icons-list">
                  <li className="dropdown">
                    <a href="#" className="dropdown-toggle" data-toggle="dropdown">
                      <i className="icon-menu9"></i>
                    </a>

                    <ul className="dropdown-menu dropdown-menu-right">
                      <li><a href="#"><i className="icon-file-pdf"></i> Export to .pdf</a></li>
                      <li><a href="#"><i className="icon-file-excel"></i> Export to .csv</a></li>
                      <li><a href="#"><i className="icon-file-word"></i> Export to .doc</a></li>
                    </ul>
                  </li>
                </ul>
              </td>
            </tr>
          </tbody>
        </Table>
      </div>
    );
  };

};