text: import "@polymer/paper-item/paper-icon-item";
  import "@polymer/paper-item/paper-item-body";
  import { html } from "@polymer/polymer/lib/utils/html-tag";
  import { PolymerElement } from "@polymer/polymer/polymer-element";
  
  import "../../../../components/ha-card";
  import "../../../../layouts/hass-subpage";
  
  import { EventsMixin } from "../../../../mixins/events-mixin";
  import LocalizeMixIn from "../../../../mixins/localize-mixin";
  import "../../../../components/entity/state-badge";
  import { computeEntityRegistryName } from "../../../../data/entity_registry";
  
  /*
   * @appliesMixin LocalizeMixIn
   * @appliesMixin EventsMixin
   */
  class HaCeEntitiesCard extends LocalizeMixIn(EventsMixin(PolymerElement)) {
    static get template() {
      return html`
        <style>
          ha-card {
            margin-top: 8px;
            padding-bottom: 8px;
          }
          paper-icon-item {
            cursor: pointer;
            padding-top: 4px;
            padding-bottom: 4px;
          }
        </style>
        <ha-card header="[[heading]]">
          <template is="dom-repeat" items="[[entities]]" as="entity">
            <paper-icon-item on-click="_openMoreInfo">
              <state-badge
                state-obj="[[_computeStateObj(entity, hass)]]"
                slot="item-icon"
              ></state-badge>
              <paper-item-body>
                <div class="name">[[_computeEntityName(entity, hass)]]</div>
                <div class="secondary entity-id">[[entity.entity_id]]</div>
              </paper-item-body>
            </paper-icon-item>
          </template>
        </ha-card>
      `;
    }
  
    static get properties() {
      return {
        heading: String,
        entities: Array,
        hass: Object,
      };
    }
  
    _computeStateObj(entity, hass) {
      return hass.states[entity.entity_id];
    }
  
    _computeEntityName(entity, hass) {
      return (
        computeEntityRegistryName(hass, entity) ||
        `(${this.localize(
          "ui.panel.config.integrations.config_entry.entity_unavailable"
        )})`
      );
    }
  
    _openMoreInfo(ev) {
      this.fire("hass-more-info", { entityId: ev.model.entity.entity_id });
    }
  }
  
  customElements.define("ha-ce-entities-card", HaCeEntitiesCard);
  