var React = require('react');
var RegistrationMixin = require('trc-client-core/src/course/RegistrationMixin');

var RegistrationEnrolConfirmModal = React.createClass({
    displayName: 'RegistrationEnrolConfirmModal',
    mixins: [RegistrationMixin],
    render: function () {
        return (
            <div>
                <div className="modal_title">New Registration Activity - {this.props.course}</div>
                <div className="modal_body">
                    <p>Please carefully review the details of your new registrations.</p>
                    <hr/>
                    {this.renderSOItemsModalList()}
                    <hr/>
                    {this.renderWaitlistedInformation()}
                    <p>Your registrations will be submitted and confirmed on the following page.</p>
                    <div className="t-right">
                        <a className="js-removeModal Button Button-grey ">Cancel</a>
                        <a className="Button btnSubmit push-left" data-js="submit">Submit</a>
                    </div>
                </div>
            </div>
        );
    },
    renderWaitlistedInformation() {
        if(this.props.waitlisted) {
            return <div className="row">
                <p>If a course is displayed in <span className="t-red">RED</span>, it means that course is full and your staff may be waitlisted.</p>
                <p>If a course is displayed in <span className="t-yellow">YELLOW</span>, it means you have selected more staff than spots available and some staff may be waitlisted.</p>
            </div>;            
        }
    }
});

module.exports = RegistrationEnrolConfirmModal;