   render: ->
     {courseId, planId, selected, hide} = @props
     unless @props.shouldShow
-      return <span className="-no-modal"/>
+      return <span className="-no-show"/>
     unless TocStore.isLoaded()
       TocActions.load(courseId)
       return <span className="-loading">Loading...</span>
 
     chapters = _.map(TocStore.get(), @renderChapterPanels)
     buttonStyle = if selected?.length then 'primary' else 'disabled'
-    shouldShowProblems = selected?.length and @state.showProblems
-    selectedExercises = TaskPlanStore.getExercises(planId)
+    shouldShowExercises = selected?.length and @state.showProblems
 
     if not @state.showProblems
       footer =

{TocStore, TocActions} = require '../../flux/toc'
{ExerciseStore, ExerciseActions} = require '../../flux/exercise'

ExerciseCard = React.createClass
  toggleExercise: ->
    if TaskPlanStore.hasExercise(@props.planId, @props.exercise.id)
      TaskPlanActions.removeExercise(@props.planId, @props.exercise)
    else
      TaskPlanActions.addExercise(@props.planId, @props.exercise)

  renderAnswers: (answer) ->
    <li>
      <ArbitraryHtmlAndMath className="answer" block={false} html={answer.content_html} />
    </li>

  renderTags: (tag) ->
    <span className="-exercise-tag">{tag}</span>

  render: ->
    content = JSON.parse(@props.exercise.content)
    question = content.questions[0]
    renderedAnswers = _.map(question.answers, @renderAnswers)
    renderedTags = _.map(content.tags, @renderTags)
    active = TaskPlanStore.hasExercise(@props.planId, @props.exercise.id)

    toggleText = if not active then <span>+</span> else <span>-</span>
    header = <span><BS.Button bsStyle="primary" onClick={@toggleExercise} className="-add-exercise">{toggleText}</BS.Button></span>
    
    panelStyle = if active then "info" else "default"
    <BS.Col xs={12} md={6}>
      <BS.Panel bsStyle={panelStyle} header={header}>
        <ArbitraryHtmlAndMath className="-stimulus" block={true} html={content.stimulus_html} />
        <ArbitraryHtmlAndMath className="-stem" block={true} html={question.stem_html} />
        <ul>{renderedAnswers}</ul>
        <p>{renderedTags}</p>
      </BS.Panel>
    </BS.Col>

AddProblems = React.createClass
  componentWillMount:   -> ExerciseStore.addChangeListener(@update)
  componentWillUnmount: -> ExerciseStore.removeChangeListener(@update)

  update: ->
    @setState({})

  reviewClicked: ->

  renderExercise: (exercise) ->
    <ExerciseCard planId={@props.planId} exercise={exercise}/>
      
  render: ->
    {courseId, pageIds, hide} = @props

    unless @props.shouldShow
      return <span className="-no-modal"/>
    unless ExerciseStore.isLoaded(pageIds)
      ExerciseActions.load(courseId, pageIds)
      return <span className="-loading">Loading...</span>

    exercises = ExerciseStore.get(pageIds)

    if not exercises.length
      return <span className="-no-exercises">The sections you selected have no exercises.  Please select more sections.</span>

    renderedExercises = _.map(exercises, @renderExercise)
    <div>

      <BS.Grid>
        <BS.Row>
          {renderedExercises}
        </BS.Row>
      </BS.Grid>
    </div>

ExerciseSummary = React.createClass
  render: ->
    if not @props.shouldShow
      return <span></span>

    if @props.canReview and @props.numSelected
      button = <BS.Button bsStyle="primary" onClick={@props.reviewClicked}>Review</BS.Button>
    else if @props.canAdd
      button = <BS.Button bsStyle="primary" onClick={@props.addClicked}>Add</BS.Button>

    total = @props.numSelected + 3

    <BS.Panel className bsStyle="default">
      <BS.Grid>
        <BS.Row>
          <BS.Col sm={6} md={2} className="-selections-title">Selections</BS.Col>
          <BS.Col sm={6} md={2} className="-total"><h2>{total}</h2></BS.Col>
          <BS.Col sm={6} md={2} className="-num-selected"><h2>{@props.numSelected}</h2>My Selections</BS.Col>
          <BS.Col sm={6} md={2} className="-num-tutor"><h2>3</h2>Tutor Selections</BS.Col>
          <BS.Col sm={6} md={2} className="-tutor-added-later"><em>
            Tutor selections are added later to support spaced practice and personalized learning.

React = require 'react'
_ = require 'underscore'
moment = require 'moment'
BS = require 'react-bootstrap'
Router = require 'react-router'
{DateTimePicker} = require 'react-widgets'
