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';

  import {moment}                           from 'meteor/momentjs:moment'

  
  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>Class</th>

                <th>DOB</th>
                <th>Status</th>
                <th className="text-center">Actions</th>
              </tr>
            </thead>
            <tbody>

              {
                this.props.students.map(function(student, i)
                  {
                    return(
                      <tr key={i}>
                        <td>{student.firstName}</td>
                        <td>{student.lastName}</td>
                        <td>{student.class}</td>

                        <td>{student.dob? moment(student.dob).format("LL") : <span></span>}</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>
                  )
                })
              }

            </tbody>
          </Table>
        </div>
      );
    };
  
  };