newscoop/JS-Scoopwriter

<div class="left-border-wrapper"> <!-- needed just for style reasons -->
  <div class="bottom-border-wrapper"> <!-- needed just for style reasons -->
    <input
       class="selected-checkbox"
       type="checkbox"
       ng-model="model.selected" />
    <div class="right">
      <div class="image-and-author-details">
        <div class="dropdown status-dropdown pull-right">
          <button
             class="btn dropdown-toggle status-button"
             type="button"
             data-toggle="dropdown">
            {{model.status}}
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li ng-click="model.changeStatus('pending')">
              {{ ::('aes.label.pending'|trans) }}
            </li>
            <li ng-click="model.changeStatus('approved')">
              {{ ::('aes.label.approved'|trans) }}
            </li>
            <li ng-click="onHide({commentId: model.id})">
              {{ ::('aes.label.hidden'|trans) }}
            </li>
          </ul>
        </div>
        <img
           class="pull-right"
           ng-src="images/icon-nested-comment-level-{{model.thread_level}}.png"
           />
        <div class="date-and-name">
          <div class="date" ng-bind="model.created | niceDate"></div>
          <div
             class="author-name"
             ng-bind="model.author"
             ng-click="model.toggle()"
             ></div>
        </div>
      </div>
      <div
         class="subject"
         ng-bind="model.subject"
         ng-click="model.toggle()"
         ng-hide="model.isEdited"
         ></div>
      <input
         class="editable subject"
         ng-model="model.editing.subject"
         ng-show="model.isEdited"
         />
      <div
         ng-bind="model.message"
         ng-hide="model.isEdited"
         class="comment"></div>
      <textarea
         class="message"
         ng-model="model.editing.message"
         ng-show="model.isEdited"
         ></textarea>
    </div>
    <!-- reply-to-comment form -->
    <div class="add-reply right" ng-show="model.isReplyMode">

      <div class="heading">
        <span class="add-reply-text">{{ ::('aes.label.replycomment'|trans) }}</span>
      </div>

      <div class="body">
        <input
           class="editor-input"
           placeholder="Subject"
           ng-model="model.reply.subject"
           ng-disabled="model.sendingReply"
           >

        <textarea
           class="editor-input"
           placeholder="Comment reply here..."
           ng-model="model.reply.message"
           ng-disabled="model.sendingReply"
           ></textarea>

        <div class="replyToControls">
          <button
             class="btn btn-primary btn-sm pull-right"
             ng-click="onReply({comment: model})"
             ng-disabled="model.sendingReply"
             >
            {{ ::('aes.btn.reply'|trans) }}
          </button>
          <button
             class="btn btn-default btn-sm pull-right"
             ng-click="model.cancelReply()"
             ng-disabled="model.sendingReply"
             >
            {{ ::('aes.btn.cancel'|trans) }}
          </button>
        </div>
      </div>

    </div>

    <div class="controls" ng-hide="model.isReplyMode">
      <span
         class="glyphicon glyphicon-chevron-up"
         ng-hide="model.isEdited"
         ng-click="model.collapse()"
         title="{{ ::('aes.label.collapse'|trans) }}"
         ></span>
      <span
         class="glyphicon glyphicon-pencil"
         ng-click="model.edit()"
         ng-hide="model.isEdited"
         title="{{ ::('Edit'|trans) }}"
         ></span>
      <span
         class="glyphicon glyphicon-floppy-disk"
         ng-click="onSave({comment: model})"
         ng-show="model.isEdited"
         title="{{ ::('Save'|trans) }}"
         ></span>
      <span
         class="glyphicon glyphicon-remove"
         ng-click="model.cancel()"
         ng-show="model.isEdited"
         title="{{ ::('Cancel'|trans) }}"
         ></span>
      <span
         class="fa fa-reply"
         ng-class="{disabled: !allowreplying }"
         ng-hide="model.isEdited"
         title="{{allowreplying ? ('aes.label.reply'|trans) : ''}}"
         ng-click="allowreplying &amp;&amp; model.replyTo()"
         ></span>
      <span
         class="fa fa-thumbs-up"
         ng-class="{recommended: model.recommended}"
         ng-hide="model.isEdited"
         ng-click="model.toggleRecommended()"
         title="{{model.recommended ? ('aes.label.unrecommend'|trans) : ('aes.label.recommend'|trans)}}"
         ></span>
      <span
         class="glyphicon glyphicon-trash"
         ng-hide="model.isEdited"
         ng-click="onDelete({commentId: model.id})"
         title="{{ ::('Delete'|trans) }}"
         ></span>
    </div>
  </div>
</div>