/** @jsx React.DOM */

var MainView = React.createClass({
  getInitialState: function() {
    return {
        body: ""
    };
  },

  render: function() {
      $.get("/raw/" + this.props.message.Hash, function(data) {
          var body = data.substring(data.indexOf('\n\n')+2);
          this.setState({body: body});
      }.bind(this));

      // TODO:
      // - trim 'Re:' from messages and group/thread them.
      var m = this.props.message;
      return (
<div id="main" className="pure-u-1">
    <div className="email-content">
        <div className="email-content-header pure-g">
            <div className="pure-u-1">
                <h1 className="email-content-title">{m.Subject}</h1>
                <p className="email-content-subtitle">
                    From <a>{m.From}</a> at <span className="date">{m.Date.toLocaleString()}</span>
                </p>
            </div>

            <div className="email-content-controls pure-u-1">
                <button className="secondary-button pure-button">Reply</button>
                <button className="secondary-button pure-button">Forward</button>
                <a href={"/raw/"+m.Hash} className="secondary-button pure-button">Original</a>
            </div>
        </div>

        <div className="email-content-body"><pre>{this.state.body}</pre></div>
    </div>
</div>
);
  }
});