<div class="row">
  <div class="col-lg-2 col-md-3">
    <label>{{ 'MEDIA_SEARCH_RELATED_PERSONS' | translate }}:</label>
  </div>

  <div class="col-lg-10 col-md-9">
    <div
      ng-if="vm.mediaSearchEntity._mediaPyEntitiesMeta
             && vm.mediaSearchEntity._mediaPyEntitiesMeta._persons
             && vm.mediaSearchEntity._mediaPyEntitiesMeta._persons.length"
      class="items-container"
    >
      <div class="list-items-container">
        <div
          ng-repeat="mentionedPerson in vm.mediaSearchEntity._mediaPyEntitiesMeta._persons | limitTo: vm.mediaSearchEntity._mediaPyEntitiesMeta._shownPersonsCount"
          style="display: inline"
        >
          <div class="list-item">
            <a
              class="no-link-link"
              ng-click="vm.openNamecheckMediaSearchTabs(mentionedPerson.name)"
              >{{mentionedPerson.name.length ? mentionedPerson.name[0] : ''
              }}</a
            >
          </div>
          <span ng-show="!$last">,</span>
        </div>
        <span
          ng-hide="!vm.mediaSearchEntity._mediaPyEntitiesMeta._persons.length || vm.mediaSearchEntity._mediaPyEntitiesMeta._shownPersonsCount >= vm.mediaSearchEntity._mediaPyEntitiesMeta._persons.length"
          ng-click="vm.mediaSearchEntity._mediaPyEntitiesMeta.setShownPersonsCount($event, vm.mediaSearchEntity._mediaPyEntitiesMeta._persons.length)"
          class="show-more"
        >
          ({{ 'MEDIA_SEARCH_SHOW_MORE' | translate}}..)
        </span>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-2 col-md-3">
    <label>{{ 'MEDIA_SEARCH_RISK_PERSONS' | translate }}:</label>
  </div>

  <div class="col-lg-10 col-md-9">
    <div
      ng-if="vm.mediaSearchEntity._mediaPyRiskEntitiesMeta && vm.mediaSearchEntity._mediaPyRiskEntitiesMeta._persons"
      class="items-container"
    >
      <div class="list-items-container">
        <div
          ng-repeat="riskPerson in vm.mediaSearchEntity._mediaPyRiskEntitiesMeta._persons"
          style="display: inline"
        >
          <div class="list-item">
            <a
              class="no-link-link"
              ng-click="vm.openNamecheckMediaSearchTabs(riskPerson.name)"
              >{{riskPerson.name.length ? riskPerson.name[0] : ''}}</a
            >
            <a
              class="no-link-link"
              ng-if="riskPerson.db_id"
              ng-click="vm.openListItemModalInfo($event, riskPerson.db_id)"
              title="{{ 'ID: ' + riskPerson.db_id.join(', ') }}"
            >
              <i class="material-icons" style="font-size: 20px">info_outline</i>
            </a>
          </div>
          <span ng-show="!$last">,</span>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-2 col-md-3">
    <label>{{ 'MEDIA_SEARCH_RELATED_ORGS' | translate }}:</label>
  </div>

  <div class="col-lg-10 col-md-9">
    <div
      ng-if="vm.mediaSearchEntity._mediaPyEntitiesMeta
             && vm.mediaSearchEntity._mediaPyEntitiesMeta._organizations
             && vm.mediaSearchEntity._mediaPyEntitiesMeta._organizations.length"
      class="items-container"
    >
      <div class="list-items-container">
        <div
          ng-repeat="mentionedOrg in vm.mediaSearchEntity._mediaPyEntitiesMeta._organizations | limitTo: vm.mediaSearchEntity._mediaPyEntitiesMeta._shownOrganizationsCount"
          style="display: inline"
        >
          <div class="list-item">
            <a
              class="no-link-link"
              ng-click="vm.openNamecheckMediaSearchTabs(mentionedOrg.name)"
              >{{mentionedOrg.name.length ? mentionedOrg.name[0] : ''}}</a
            >
          </div>
          <span ng-show="!$last">,</span>
        </div>
        <span
          ng-hide="!vm.mediaSearchEntity._mediaPyEntitiesMeta._organizations.length || vm.mediaSearchEntity._mediaPyEntitiesMeta._shownOrganizationsCount >= vm.mediaSearchEntity._mediaPyEntitiesMeta._organizations.length"
          ng-click="vm.mediaSearchEntity._mediaPyEntitiesMeta.setShownOrganizationsCount($event, vm.mediaSearchEntity._mediaPyEntitiesMeta._organizations.length)"
          class="show-more"
        >
          ({{ 'MEDIA_SEARCH_SHOW_MORE' | translate}}..)
        </span>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-2 col-md-3">
    <label>{{ 'MEDIA_SEARCH_RISK_ORGS' | translate }}:</label>
  </div>

  <div class="col-lg-10 col-md-9">
    <div
      ng-if="vm.mediaSearchEntity._mediaPyRiskEntitiesMeta && vm.mediaSearchEntity._mediaPyRiskEntitiesMeta._organizations"
      class="items-container"
    >
      <div class="list-items-container">
        <div
          ng-repeat="riskOrg in vm.mediaSearchEntity._mediaPyRiskEntitiesMeta._organizations"
          style="display: inline"
        >
          <div class="list-item">
            <a
              class="no-link-link"
              ng-click="vm.openNamecheckMediaSearchTabs(riskOrg.name)"
              >{{riskOrg.name.length ? riskOrg.name[0] : ''}}</a
            >
            <a
              class="no-link-link"
              ng-if="riskOrg.db_id"
              ng-click="vm.openListItemModalInfo($event, riskOrg.db_id)"
              title="{{ 'ID: ' + riskOrg.db_id.join(', ') }}"
            >
              <i class="material-icons" style="font-size: 20px">info_outline</i>
            </a>
          </div>
          <span ng-show="!$last">,</span>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-2 col-md-3">
    <label>{{ 'MEDIA_SEARCH_LOCATIONS' | translate }}:</label>
  </div>

  <div class="col-lg-10 col-md-9">
    <div
      ng-if="vm.mediaSearchEntity._mediaPyEntitiesMeta
             && vm.mediaSearchEntity._mediaPyEntitiesMeta._locations
             && vm.mediaSearchEntity._mediaPyEntitiesMeta._locations.length"
      class="items-container"
    >
      <div class="list-items-container">
        <div
          ng-repeat="mentionedLocation in vm.mediaSearchEntity._mediaPyEntitiesMeta._locations | limitTo: vm.mediaSearchEntity._mediaPyEntitiesMeta._shownLocationsCount"
          style="display: inline"
        >
          <div class="list-item">
            <span class="mentioned-item">{{mentionedLocation.name.length ? mentionedLocation.name[0] : ''}}</span>
          </div>
          <!-- <span ng-show="!$last">,</span> -->
        </div>
        <span
          ng-hide="!vm.mediaSearchEntity._mediaPyEntitiesMeta._locations.length || vm.mediaSearchEntity._mediaPyEntitiesMeta._shownLocationsCount >= vm.mediaSearchEntity._mediaPyEntitiesMeta._locations.length"
          ng-click="vm.mediaSearchEntity._mediaPyEntitiesMeta.setShownLocationsCount($event, vm.mediaSearchEntity._mediaPyEntitiesMeta._locations.length)"
          class="show-more"
        >
          ({{ 'MEDIA_SEARCH_SHOW_MORE' | translate}}..)
        </span>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-2 col-md-3">
    <label>{{ 'MEDIA_SEARCH_NGRAMS' | translate }}:</label>
  </div>
  <div class="col-lg-10 col-md-9">
    <div
      ng-if="vm.mediaSearchEntity._mediaPyKeywordsMeta && vm.mediaSearchEntity._mediaPyKeywordsMeta._keywords.length"
      class="items-container"
    >
      <div class="list-items-container">
        <div
          ng-repeat="keyword in vm.mediaSearchEntity._mediaPyKeywordsMeta._keywords"
          style="display: inline"
        >
          <div class="list-item">
            <span class="keyword">{{keyword}}</span>
          </div>
          <!-- <span ng-show="!$last">,</span> -->
        </div>
      </div>
    </div>
  </div>
</div>

<br />
<br />

<div class="row">
  <div class="col-lg-2 col-md-3">
    <label>{{ 'MEDIA_SEARCH_SUMMARY' | translate }}:</label>
  </div>
  <div
    ng-if="vm.mediaSearchEntity._mediaPySummaryMeta"
    class="col-lg-10 col-md-9"
  >
    <ul style="padding-inline-start: 15px">
      <li
        ng-repeat="item in vm.mediaSearchEntity._mediaPySummaryMeta._summaries track by $index"
        ng-bind-html="item"
      ></li>
    </ul>
  </div>
</div>
