<div class="form-group row" style="margin: 15px">
  <div class="col-lg-12 col-md-12 col-sm-12">
    <div
      ng-if="!data.mostCommonMentionedItems && data.mostCommonMentionedPersons"
      class="items-container"
    >
      <div class="item-label">
        <label>{{ 'MEDIA_SEARCH_ASSOCIATED_PERSONS' | translate }}:</label>
      </div>
      <div class="list-items-container">
        <div
          ng-repeat="mentionedPerson in data.mostCommonMentionedPersons | limitTo: data.topMentionedPersonsCount"
          style="display: inline"
        >
          <div class="list-item">
            <a
              class="no-link-link"
              ng-click="vm.openNamecheckMediaSearchTabs('google', mentionedPerson, itemid, data.id, null)"
              >{{mentionedPerson}}</a
            >
          </div>
          <!-- <span ng-show="!$last">&nbsp;&nbsp;&nbsp;</span> -->
          <span ng-show="!$last">,</span>
        </div>
        <span
          ng-hide="!data.mostCommonMentionedPersons.length || data.topMentionedPersonsCount >= data.mostCommonMentionedPersons.length"
          ng-click="vm.showMoreAssociatedItems($event, data, 'persons')"
          class="show-more"
        >
          ({{ 'MEDIA_SEARCH_SHOW_MORE' | translate}}..)
        </span>
      </div>
    </div>

    <div
      ng-if="data.mostCommonMentionedItems && data.mostCommonMentionedItems.persons && data.mostCommonMentionedItems.persons.items"
      class="items-container"
    >
      <div class="item-label">
        <label>{{ 'MEDIA_SEARCH_ASSOCIATED_PERSONS' | translate }}:</label>
      </div>
      <div class="list-items-container">
        <div
          ng-repeat="mentionedPerson in data.mostCommonMentionedItems.persons.items | limitTo: data.mostCommonMentionedItems.persons.topCnt"
          style="display: inline"
        >
          <div class="list-item">
            <a
              class="no-link-link"
              ng-click="vm.openNamecheckMediaSearchTabs('google', mentionedPerson, itemid, data.id, null)"
              >{{mentionedPerson}}</a
            >
          </div>
          <!-- <span ng-show="!$last">&nbsp;&nbsp;&nbsp;</span> -->
          <span ng-show="!$last">,</span>
        </div>
        <span
          ng-hide="!data.mostCommonMentionedItems.persons.items.length || data.mostCommonMentionedItems.persons.topCnt >= data.mostCommonMentionedItems.persons.items.length"
          ng-click="vm.showMoreAssociatedItems($event, data, 'persons')"
          class="show-more"
        >
          ({{ 'MEDIA_SEARCH_SHOW_MORE' | translate}}..)
        </span>
      </div>
    </div>

    <div
      ng-if="!data.mostCommonMentionedItems && data.mostCommonMentionedOrgs"
      class="items-container"
    >
      <div class="item-label">
        <label>{{ 'MEDIA_SEARCH_ASSOCIATED_ORGS' | translate }}:</label>
      </div>
      <div class="list-items-container">
        <div
          ng-repeat="mentionedOrg in data.mostCommonMentionedOrgs | limitTo: data.topMentionedOrgsCount"
          style="display: inline"
        >
          <div class="list-item">
            <a
              class="no-link-link"
              ng-click="vm.openNamecheckMediaSearchTabs('google', mentionedOrg, itemid, data.id, null)"
              >{{mentionedOrg}}</a
            >
          </div>
          <!-- <span ng-show="!$last">&nbsp;&nbsp;&nbsp;</span> -->
          <span ng-show="!$last">,</span>
        </div>
        <span
          ng-hide="!data.mostCommonMentionedOrgs.length || data.topMentionedOrgsCount >= data.mostCommonMentionedOrgs.length"
          ng-click="vm.showMoreAssociatedItems($event, data, 'orgs')"
          class="show-more"
        >
          ({{ 'MEDIA_SEARCH_SHOW_MORE' | translate}}..)
        </span>
      </div>
    </div>

    <div
      ng-if="data.mostCommonMentionedItems && data.mostCommonMentionedItems.orgs && data.mostCommonMentionedItems.orgs.items"
      class="items-container"
    >
      <div class="item-label">
        <label>{{ 'MEDIA_SEARCH_ASSOCIATED_ORGS' | translate }}:</label>
      </div>
      <div class="list-items-container">
        <div
          ng-repeat="mentionedOrg in data.mostCommonMentionedItems.orgs.items | limitTo: data.mostCommonMentionedItems.orgs.topCnt"
          style="display: inline"
        >
          <div class="list-item">
            <a
              class="no-link-link"
              ng-click="vm.openNamecheckMediaSearchTabs('google', mentionedOrg, itemid, data.id, null)"
              >{{mentionedOrg}}</a
            >
          </div>
          <!-- <span ng-show="!$last">&nbsp;&nbsp;&nbsp;</span> -->
          <span ng-show="!$last">,</span>
        </div>
        <span
          ng-hide="!data.mostCommonMentionedItems.orgs.items.length || data.mostCommonMentionedItems.orgs.topCnt >= data.mostCommonMentionedItems.orgs.items.length"
          ng-click="vm.showMoreAssociatedItems($event, data, 'orgs')"
          class="show-more"
        >
          ({{ 'MEDIA_SEARCH_SHOW_MORE' | translate}}..)
        </span>
      </div>
    </div>

    <div
      ng-if="!data.mostCommonMentionedItems && data.mostCommonMentionedLocs"
      class="items-container"
    >
      <div class="item-label">
        <label>{{ 'MEDIA_SEARCH_LOCATIONS' | translate }}:</label>
      </div>
      <div class="list-items-container">
        <div
          ng-repeat="mentionedLoc in data.mostCommonMentionedLocs | limitTo: data.topMentionedLocsCount"
          style="display: inline"
        >
          <div class="list-item">
            <span class="mentioned-item">{{mentionedLoc}}</span>
          </div>
          <!-- <span ng-show="!$last">&nbsp;&nbsp;&nbsp;</span> -->
          <!-- <span ng-show="!$last">,</span> -->
        </div>
        <span
          ng-hide="!data.mostCommonMentionedLocs.length || data.topMentionedLocsCount >= data.mostCommonMentionedLocs.length"
          ng-click="vm.showMoreAssociatedItems($event, data, 'locations')"
          class="show-more"
        >
          ({{ 'MEDIA_SEARCH_SHOW_MORE' | translate}}..)
        </span>
      </div>
    </div>

    <div
      ng-if="data.mostCommonMentionedItems && data.mostCommonMentionedItems.locs && data.mostCommonMentionedItems.locs.items"
      class="items-container"
    >
      <div class="item-label">
        <label>{{ 'MEDIA_SEARCH_LOCATIONS' | translate }}:</label>
      </div>
      <div class="list-items-container">
        <div
          ng-repeat="mentionedLoc in data.mostCommonMentionedItems.locs.items | limitTo: data.mostCommonMentionedItems.locs.topCnt"
          style="display: inline"
        >
          <div class="list-item">
            <span class="mentioned-item">{{mentionedLoc}}</span>
          </div>
          <!-- <span ng-show="!$last">&nbsp;&nbsp;&nbsp;</span> -->
          <!-- <span ng-show="!$last">,</span> -->
        </div>
        <span
          ng-hide="!data.mostCommonMentionedItems.locs.items.length || data.mostCommonMentionedItems.locs.topCnt >= data.mostCommonMentionedItems.locs.items.length"
          ng-click="vm.showMoreAssociatedItems($event, data, 'locations')"
          class="show-more"
        >
          ({{ 'MEDIA_SEARCH_SHOW_MORE' | translate}}..)
        </span>
      </div>
    </div>

    <div
      ng-if="!data.mostCommonItems && data.mostCommonRiskPersons"
      class="items-container"
    >
      <div class="item-label">
        <label>{{ 'MEDIA_SEARCH_RISK_PERSONS' | translate }}:</label>
      </div>
      <div class="list-items-container">
        <div
          ng-repeat="riskPerson in data.mostCommonRiskPersons"
          style="display: inline"
        >
          <div class="list-item">
            <a
              class="no-link-link"
              ng-click="vm.openNamecheckMediaSearchTabs('google', riskPerson.name, itemid, data.id, null)"
              >{{riskPerson.name}}</a
            >
            <a
              class="no-link-link"
              ng-if="riskPerson.db_id && (Array.isArray(riskPerson.db_id) ? riskPerson.db_id.length : riskPerson.db_id !== -1)"
              ng-click="vm.openListItemModalInfo('google', riskPerson.db_id)"
              title="{{ 'ID: ' + (Array.isArray(riskPerson.db_id) ? riskOrg.db_id.join(', ') : riskPerson.db_id) }}"
            >
              <i class="material-icons" style="font-size: 20px">info_outline</i>
            </a>
          </div>
          <!-- <span ng-show="!$last">&nbsp;&nbsp;&nbsp;</span> -->
          <span ng-show="!$last">,</span>
        </div>
      </div>
    </div>

    <div
      ng-if="data.mostCommonItems && data.mostCommonItems.riskPersons"
      class="items-container"
    >
      <div class="item-label">
        <label>{{ 'MEDIA_SEARCH_RISK_PERSONS' | translate }}:</label>
      </div>
      <div class="list-items-container">
        <div
          ng-repeat="riskPerson in data.mostCommonItems.riskPersons"
          style="display: inline"
        >
          <div class="list-item">
            <a
              class="no-link-link"
              ng-click="vm.openNamecheckMediaSearchTabs('google', riskPerson.name, itemid, data.id, null)"
              >{{riskPerson.name}}</a
            >
            <a
              class="no-link-link"
              ng-if="riskPerson.db_id && (Array.isArray(riskPerson.db_id) ? riskPerson.db_id.length : riskPerson.db_id !== -1)"
              ng-click="vm.openListItemModalInfo('google', riskPerson.db_id)"
              title="{{ 'ID: ' + (Array.isArray(riskPerson.db_id) ? riskOrg.db_id.join(', ') : riskPerson.db_id) }}"
            >
              <i class="material-icons" style="font-size: 20px">info_outline</i>
            </a>
          </div>
          <!-- <span ng-show="!$last">&nbsp;&nbsp;&nbsp;</span> -->
          <span ng-show="!$last">,</span>
        </div>
      </div>
    </div>

    <div
      ng-if="!data.mostCommonItems && data.mostCommonRiskOrgs"
      class="items-container"
    >
      <div class="item-label">
        <label>{{ 'MEDIA_SEARCH_RISK_ORGS' | translate }}:</label>
      </div>
      <div class="list-items-container">
        <div
          ng-repeat="riskOrg in data.mostCommonRiskOrgs"
          style="display: inline"
        >
          <div class="list-item">
            <a
              class="no-link-link"
              ng-click="vm.openNamecheckMediaSearchTabs('google', riskOrg.name, itemid, data.id, null)"
              >{{riskOrg.name}}</a
            >
            <a
              class="no-link-link"
              ng-if="riskOrg.db_id && (Array.isArray(riskOrg.db_id) ? riskOrg.db_id.length : riskOrg.db_id !== -1)"
              ng-click="vm.openListItemModalInfo('google', riskOrg.db_id)"
              title="{{ 'ID: ' + (Array.isArray(riskOrg.db_id) ? riskOrg.db_id.join(', ') : riskOrg.db_id) }}"
            >
              <i class="material-icons" style="font-size: 20px">info_outline</i>
            </a>
          </div>
          <!-- <span ng-show="!$last">&nbsp;&nbsp;&nbsp;</span> -->
          <span ng-show="!$last">,</span>
        </div>
      </div>
    </div>

    <div
      ng-if="data.mostCommonItems && data.mostCommonItems.riskOrgs"
      class="items-container"
    >
      <div class="item-label">
        <label>{{ 'MEDIA_SEARCH_RISK_ORGS' | translate }}:</label>
      </div>
      <div class="list-items-container">
        <div
          ng-repeat="riskOrg in data.mostCommonItems.riskOrgs"
          style="display: inline"
        >
          <div class="list-item">
            <a
              class="no-link-link"
              ng-click="vm.openNamecheckMediaSearchTabs('google', riskOrg.name, itemid, data.id, null)"
              >{{riskOrg.name}}</a
            >
            <a
              class="no-link-link"
              ng-if="riskOrg.db_id && (Array.isArray(riskOrg.db_id) ? riskOrg.db_id.length : riskOrg.db_id !== -1)"
              ng-click="vm.openListItemModalInfo('google', riskOrg.db_id)"
              title="{{ 'ID: ' + (Array.isArray(riskOrg.db_id) ? riskOrg.db_id.join(', ') : riskOrg.db_id) }}"
            >
              <i class="material-icons" style="font-size: 20px">info_outline</i>
            </a>
          </div>
          <!-- <span ng-show="!$last">&nbsp;&nbsp;&nbsp;</span> -->
          <span ng-show="!$last">,</span>
        </div>
      </div>
    </div>

    <!-- <div ng-if="data.mostCommonNgrams" class="items-container">
        <div class="item-label">
          <label>{{ 'MEDIA_SEARCH_NGRAMS' | translate }}:</label>
        </div>
        <div class="list-items-container">
          <div
            ng-repeat="ngram in data.mostCommonNgrams"
            style="display: inline"
          >
            <div class="list-item">
              <span class="keyword">{{ngram}}</span>
            </div>
            <span ng-show="!$last">,</span>
          </div>
        </div>
      </div> -->

    <div
      ng-if="!data.mostCommonItems && data.mostCommonKeywords"
      class="items-container"
    >
      <div class="item-label">
        <label>{{ 'MEDIA_SEARCH_NGRAMS' | translate }}:</label>
      </div>
      <div class="list-items-container">
        <div
          ng-repeat="keyword in data.mostCommonKeywords"
          style="display: inline"
        >
          <div class="list-item">
            <span class="keyword">{{keyword}}</span>
          </div>
          <!-- <span ng-show="!$last">,</span> -->
        </div>
      </div>
    </div>

    <div
      ng-if="data.mostCommonItems && data.mostCommonItems.keywords"
      class="items-container"
    >
      <div class="item-label">
        <label>{{ 'MEDIA_SEARCH_NGRAMS' | translate }}:</label>
      </div>
      <div class="list-items-container">
        <div
          ng-repeat="keyword in data.mostCommonItems.keywords"
          style="display: inline"
        >
          <div class="list-item">
            <span class="keyword">{{keyword}}</span>
          </div>
          <!-- <span ng-show="!$last">,</span> -->
        </div>
      </div>
    </div>

    <br />
    <br />

    <div>
      <label>{{ 'SUMMARY' | translate }}:</label>
      <ul>
        <li ng-repeat="summaryItem in data.extendedSummary track by $index">
          {{summaryItem }}
        </li>
      </ul>
      <!-- <div>{{ data.extendedSummary }}</div> -->
    </div>
  </div>
</div>
