 
   deletePlan: () ->
     id = @getPlanId()
-    @transitionTo('dashboard')
-    TaskPlanActions.delete(id)
-
-  render: ->
-    id = @getPlanId()
-
-    unless TaskPlanStore.isLoaded(id)
+    if confirm('Are you sure you want to delete this?')
+      TaskPlanActions.delete(id)
+      @transitionTo('dashboard')
+
+  render: ->
+    id = @getPlanId()
+
+    if TaskPlanStore.isLoaded(id)
+      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>
+
+    else
       <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

  update: () ->
    id = @getPlanId()
    plan = TaskPlanStore.get(id)
    if (id isnt plan.id)
      @setState({id: plan.id})
    else
      @setState {}

  setDueAt: (value) ->
    id = @getPlanId()

    classes.push('disabled') unless @props.enabled
    classes = classes.join(' ')

    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>
