<style include="shared-style">
  .items-container,
  #content-wrapper {
    --extensions-card-width: 400px;
  }

  #container {
    box-sizing: border-box;
    height: 100%;
    overflow: overlay;
  }

  #content-wrapper {
    min-width: var(--extensions-card-width);
    padding: 24px 60px 64px;
  }

  .empty-list-message {
    color: #6e6e6e;
    font-size: 123%;  /* Should be 16px when 100% is 13px. */
    font-weight: 500;
    margin-top: 80px;
    text-align: center;
  }

  @media (prefers-color-scheme: dark) {
    .empty-list-message {
      color: var(--cr-secondary-text-color);
    }
  }

  .items-container {
    --grid-gutter: 12px;
    display: grid;
    grid-column-gap: var(--grid-gutter);
    grid-row-gap: var(--grid-gutter);
    grid-template-columns: repeat(auto-fill, var(--extensions-card-width));
    justify-content: center;
    margin: auto;
    max-width: calc(var(--extensions-card-width) * var(--max-columns) +
        var(--grid-gutter) * var(--max-columns));
  }

  #checkup-container {
    grid-column: 1 / -1;
    /* The checkup card should be at least as tall as an extensions item card.*/
    min-height: var(--extensions-card-height);
  }

  extensions-item {
    grid-column-start: auto;
    grid-row-start: auto;
  }

  #app-title {
    color: var(--cr-primary-text-color);
    font-size: 123%;
    font-weight: 400;
    letter-spacing: .25px;
    margin-bottom: 12px;
    margin-top: 21px;
    padding-bottom: 4px;
    padding-top: 8px;
  }

  managed-footnote {
    border-top: none;
    /* #content-wrapper has a 24px margin-top. This overrides that
     * margin-top, so the only space left is this element's 12px
     * padding-bottom.
     */
    margin-bottom: -24px;
    padding-bottom: 12px;
     padding-top: 12px;
    /* The next element spills over this element. This ensures the link
     * is clickable. */
    z-index: 1;
  }
</style>
<div id="container">
  <managed-footnote hidden="[[filter]]"></managed-footnote>
  <div id="content-wrapper" style="--max-columns: [[maxColumns_]];">
    <div id="no-items" class="empty-list-message"
        hidden$="[[!shouldShowEmptyItemsMessage_(
            apps.length, extensions.length)]]">
      <span on-click="onNoExtensionsTap_">
        $i18nRaw{noExtensionsOrApps}
      </span>
    </div>
    <div id="no-search-results" class="empty-list-message"
        hidden$="[[!shouldShowEmptySearchMessage_(
            shownAppsCount_, shownExtensionsCount_, apps, extensions)]]">
      <span>$i18n{noSearchResults}</span>
    </div>
    <div class="items-container" hidden="[[!shownExtensionsCount_]]">
      <div id="checkup-container" hidden="[[!showCheckup_]]">
        <extensions-checkup id="checkup" slot="view">
        </extensions-checkup>
      </div>
      <!-- Render only a few items first, to improve initial render time,
        then render the remaining items on a different frame. Value of 3
        was chosen by experimentation, and it is a good trade-off between
        initial render time and total render time. -->
      <template is="dom-repeat" items="[[extensions]]" initial-count="3"
          filter="[[computedFilter_]]"
          rendered-item-count="{{shownExtensionsCount_::dom-change}}">
        <extensions-item id="[[item.id]]" data="[[item]]"
            delegate="[[delegate]]" in-dev-mode="[[inDevMode]]">
        </extensions-item>
      </template>
    </div>
    <div hidden="[[!shownAppsCount_]]">
      <!-- app-title needs to left-align with the grid content below, and
           the easiest way to achieve this is to make it a grid as well. -->
      <h2 id="app-title" class="items-container">$i18n{appsTitle}</h2>
      <div class="items-container">
        <template is="dom-repeat" items="[[apps]]" initial-count="3"
            filter="[[computedFilter_]]"
            rendered-item-count="{{shownAppsCount_::dom-change}}">
          <extensions-item id="[[item.id]]" data="[[item]]"
              delegate="[[delegate]]" in-dev-mode="[[inDevMode]]">
          </extensions-item>
        </template>
      </div>
    </div>
  </div>
</div>