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

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

  render: function() {
    if (this.props.cards) {
      return (
        <ul>
          {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[]"
                  value={card.id} />
                {/* TODO: Don't hard code face cards here */}
                {card.rank.replace('11','J').replace('12','Q').replace('13','K').replace('14','A').replace('15','2')} {card.suit}
              </label>
            </li>;
          })}
        </ul>
      );
    }
    else {
      return (<div></div>);
    }
  }
});
