     classes.push('disabled') unless @props.enabled
     classes = classes.join(' ')
 
-    deleteLink = <a onClick={@props.onDelete}>Delete this plan</a> if @props.enabled
+    deleteLink = <BS.Button bsStyle="danger" onClick={@props.onDelete}>Delete</BS.Button> if @props.enabled
 
     <span>
       <BS.Button bsStyle="primary" className={classes} onClick={@props.onPublish}>Publish</BS.Button>


  deletePlan: () ->
    id = @getPlanId()
    @transitionTo('dashboard')
    TaskPlanActions.delete(id)

  render: ->
    id = @getPlanId()

    unless TaskPlanStore.isLoaded(id)
      <div className="loading">Loading...</div>

    plan = TaskPlanStore.get(id)

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

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

    <BS.Panel bsStyle="default" className="create-reading" footer={footer}>
      <h1>{headerText}</h1>
      <div>
        <label htmlFor="reading-title">Name</label>
        <input ref="title" id="reading-title" type="text" onChange={@setTitle} value={plan?.title}/>
      </div>
      <div>
        <label htmlFor="reading-due-date">Due Date</label>
        <DateTimePicker
          id="reading-due-date"
          format="MMM dd, yyyy"
          time={false}
          calendar={true}
          readOnly={false}
          onChange={@setDueAt}
          value={new Date(plan?.due_at)}/>
      </div>
      <SelectTopics planId={id} selected={topics}/>
    </BS.Panel>

module.exports = ReadingPlan


    chapters = _.map(TocStore.get(), @renderChapterPanels)

    <BS.Modal backdrop={true} onRequestHide={@doneWithSelection}>
      <div className="modal-body select-reading-modal">
        {chapters}
      </div>
