       <h1>{headerText}</h1>
       <div>
         <label htmlFor="title">Name</label>
-        <input ref="title" id="title" type="text" onChange={@setTitle} value={@state.plan?.title}/>
+        <input ref="title" id="title" type="text" onChange={@setTitle} value={plan?.title}/>
       </div>
       <div>
         <label htmlFor="due-date">Due Date</label>

      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)

  setTitle: ->
    value = @refs.title.getDOMNode().value
    TaskPlanActions.updateTitle(@state.id, value)

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

  deletePlan: () ->
    id = @getParams().id
    @transitionTo('dashboard')
    TaskPlanActions.delete(id)
    {}

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

    isEnabled = @state.plan?.title and @state.plan?.due_at and @state.plan?.settings.page_ids.length > 0

    headerText = if id then 'Edit Reading' else 'Add Reading'
    topics = TaskPlanStore.getTopics(@state.id)
    
    footer= <ReadingFooter enabled={isEnabled} onPublish={@publishPlan} onDelete={@deletePlan}/>


    return

  render: ->
    if (@props.selected.length and TocStore.isLoaded())
      selectedReadingList =
        <ul className="selected-reading-list">
          <li><strong>Currently selected sections in this reading</strong></li>
          {_.map(@props.selected, @renderTopics)}
        </ul>

    <div>
      <label>Select Readings</label>
