<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_components/managed_footnote/managed_footnote.html">
<link rel="import" href="chrome://resources/cr_elements/cr_container_shadow_behavior.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-announcer/iron-a11y-announcer.html">
<link rel="import" href="item.html">

<dom-module id="extensions-item-list">
  <template>
    <style include="cr-shared-style">
      .items-container,
      #content-wrapper {
        --extensions-card-width: 400px;
      }

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

      #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;
      }

      .items-container {
        --grid-gutter: 12px;
        --max-columns: 3;
        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));
      }

      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">
        <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_]]">
          <!-- 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}}"
              notify-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}}"
                notify-dom-change>
              <extensions-item id="[[item.id]]" data="[[item]]"
                  delegate="[[delegate]]" in-dev-mode="[[inDevMode]]">
              </extensions-item>
            </template>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script src="item_list.js"></script>
</dom-module>