     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))

      </div>
    </BS.Modal>


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

  getInitialState: ->
    id = @getParams().id
    unless id
      id = TaskPlanStore.freshLocalId()
      TaskPlanActions.create(id, due_at: new Date())
    {id}

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

  update: -> @setState {}

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

          calendar={true}
          readOnly={false}
          onChange={@setDueAt}
          value={new Date(@state.plan?.due_at)}/>
      </div>
      <SelectTopics planId={@state.id} selected={topics}/>
    </BS.Panel>

module.exports = ReadingPlan
