var React = require('react');

var Character = React.createClass({
  getThumbnail: function() {
    var image = 'http://placehold.it/250x250';

    if(this.props.character.thumbnail) {
      image = this.props.character.thumbnail.path+'.'+this.props.character.thumbnail.extension;
    }


    return (
      <img className="character-image" src={image}/>
    )
  },

  getName: function() {
    return (
      <span className="character-name">
        {this.props.character.name}
      </span>
    );
  },

  getDescription: function() {
    var description = this.props.character.description ? this.props.character.description : 'No description'

    return (
      <p>
        {description}
      </p>
    )
  },

  getLinks: function() {
    return (
      <p>
        <a href={this.props.character.urls[0].url}>Wiki</a>|
        <a href={this.props.character.urls[1].url}>More details</a>
      </p>
    )
  },

  render: function () {
    return (
      <div className="row character">
        <div className="col-xs-12">
          <div className="row">
            <div className="col-xs-3">
              {this.getThumbnail()}
            </div>
            <div className="col-xs-9">
                {this.getName()}
              <div className="character-description">
                {this.getDescription()}
                {this.getLinks()}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
});

module.exports = Character;

@@ -281,17 +281,16 @@
 %0A    %7D%0A%0A
-%0A
     retu
@@ -971,12 +971,8 @@
 me=%22
-row 
 char
@@ -1016,45 +1016,20 @@
 s-12
-%22%3E%0A          %3Cdiv className=%22row
+ col-sm-3
 %22%3E%0A
-  
     
@@ -1054,21 +1054,20 @@
 me=%22
-col-xs-3
+thumbnail
 %22%3E%0A
-  
     
@@ -1096,35 +1096,16 @@
 nail()%7D%0A
-            %3C/div%3E%0A
         
@@ -1129,15 +1129,14 @@
 e=%22c
-ol-xs-9
+aption
 %22%3E%0A 
@@ -1140,34 +1140,65 @@
 %3E%0A              
-  
+%3Cspan className=%22character-name%22%3E
 %7Bthis.getName()%7D
@@ -1197,16 +1197,23 @@
 tName()%7D
+%3C/span%3E
 %0A       

Change the markup in the Character component