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

class ProductFactSheet extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'ProductFactSheet';
    }
    render() {
        var {factsheet} = this.props;
        return <div className="padding-top">
            <div className="margin-bottom2">
                <h1 id="title">{factsheet.get('title')}</h1>
                <hr className="hr-small"/>
                <strong><Time className="l-right" value={factsheet.get('date')} format="MMM YYYY" /> Product Knowledge</strong>
                <hr className="hr-small"/>
            </div>
            <Markdown className="row" html={this.props.factsheet.toJS()}/>
            <DisclaimerList data={factsheet.get('disclaimers')} />
            <small>Fact Sheet content is accurate at date of release. Some details may change, so please contact your regional Product Trainer for further information.</small>
            <div className="margin-top2">
                <Link className="cta-back" to="/product/factsheet">back to Fact Sheets</Link>
            </div>
        </div>;
    }
    
}

export default ProductFactSheet;