<div class="umb-content-grid">

   <div
      class="umb-content-grid__item"
      ng-repeat="item in content"
      ng-class="{'-selected': item.selected}"
      ng-click="clickItem(item, $event, $index)">
      
      <i ng-if="item.selected" class="icon-check umb-content-grid__checkmark"></i>

      <div class="umb-content-grid__icon-container">
          <i class="umb-content-grid__icon {{ item.icon }}" ng-class="{'-light': !item.published && item.updater != null}"></i>
      </div>

      <div class="umb-content-grid__content">

          <div class="umb-content-grid__item-name" ng-click="clickItemName(item, $event, $index)" ng-class="{'-light': !item.published && item.updater != null}">{{ item.name }}</div>

          <ul class="umb-content-grid__details-list" ng-class="{'-light': !item.published&& item.updater != null}">
              <li class="umb-content-grid__details-item" ng-repeat="property in contentProperties">
                  <div class="umb-content-grid__details-label">{{ property.header }}:</div>
                  <div class="umb-content-grid__details-value">{{ item[property.alias] }}</div>
              </li>
          </ul>

      </div>

   </div>

    <umb-empty-state
       ng-if="!content"
       position="center">
       <localize key="content_noItemsToShow">There are no items to show</localize>
    </umb-empty-state>

</div>