<etools-data-table-header
  id="listHeader"
  label="[[visibleRange.0]]-[[visibleRange.1]] of [[totalResults]] results to show"
>
  <etools-data-table-column class="col-2" field="number" sortable> Reference # </etools-data-table-column>
  <etools-data-table-column class="col-4" field="partner_name" sortable> Government Partner </etools-data-table-column>
  <etools-data-table-column class="flex-c" field="created_at"> Years </etools-data-table-column>
</etools-data-table-header>

<template id="rows" is="dom-repeat" items="[[governments]]" as="entry">
  <etools-data-table-row details-opened="[[detailsOpened]]">
    <div slot="row-data">
      <span class="col-data"> [[entry.number]] </span>
      <span class="col-data"> [[entry.partner_name]] </span>
      <span class="col-data"> [[entry.years]] </span>
    </div>
    <div slot="row-data-details">
      <div class="row-details-content">
        <span class="rdc-title">Unicef Focal Point</span>
        <span>[[entry.unicef_focal_point_names]]</span>
      </div>
      <div class="row-details-content">
        <span class="rdc-title">Sectors</span>
        <span>[[entry.sectors]]</span>
      </div>
    </div>
  </etools-data-table-row>
</template>

<etools-data-table-footer
  page-size="[[pageSize]]"
  page-number="[[pageNumber]]"
  total-results="[[totalResults]]"
  visible-range="{{visibleRange}}"
  on-page-size-changed="_pageSizeSelected"
  on-page-number-changed="_pageNumberChanged"
>
</etools-data-table-footer>