var Inventory = React.createClass({
    propTypes: {
      cards: React.PropTypes.array
    },

    getInitialState: function() {
      return {
        cards: this.props.cards
      };
    },

  render: function() {
    if (this.props.cards) {
      return (
        <ul id='inventory'>
          {this.props.cards.map(function(card) {
            return <li key={card.id}>
              <label>
                <input
                  form={"player_controls_" + card.player_id}
                  type="checkbox"
                  name="player_card_ids[]"
                  data-card-name={card.rank.replace('11','J').replace('12','Q').replace('13','K').replace('14','A').replace('15','2') + ' ' + card.suit}
                  value={card.id} />
                {/* TODO: Don't hard code face cards here */}
                {/* <span>{card.rank.replace('11','J').replace('12','Q').replace('13','K').replace('14','A').replace('15','2')} {card.suit}</span> */}
                <img src={('/assets/cards/png/' + card.rank.replace('J','jack').replace('Q','queen').replace('K','king').replace('A','ace') + '_of_' + card.suit.toLowerCase() + 's.png').replace('11','jack').replace('12','queen').replace('13','king').replace('14','ace').replace('15','2')} />
              </label>
            </li>;
          })}
        </ul>
      );
    }
    else {
      return (<div></div>);
    }
  }
});