/** @jsx React.DOM */

var AnnotationsBox = React.createClass({
  render: function() {
    
     if (!this.props.annotations || !this.props.annotations.length>0 ) {
        return <div>
                <span>None</span>   
               </div>;
     }

    // TODO: sort by date (optionally)
    // TODO: table view
   var annotations_list = [];
   this.props.annotations.sort(function(a,b) {
                            return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
                         }).forEach(function(item){
                            var itemname = item.name;
                            var itemvalue = item.value;

                            var dt_key = "annotation_"+itemname+"_key";
                            var dd_key = "annotation_"+itemname+"_value";
                            
                            annotations_list.push(<dt key={dt_key}>{itemname}</dt>);
                            annotations_list.push(<dd key={dd_key}>{itemvalue}</dd>);
                            });


    return <div> 
                <dl className="annotations dl-horizontal">
                    {annotations_list}
                </dl>
           </div>;
  }
 }
);