import { html } from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
export function getTemplate() {
    return html `<!--_html_template_start_--><style include="cr-shared-style settings-shared">
  :host {
    background-color: var(--cr-card-background-color);
    box-shadow: var(--cr-card-shadow);
    border-radius: var(--cr-card-border-radius);
    overflow: hidden;
  }

  hr {
    border: none;
    border-top: 1px solid var(--cr-separator-color);
    margin: -1px 20px 0;
  }

  .chips-container {
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
  }

  cr-button {
    --chip-icon-size_: var(--cr-icon-size);
    --cr-button-border-color: transparent;
    --cr-button-text-color: var(--cr-primary-text-color);
    --cr-button-height: 36px;
    border-radius: 4px;
    display: flex;
    justify-content: flex-start;
    font-size: 12px;
  }

  .button-content {
    display: flex;
    align-items: center;
    line-height: normal;
  }

  cr-button span {
    font-weight: normal;
  }

  cr-button cr-icon {
    width: var(--chip-icon-size_);
    height: var(--chip-icon-size_);
    margin-inline-end: 10px;
    --iron-icon-fill-color: var(--color-sys-light-on-surface-variant);
  }

  .counter {
    color: var(--cr-secondary-text-color);
    margin-inline-start: 2px;
  }
</style>

<cr-link-row label="[[cardTitle]]" external="[[isExternal]]"
    on-click="onDataCategoryClick_">
</cr-link-row>
<hr>
<div class="chips-container">
  <template is="dom-repeat" items="[[chips]]">
    <cr-button on-click="onDataChipClick_">
      <div class="button-content">
        <cr-icon icon="[[item.icon]]"></cr-icon>
        <span>[[item.label]]</span>
        <span class="counter" hidden$="[[!item.count]]">
          ([[item.count]])
        </span>
      </div>
    </cr-button>
  </template>
</div>
<!--_html_template_end_-->`;
}
