anchor.diff:          'Discuss this Point'
         
         DIV className: 'comments',
  -        for comment in comments
  -          DIV style: {marginTop: 40, minHeight: 60},
  +        for comment in @discussion.comments
  +          DIV style: {marginTop: 45, minHeight: 60},
   
               # Comment author name
               DIV
                 style:
                   position: 'absolute'
  -                marginTop: -20
  +                marginTop: -25
                   fontWeight: 'bold'
                   color: '#666'
  -              @data(comment.user).name + ':'
  +              fetch(comment.user).name + ':'
   
               # Comment author icon
               Avatar
  
positive.code:               comment.body
  
        # Write a new comment
        DIV style: {marginTop: 40},
  
          # Comment author name
          DIV
            style:
              position: 'absolute'
              marginTop: -20
              fontWeight: 'bold'
              color: '#666'
            (@data('/current_user').name or 'You') + ':'
  
          # Icon
          Avatar
            style:
              position: 'absolute'
              width: 50
              height: 50
            tag: DIV
            key: @data('/current_user').user
            hide_name: true
  
          AutoGrowTextArea
            placeholder: 'Write a new comment'
            style:
              marginLeft: 60
              width: 390
              height: 60
              lineHeight: 1.4
              fontSize: 16
  
  
  ##
  
negative.code: Point = ReactiveComponent
    displayName: 'Point'
  
    render : ->
      point = @data()
  
      is_selected = @root.selected_point == @props.key
  
      selected_segment = @data('histogram').selected_segment
      author_opinion = @data(userOpinion(point.user))
      current_user = @data('/current_user')
  
      point_content_style = { width: POINT_CONTENT_WIDTH }
      if is_selected
        _.extend point_content_style,
          border: "3px solid #{considerit_blue}"
          left: -3
          top: -3
          width: point_content_style.width + 6
          backgroundColor: 'white'
          marginBottom: 2
  
      if is_selected and @props.location_class == 'decision_board_point'
        _.extend point_content_style,
          padding: 8
          borderRadius: 8
          marginTop: -8
          marginLeft: -8
          width: point_content_style.width + 16
  
      LI
        className: "point closed_point #{@props.location_class}
          #{if point.is_pro then 'pro' else 'con'}"
        'data-id':@props.key
        onClick: @selectPoint
      ,
      
        if @props.location_class == 'community_point' && @props.is_new
          @renderNewIndicator()
  
        DIV className:'includers', onMouseEnter: @highlightIncluders, onMouseLeave: @unHighlightIncluders, 
          if @props.location_class == 'community_point'
            @renderIncluders()
  
          if !selected_segment || ( author_opinion && author_opinion.stance_segment == selected_segment )
            Avatar tag: SPAN, key: point.user, className:"point_author_avatar", hide_face: point.hide_name
  
        DIV className:'point_content', style : point_content_style,
          if @props.location_class == 'community_point' or is_selected
            IMG
              className: 'community_point_mouth'
              src: if is_selected then "<%= asset_path 'community_point_mouth_selected.png' %>" else "<%= asset_path 'community_point_mouth.png' %>"
  
          DIV className:'point_nutshell',
            point.nutshell
            if point.text
              if is_selected or
                (point.nutshell.length + point.text.length) < 210
                  # Split the point details into paragraphs
                  paragraphs = point.text.split(/(\r?\n|<br>|<br\/>|<br \/>|<p>)/g)
                  DIV className: 'point_details',
                    for para in paragraphs
                      P null, para
              else
                SPAN className: 'point_details_tease',
                  $("<span>#{point.text[0..210-point.nutshell.length]}</span>").text() + "... [more]"
  
        if current_user.user == point.user && @props.location_class == 'decision_board_point'
          DIV null,
            # Should we only allow editing of a point before it is published?
            # Is an author allowed to edit a point after someone else has included it?
            A className: 'edit_point', onClick: (=> points = @data(@props.your_points_key); points.editing_points.push(@props.key); save(points)), 
              SPAN null, 'edit'
  
            # Allow the point author to delete this point before it is published.
            # After it gets published, however, it can influence other people, so the author shouldn't be able to delete.
            # Later they can just remove it from their list if they don't believe it anymore. 
            if point.includers.length == 0 || (point.includers.length == 1 && point.includers[0] == current_user.user)
              A className: 'delete_point', onClick: @deletePoint,
                SPAN null, 'delete'
  
        if is_selected
          point_included = _.contains(@data(@proposal.your_opinion).point_inclusions, point.key)
          Discussion
            key:"/comments/#{point.id}"
            is_pro: point.is_pro
            in_wings: @root.proposal_mode == 'crafting' and not point_included
  
    componentDidMount : ->
      @setDraggability()
  
  