     return
 
   render: ->
-    <BS.Button onClick={@handleToggle} bsStyle="primary">Edit Readings</BS.Button>
+    selectedReadingList =
+      <ul className="selected-reading-list">
+        <li><strong>Currently selected sections in this reading</strong></li>
+        {_.map(@props.selected, @renderTopics)}
+      </ul> if @props.selected.length && TocStore.isLoaded()
+
+    <div>
+      <label>Select Readings</label>
+      <BS.Button onClick={@handleToggle} bsStyle="primary">Edit Readings</BS.Button>
+      {selectedReadingList}
+    </div>
+
+  renderTopics: (topicId) ->
+    topic = TocStore.getSectionInfo(topicId)
+    <li>{topic.number} - {topic.title}</li>
 
   toggleSection: (section) ->
     if (TaskPlanStore.hasTopic(@props.planId, section.id))

    value = @refs.title.getDOMNode().value
    TaskPlanActions.updateTitle(@state.id, value)

  publish: ->
    {id} = TaskPlanStore.get(@state.id)
    TaskPlanActions.publish(id)
    @transitionTo('editReading', {id})

  renderTopics: (topicId) ->
    topic = TocStore.getSectionInfo(topicId)
    <li>{topic.number} - {topic.title}</li>

  render: ->
    id = @getParams().id

    if id
      plan = TaskPlanStore.get(id)    
    else
      plan = TaskPlanStore.get(@state.id)

    console.log('getParams().id: '+id)
    console.log('@state.id: '+@state.id)
     
    isEnabled = plan.title and plan.due_at and plan.settings.page_ids.length > 0

    classes = []
    classes.push('disabled') unless isEnabled
    classes = classes.join(' ')

    footer = <BS.Button bsStyle="primary" className={classes} onClick={@publish}>Publish</BS.Button>
    headerText = if id then 'Edit Reading' else 'Add Reading'
    dueDate = if @state.due_at then @state.due_at else @props.due_at
    topics = TaskPlanStore.getTopics(@state.id)
    

    selectedReadingList =
      <ul className="selected-reading-list">
        <li><strong>Currently selected sections in this reading</strong></li>
        {_.map(topics, @renderTopics)}
      </ul> if topics?.length

    <BS.Panel bsStyle="default" className="create-reading" footer={footer}>
      <h1>{headerText}</h1>
      <div>
        <label htmlFor="title">Name</label>
        <input ref="title" id="title" type="text" onChange={@setTitle} value={@props.title}/>
      </div>
      <div>
        <label htmlFor="due-date">Due Date</label>

      </div>
    </BS.Modal>

ReadingFooter = React.createClass
  render: ->
    classes = []
    classes.push('disabled') unless @props.enabled
    classes = classes.join(' ')

    deleteLink = <a onClick={@props.onDelete}>Delete this plan</a> if @props.enabled

    <span>
      <BS.Button bsStyle="primary" className={classes} onClick={@props.onPublish}>Publish</BS.Button>
      {deleteLink}
    </span>

ReadingPlan = React.createClass
  mixins: [Router.State, Router.Navigation]

  getInitialState: ->
    id = @getParams().id
    if (id)
      TaskPlanActions.load(id)
    else
      id = TaskPlanStore.freshLocalId()
      plan = TaskPlanActions.create(id, due_at: new Date())

    {id, plan}

  componentWillMount: -> TaskPlanStore.addChangeListener(@update)
  componentWillUnmount: -> TaskPlanStore.removeChangeListener(@update)

  update: () ->
    plan = TaskPlanStore.get(@state.id)
    @setState {plan}

  setDueAt: (value) ->
    TaskPlanActions.updateDueAt(@state.id, value)
