<div id="TipCommunicationComments" class="card card-default" data-ng-init="collapsed = false">
  <div class="card-header clearfix" data-ng-click="collapsed = !collapsed; $event.stopPropagation();">
    <span data-translate>Comments</span>
    <span class="float-right">
      <i data-ng-if="!collapsed" class="fa-solid fa-chevron-up" data-uib-tooltip="{{'Collapse' | translate}}"></i>
      <i data-ng-if="collapsed" class="fa-solid fa-chevron-down" data-uib-tooltip="{{'Expand' | translate}}"></i>
    </span>
  </div>
  <div class="card-body" data-ng-show="!collapsed">
    <div data-ng-if="tip.status !== 'closed' && tip.context.enable_comments && (Authentication.session.role !== 'whistleblower' || tip.enable_two_way_comments)" class="row">
      <div class="col-md-12 clearfix">
        <textarea id="TipCommunicationCommentsInput" data-ng-model="tip.newCommentContent" maxlength="4096" class="form-control" autocomplete="off" dynamic-textarea></textarea>
        <span class="float-right">{{tip.newCommentContent.length ? tip.newCommentContent.length : '0'}}/4096</span>
      </div>
      <div class="col-md-12 clearfix">
        <button id="comment-action-send" class="btn btn-primary" data-ng-click="newComment()" data-ng-disabled="!tip.newCommentContent">
          <i class="fa-solid fa-comment"></i>
          <span data-translate>Send</span>
        </button>
        <div data-ng-if="Authentication.session.role === 'receiver' && !tip.context.enable_two_way_comments" class="form-group">
          <label class="inline-checkbox">
            <input data-ng-model="tip.enable_two_way_comments" data-ng-change="tip.operation('set', {'key': 'enable_two_way_comments', 'value': tip.enable_two_way_comments})" type="checkbox" />
            <span data-translate>Allow the whistleblower to write comments</span>
          </label>
        </div>
      </div>
    </div>
    <div id="SubmissionComments" data-ng-if="tip.comments.length" data-ng-repeat="comment in tip.comments | orderBy:'creation_date':true| limitTo:itemsPerPage:((currentCommentsPage - 1) * itemsPerPage)">
      <div id="comment-{{$index}}" data-ng-switch="comment.type" class="mt-2">
        <div data-ng-switch-when="whistleblower" class="messageWB">
          <div class="row">
            <div class="col-md-6" data-translate>Whistleblower</div>
            <div class="col-md-6 text-right">{{comment.creation_date | date:'dd-MM-yyyy HH:mm'}}</div>
          </div>
          <div class="preformatted">{{comment.content}}</div>
        </div>
        <div data-ng-switch-when="receiver" class="message">
          <div class="row">
            <div class="col-md-6">{{tip.receivers_by_id[comment.author].name}}</div>
	    <div class="col-md-6 text-right">{{comment.creation_date | date:'dd-MM-yyyy HH:mm'}}</div>
          </div>
          <div class="preformatted">{{comment.content}}</div>
        </div>
      </div>
    </div>
    <div class="mt-2 text-center" data-ng-show="tip.comments.length > itemsPerPage">
      <ul uib-pagination
          total-items="tip.comments.length"
          first-text="<< {{'First' | translate}}"
          last-text="{{'Last' | translate}} >>"
          previous-text="< {{'Previous' | translate}}"
          next-text="{{'Next' | translate}} >"
          items-per-page="itemsPerPage"
          data-ng-model="currentCommentsPage"
          max-size="5"
          class="pagination-sm"
          boundary-links="true"
          force-ellipses="true"></ul>
    </div>
  </div>
</div>
