# @cjsx React.DOM $ = require('jquery') Backbone = require('backbone') React = require('react') EditTag = require('./edit_tag') ModalTrigger = require('react-bootstrap/lib/ModalTrigger')

module.exports = React.createClass

displayName: 'Tags'

componentDidMount: ->
  console.log '[views/tags] component did mount'
  @props.tags.on 'sync', @forceUpdate.bind(@, null)

componentWillReceiveProps: (nextProps)->
  console.log '[views/tags] component will receive props'
  nextProps.tags.on 'sync', @forceUpdate.bind(@, null)

render: ->
  <div className="container carte-list">
      <div className="row">
        <div className="col-sm-12">
          <ul className="nav nav-pills">
             <li>
               <a href="#/">
                 <i className="glyphicon glyphicon-arrow-left" />
               </a>
             </li>
          </ul>
        </div>
      </div>

      <div className="row">
        {
          if @props.tags.fetching
            <div className="list-group col-sm-4">
              <div className="list-group-item">
                <i className="glyphicon glyphicon-refresh glyphicon-refresh-animate" />
              </div>
            </div>
          else
            @props.tags.map (tag)->
              <div className="list-group col-sm-4">
                <div className="list-group-item">
                  <i className="glyphicon glyphicon-tag" />
                  &nbsp;
                  {tag.get('name')}
                  &nbsp;
                  (
                  <a href={'#/?tags=' + encodeURIComponent(tag.get('name'))}>
                    {tag.get('count')}
                  </a>
                  )
                  <span className="pull-right tools">
                    <ModalTrigger modal={<EditTag tag={tag} />}>
                      <a href="javascript:void(0)">
                        <i className="glyphicon glyphicon-edit" />
                      </a>
                    </ModalTrigger>
                  </span>
                </div>
              </div>
        }
      </div>
  </div>