<div id="TipCommunicationMessages" class="card card-default" data-ng-init="collapsed = false">
  <div class="card-header clearfix" data-ng-click="collapsed = !collapsed; $event.stopPropagation();">
    <span data-translate>Messages</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_messages && (Authentication.session.role !== 'whistleblower' || tip.enable_two_way_messages)" class="row">
      <div class="col-md-12 clearfix">
        <div class="form-inline">
          <span data-ng-if="Authentication.session.role === 'whistleblower'">
            <span><span data-translate>Recipient</span>:<span>&nbsp;</span></span>
            <select id="message-recipient-selector" data-ng-model="tip.msg_receiver_selected" data-ng-options="obj.key as obj.value for obj in tip.msg_receivers_selector | orderBy:'value'" class="form-control"></select>
          </span>
        </div>
        <textarea id="TipCommunicationMessagesInput" data-ng-model="tip.newMessageContent" maxlength="4096" class="form-control" autocomplete="off" dynamic-textarea></textarea>
        <span class="float-right">{{tip.newMessagesContent.length ? tip.newMessagesContent.length : '0'}}/4096</span>
      </div>
      <div class="col-md-12 clearfix">
        <button id="message-action-send" class="btn btn-primary" data-ng-click="newMessage()" data-ng-disabled="!tip.newMessageContent || (Authentication.session.role === 'whistleblower' && !tip.msg_receiver_selected)">
          <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_messages" class="form-group">
          <label>
            <input data-ng-model="tip.enable_two_way_messages" data-ng-change="tip.operation('set', {'key': 'enable_two_way_messages', 'value': tip.enable_two_way_messages})" type="checkbox" />
            <span data-translate>Allow the whistleblower to send messages</span>
          </label>
        </div>
      </div>
    </div>
    <div id="SubmissionMessages">
      <div data-ng-repeat="message in tip.messages | orderBy:'creation_date':true | limitTo:itemsPerPage:((currentMessagesPage - 1) * itemsPerPage)">
        <div data-ng-include="'views/partials/tip_message.html'"></div>
      </div>
    </div>
    <div class="mt-2 text-center" data-ng-show="tip.messages.length > itemsPerPage">
      <ul uib-pagination
          total-items="tip.messages.length"
          first-text="<< {{'First' | translate}}"
          last-text="{{'Last' | translate}} >>"
          previous-text="< {{'Previous' | translate}}"
          next-text="{{'Next' | translate}} >"
          items-per-page="itemsPerPage"
          data-ng-model="currentMessagesPage"
          max-size="5"
          class="pagination-sm"
          boundary-links="true"
          force-ellipses="true"></ul>
    </div>
  </div>
</div>
