<div id="Toolbar" class="row">
  <div class="col-md-12 clearfix">
    <span class="float-left">
      <a id="link-home"
         href="#/recipient/home"
         data-uib-tooltip="{{'Home' | translate}}"
         class="btn btn-outline-secondary">
        <i class="fa-solid fa-arrow-left"></i>
      </a>

      <span id="tip-action-select-all"
            data-ng-if="selected_tips.length !== resources.rtips.rtips.length"
            data-ng-click="select_all()"
            data-uib-tooltip="{{'Select all' | translate}}"
            class="btn btn-outline-secondary">
        <i class="fa-solid fa-square"></i>
      </span>

      <span id="tip-action-select-all"
            data-ng-if="selected_tips.length === resources.rtips.rtips.length"
            data-ng-click="deselect_all()"
            data-uib-tooltip="{{'Deselect all' | translate}}"
            class="btn btn-outline-secondary">
        <i class="fa-solid fa-check-square"></i>
      </span>

      <span data-ng-if="selected_tips.length">
        <span id="tip-action-grant-access-selected"
              data-ng-if="resources.preferences.can_grant_access_to_reports"
              data-ng-click="open_grant_access_modal()"
              data-uib-tooltip="{{'Grant access' | translate}}"
              class="btn btn-outline-secondary">
          <i class="fa-solid fa-user-plus"></i>
        </span>

        <span id="tip-action-revoke-access-selected"
              data-ng-if="resources.preferences.can_grant_access_to_reports"
              data-ng-click="open_revoke_access_modal()"
              data-uib-tooltip="{{'Revoke access' | translate}}"
              class="btn btn-outline-secondary">
          <i class="fa-solid fa-user-minus"></i>
        </span>

        <span id="tip-action-delete-selected"
              data-ng-if="resources.preferences.can_delete_submission"
              data-ng-click="tip_delete_selected()"
              data-uib-tooltip="{{'Delete' | translate}}"
              class="btn btn-outline-secondary">
          <i class="fa-solid fa-trash"></i>
        </span>

        <span id="tip-action-export-selected"
              data-ng-click="tips_export()"
              data-uib-tooltip="{{'Export' | translate}}"
              class="btn btn-outline-secondary">
          <i class="fa-solid fa-save"></i>
        </span>
      </span>

      <span id="tip-action-reload"
            data-ng-click="reload()"
            data-uib-tooltip="{{'Refresh' | translate}}"
            class="btn btn-outline-secondary">
        <i class="fa-solid fa-sync"></i>
      </span>

      <span id="SearchFilter" class="form-group float-right">
        <div class="input-group">
          <input type="text" class="form-control" data-ng-attr-placeholder="{{'Search' | translate}}"
                 data-ng-model="search">
            <div class="input-group-append">
            <span class="input-group-text"><i class="fa-solid fa-search"></i></span>
          </div>
        </div>
      </span>
    </span>
  </div>
</div>

<div id="TipList" class="row mt-2">
  <div class="col-md-12 table-responsive">
    <table class="table table-striped" id="tipList" data-ng-init="sortKey = 'creation_date'; sortReverse=true;">
      <thead>
        <tr>
          <th></th>
          <th data-ng-click="sortKey = 'important'; sortReverse = !sortReverse">
            <i class="fa-solid fa-star" ></i>
            <span data-ng-show="sortKey == 'important'">
              <span data-ng-show="!sortReverse" class="fa-solid fa-caret-down"></span>
              <span data-ng-show="sortReverse" class="fa-solid fa-caret-up"></span>
            </span>
          </th>
          <th class="TipInfoID" data-ng-click="sortKey = 'progressive'; sortReverse = !sortReverse">
            <i class="fa-solid fa-hashtag"></i>
            <span data-ng-show="sortKey == 'progressive'">
              <span data-ng-show="!sortReverse" class="fa-solid fa-caret-down"></span>
              <span data-ng-show="sortReverse" class="fa-solid fa-caret-up"></span>
            </span>
          </th>
          <th class="TipInfoContext" data-ng-if="public.contexts.length > 1">
            <span data-ng-click="sortKey = 'context_name'; sortReverse = !sortReverse">
              <i class="fa-solid fa-inbox"></i>
              <span data-translate>Channel</span>
              <span data-ng-show="sortKey == 'context_name'">
                <span data-ng-show="!sortReverse" class="fa-solid fa-caret-down"></span>
                <span data-ng-show="sortReverse" class="fa-solid fa-caret-up"></span>
              </span>
            </span>
            <span class="DropdownMultiselectContainer">
              <i class="fa-solid fa-filter" data-ng-class="{filterSelected: checkFilter(dropdownContextModel)}"></i>
              <span translation-texts="dropdownDefaultText" data-ng-dropdown-multiselect="" options="dropdownContextData" selected-model="dropdownContextModel" events="on_changed" extra-settings="dropdownSettings"></span>
            </span>
          </th>
          <th class="TipInfoLabel">
            <span data-ng-click="sortKey = 'label'; sortReverse = !sortReverse">
              <i class="fa-solid fa-tag"></i>
              <span data-translate>Label</span>
              <span data-ng-show="sortKey == 'label'">
                <span data-ng-show="!sortReverse" class="fa-solid fa-caret-down"></span>
                <span data-ng-show="sortReverse" class="fa-solid fa-caret-up"></span>
              </span>
            </span>
          </th>
          <th class="TipInfoStatus">
            <span data-ng-click="sortKey = 'submissionStatusStr'; sortReverse = !sortReverse">
              <i class="fa-solid fa-dot-circle"></i>
              <span data-translate>Status</span>
              <span data-ng-show="sortKey == 'submissionStatusStr'">
                <span data-ng-show="!sortReverse" class="fa-solid fa-caret-down"></span>
                <span data-ng-show="sortReverse" class="fa-solid fa-caret-up"></span>
              </span>
            </span>
            <span class="DropdownMultiselectContainer">
              <i class="fa-solid fa-filter" data-ng-class="{filterSelected: checkFilter(dropdownStatusModel)}"></i>
              <span data-ng-dropdown-multiselect data-options="dropdownStatusData" data-selected-model="dropdownStatusModel" data-events="on_changed" data-extra-settings="dropdownSettings" data-translation-texts="dropdownDefaultText"></span>
            </span>
          </th>
          <th class="TipInfoSubmissionDate">
            <span data-ng-click="sortKey = 'creation_date'; sortReverse = !sortReverse">
              <i class="fa-solid fa-clock"></i>
              <span data-translate>Report date</span>
              <span data-ng-show="sortKey == 'creation_date'">
                <span data-ng-show="!sortReverse" class="fa-solid fa-caret-down"></span>
                <span data-ng-show="sortReverse" class="fa-solid fa-caret-up"></span>
              </span>
            </span>
            <span data-date-range-picker data-ng-model="reportDateModel" data-on-date-change="onReportFilterChange"></span>
          </th>
          <th class="TipInfoUpdateDate">
            <span data-ng-click="sortKey = 'update_date'; sortReverse = !sortReverse">
              <i class="fa-solid fa-clock"></i>
              <span data-translate>Last update</span>
              <span data-ng-show="sortKey == 'update_date'">
                <span data-ng-show="!sortReverse" class="fa-solid fa-caret-down"></span>
                <span data-ng-show="sortReverse" class="fa-solid fa-caret-up"></span>
              </span>
            </span>
            <span data-date-range-picker data-ng-model="updateDateModel" data-on-date-change="onUpdateFilterChange"></span>
          </th>
          <th class="TipInfoExpirationDate">
            <span data-ng-click="sortKey = 'expiration_date'; sortReverse = !sortReverse">
              <i class="fa-solid fa-hourglass"></i>
              <span data-translate>Expiration date</span>
              <span data-ng-show="sortKey == 'expiration_date'">
                <span data-ng-show="!sortReverse" class="fa-solid fa-caret-down"></span>
                <span data-ng-show="sortReverse" class="fa-solid fa-caret-up"></span>
              </span>
            </span>
            <span data-date-range-picker data-ng-model="expiryDateModel" data-on-date-change="onExpiryFilterChange"></span>
          </th>
          <th class="TipInfoReadReceipt">
            <i class="fa-solid fa-eye"></i>
          </th>
          <th class="TipInfoPreview">
            <span>
              <i class="fa-solid fa-list-alt"></i>
              <span data-translate>Preview</span>
            </span>
          </th>
          <th class="TipInfoScore" data-ng-if="public.node.enable_scoring_system">
            <span data-ng-click="$parent.sortKey = 'score'; sortReverse = !sortReverse">
              <i class="fa-solid fa-flash"></i>
              <span data-translate>Score</span>
              <span data-ng-show="$parent.sortKey == 'score'">
                <span data-ng-show="!sortReverse" class="fa-solid fa-caret-down"></span>
                <span data-ng-show="sortReverse" class="fa-solid fa-caret-up"></span>
              </span>
            </span>
            <span class="DropdownMultiselectContainer">
              <i class="fa-solid fa-filter" data-ng-class="{filterSelected: checkFilter(dropdownScoreModel)}"></i>
              <span translation-texts="dropdownDefaultText" data-ng-dropdown-multiselect options="dropdownScoreData" class="dropdown-multiselect-padding" selected-model="dropdownScoreModel" events="on_changed" extra-settings="dropdownSettings"></span>
            </span>
          </th>
        </tr>
      </thead>
      <tbody id="tipListTableBody">
        <tr id="tip-{{$index}}"
            data-ng-repeat="tip in filteredTips | orderBy:sortKey:sortReverse | limitTo:itemsPerPage:((currentPage - 1) * itemsPerPage)"
            data-ng-class="{'font-weight-bold': tip.updated, 'selectedTip': isSelected(tip.id)}" class="tip-action-open"
            data-ng-click="Utils.go('/status/' + tip.id)">
          <td>
            <span class="btn btn-sm btn-outline-secondary" data-ng-if="isSelected(tip.id)"
                  data-ng-click="tip_switch(tip.id); $event.stopPropagation();">
              <i class="fa-solid fa-check-square"></i>
            </span>
            <span class="btn btn-sm btn-outline-secondary" data-ng-if="!isSelected(tip.id)"
                  data-ng-click="tip_switch(tip.id); $event.stopPropagation();">
              <i class="fa-solid fa-square"></i>
            </span>
            <span name="TipExport"
                  data-ng-click="exportTip(tip); $event.stopPropagation()"
                  data-uib-tooltip="{{'Export' | translate}}"
                  novalidate>
              <button id="tip-action-export" class="btn btn-sm btn-outline-secondary">
                <i class="fa-solid fa-save"></i>
              </button>
            </span>
          </td>
          <td data-uib-tooltip="{{'Mark as important' | translate}}">
            <i class="fa-solid fa-star text-warning" data-ng-click="toggle_star(tip); $event.stopPropagation();" data-ng-class="{'visible-on-over': !tip.important}"></i>
          </td>
          <td class="TipInfoID">{{tip.progressive}}</td>
          <td class="TipInfoContext" data-ng-if="public.contexts.length > 1">{{tip.context_name}}</td>
          <td class="TipInfoLabel">{{tip.label}}</td>
          <td class="TipInfoStatus"><span>{{tip.submissionStatusStr}}</span></td>
          <td class="TipInfoSubmissionDate">{{tip.creation_date | date:'dd-MM-yyyy HH:mm'}}</td>
          <td class="TipInfoUpdateDate">{{tip.update_date | date:'dd-MM-yyyy HH:mm'}}</td>
          <td class="TipInfoExpirationDate">
            <span
                data-ng-if="!Utils.isNever(tip.expiration_date)">{{tip.expiration_date | date:'dd-MM-yyyy HH:mm'}}</span>
            <span data-ng-if="Utils.isNever(tip.expiration_date)">-</span>
          </td>
          <td class="TipInfoLastAccess">
            <i data-ng-if="tip.last_access >= tip.update_date" class="fa-solid fa-check"
               data-uib-tooltip="{{'The whistleblower has already read the last update' | translate}} ({{tip.last_access | date:'dd-MM-yyyy HH:mm'}})"></i>
            <i data-ng-if="tip.last_access < tip.update_date" class="fa-solid fa-times"
               data-uib-tooltip="{{'The whistleblower has not read the last update yet' | translate}}"></i>
          </td>
          <td class="TipInfoPreview">
            <div data-ng-if="tip.file_count || tip.comment_count || tip.message_count">
              <span data-ng-if="tip.file_count" data-uib-tooltip="{{'Files' | translate}}"><i class="fa-solid fa-file text-secondary"></i>: {{tip.file_count}}</span>
              <span data-ng-if="tip.comment_count" data-uib-tooltip="{{'Comments' | translate}}"><i class="fa-solid fa-comment text-secondary"></i>: {{tip.comment_count}}</span>
              <span data-ng-if="tip.message_count" data-uib-tooltip="{{'Messages' | translate}}"><i class="fa-solid fa-envelope text-secondary"></i>: {{tip.message_count}}</span>
            </div>
            <div class="preview">
              <div data-ng-repeat="step in tip.questionnaire" data-ng-init="fieldAnswers = tip.answers; preview=true">
                <div data-ng-repeat="field in step.children" data-ng-include="'views/partials/tip_field.html'"></div>
              </div>
            </div>
          </td>
          <td class="TipInfoScore" data-ng-if="public.node.enable_scoring_system" data-ng-switch="tip.score">
            <span data-ng-switch-when="0">-</span>
            <span class="badge badge-primary" data-ng-switch-when="1" data-translate>Low</span>
            <span class="badge badge-primary" data-ng-switch-when="2" data-translate>Medium</span>
            <span class="badge badge-primary" data-ng-switch-when="3" data-translate>High</span>
          </td>
        </tr>
      </tbody>
    </table>

    <div class="text-center" data-ng-show="filteredTips.length > itemsPerPage">
      <ul data-uib-pagination
          total-items="filteredTips.length"
          first-text="<< {{'First' | translate}}"
          last-text="{{'Last' | translate}} >>"
          previous-text="< {{'Previous' | translate}}"
          next-text="{{'Next' | translate}} >"
          items-per-page="itemsPerPage"
          data-ng-model="currentPage"
          max-size="10"
          class="pagination-sm"
          boundary-links="true"
          force-ellipses="true"></ul>
    </div>
  </div>
</div>
