var JudgeHome = React.createClass({
    getInitialState: function() {
        UserEntity.loadStudentsPerJudge(this.props.user.id);
        $(UserEntity).on('StudentsHasChanged', function() {
            this.setState({ students: UserEntity.getStudents() });
        }.bind(this))

        var index = Navigation.indexOf('login');
        if (index > -1) {
            Navigation.splice(index, 1);
        }
        return({
            user: {},
            students:{},
            gradesStudents: []
        })
    },

    handleClick: function (e) {
        this.props.handler("questions");
    },
    render: function () {
        var students = this.state.students;
        var i = 0;
        var self = this;
        return (
            <div className="container">
                <div className="page-header">
                    <h1>Judge
                        <small>Home</small>
                    </h1>
                </div>
                <h3>Students</h3>
                <table className="table table-bordered">
                    <tbody className="fa-2x">
                        {$.map(students, function(student)
                            {
                                return [<JudgeStudent handler={self.handleClick} key={i++} keyid={i} data={student} judgeid={self.props.user.id} termid={self.props.user.termid} handleStudentClick={self.props.handleStudent}/>]
                            }
                        )}
                    </tbody>
                </table>
            </div>
        );
    }
});

var JudgeStudent = React.createClass({
    getInitialState: function() {
        return({
            student: {
            },
        })
    },
    handleClick: function (e) {
        this.props.handleStudentClick(this.props.data);
        this.props.handler("questions");
    },
    render: function () {
        return (
            <tr onClick={this.handleClick} style={{cursor:'pointer'}}>
                <td className="td-primary input-group-addon-active" style={{borderRight:0}}>{this.props.data.fname} {this.props.data.lname}<br />
                    <small>
                        <small>Project: {this.props.data.project}</small>
                    </small>
                    <br />
                    <smalL>
                        <small>Location: {this.props.data.location}</small>
                    </smalL>
                </td>
                <td className="td-primary input-group-addon-active" style={{textAlign:'right', fontSize:'150%', fontWeight:'bold'}}>
                    <span style={{color: '#2296f4'}} className="col-md-12 fa fa-graduation-cap" title="Click to Grade this Student">
                        <span style={{fontSize:'40%'}}>Grade Now!</span>
                    </span>
                </td>
            </tr>
        );
    }
});