import React from 'react';
import {Link} from 'react-router';
import Markdown from 'trc-client-core/src/components/Markdown';
import Icon from 'trc-client-core/src/components/Icon';

var CourseListObject = React.createClass({
    displayName: 'CourseListObject',
    render: function () {
        return (
            <div key={this.props.key}>
                <div className="Toggle clearfix" data-js="toggle">
                    <Link to={`/course/${this.props.course.courseCode}`} params={this.props.course} className="Button right">Details</Link>
                    <Icon className="column hug-left" hexCode={this.props.icon}/>
                    <span title={this.props.course.workshopName}>{this.props.course.workshopName}</span>
                </div>
                <div className="Toggle_content">
                    <table className="Table Table-tight">
                        <tbody>
                            <tr>
                                <td><div className="course_overview"><Markdown html={this.props.course.overview}></Markdown></div></td>
                                <td className="course-extras w25" >
                                    <table className="Table Table-inverse">
                                        <tbody>
                                            <tr><td><Icon size="small" modifier="inline" hexCode="E039"/>{this.props.course.courseCode}</td></tr>
                                            <tr><td><Icon size="small" modifier="inline" hexCode="E023"/>{this.props.course.duration}</td></tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <hr/>
            </div>
        );
    }
});

module.exports = CourseListObject;