   render: ->
     <BS.Button onClick={@handleToggle} bsStyle="primary">Edit Readings</BS.Button>
 
+  toggleSection: (section) ->
+    if (TaskPlanStore.hasTopic(@props.planId, section.id))
+      TaskPlanActions.removeTopic(@props.planId, section.id)
+    else
+      TaskPlanActions.addTopic(@props.planId, section.id)
+
+  renderSections: (section) ->
+    active = TaskPlanStore.hasTopic(@props.planId, section.id)
+    <SectionTopic active={active} section={section} toggleSection={@toggleSection}/>
+    
+  renderChapterPanels: (chapter, i) ->
+    sections = _.map(chapter.children, _.bind(@renderSections, this))
+    header = <h2>{chapter.number}. {chapter.title}</h2>
+
+    <BS.Panel key={chapter.id} header={header} eventKey={chapter.id}>
+      <BS.ListGroup>
+        {sections}
+      </BS.ListGroup>
+    </BS.Panel>
+
   renderOverlay: ->
     if !@state.isModalOpen
       return <span/>
+  
+    chapters = _.map(@state.chapters, _.bind(@renderChapterPanels, this))
 
     <BS.Modal backdrop={true} onRequestHide=@doneWithSelection>
       <div className="modal-body">
-        <ul>
-          <li>List</li>
-          <li>of</li>
-          <li>chapters</li>
-          <li>and</li>
-          <li>sections</li>
-        </ul>
+        <BS.Accordion>
+          {chapters}
+        </BS.Accordion>
       </div>
       <div className="modal-footer">
         <BS.Button onClick={@handleToggle}>Close</BS.Button>

React = require 'react'
BS = require 'react-bootstrap'
Router = require 'react-router'
Datepicker = (require 'react-widgets').DateTimePicker

{TaskPlanStore, TaskPlanActions} = require '../../flux/task-plan'

SelectReadings = React.createClass
  mixins: [BS.OverlayMixin],
  getInitialState: -> {
    isModalOpen: false
  }

  handleToggle: ->
    @setState({

      </div>
      <p>
        <label>Select Readings</label>
        <SelectTopics planId={@state.id} selected={topics}/>
      </p>
      <ul>
        {_.map(topics, @renderTopics)}
      </ul>
    </BS.Panel>

module.exports = ReadingPlan
