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

<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/cr/ui.html">
<link rel="import" href="chrome://resources/html/cr/ui/command.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-media-query/iron-media-query.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-pages/iron-pages.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-scroll-target-behavior/iron-scroll-target-behavior.html">
<link rel="import" href="chrome://history/history_list.html">
<link rel="import" href="chrome://history/history_toolbar.html">
<link rel="import" href="chrome://history/query_manager.html">
<link rel="import" href="chrome://history/router.html">
<link rel="import" href="chrome://history/shared_style.html">
<link rel="import" href="chrome://history/side_bar.html">

<!-- Lazy loaded: history-synced-device-manager, cr-drawer. -->

<dom-module id="history-app">
  <template>
    <style include="shared-style">
      :host {
        color: var(--cr-primary-text-color);
        display: block;
        height: 100%;
        line-height: 1.54;  /* 20px. */
        overflow: hidden;
      }

      history-toolbar {
        background: var(--md-toolbar-color);
      }

      /* Sizing this with flex causes slow load performance, see
       * crbug.com/618153. TODO(dbeam): is this still an issue? */
      #main-container {
        height: calc(100% - var(--toolbar-height));
        position: relative;
      }

      #content-side-bar {
        float: left;
      }

      :host-context([dir='rtl']) #content-side-bar {
        float: right;
      }

      #content,
      #content > * {
        height: 100%;
      }

      #drop-shadow {
        @apply --cr-container-shadow;
      }

      :host([toolbar-shadow_]) #drop-shadow {
        opacity: var(--cr-container-shadow-max-opacity);
      }
    </style>
    <history-query-manager query-state="{{queryState_}}"
        query-result="[[queryResult_]]"
        router="[[$$('#router')]]">
    </history-query-manager>
    <history-router id="router"
        selected-page="{{selectedPage_}}"
        query-state="[[queryState_]]">
    </history-router>
    <history-toolbar id="toolbar"
        has-drawer="[[hasDrawer_]]"
        has-more-results="[[!queryResult_.info.finished]]"
        query-info="[[queryResult_.info]]"
        querying="[[queryState_.querying]]"
        search-term="[[queryState_.searchTerm]]"
        show-menu-promo="[[showMenuPromo_]]"
        spinner-active="[[shouldShowSpinner_(queryState_.querying,
                                             queryState_.incremental,
                                             queryState_.searchTerm)]]">
    </history-toolbar>

    <div id="drop-shadow"></div>
    <div id="main-container">
      <history-side-bar id="content-side-bar" selected-page="{{selectedPage_}}"
          show-footer="[[showSidebarFooter]]"
          hidden$="[[hasDrawer_]]">
      </history-side-bar>
      <iron-pages id="content" attr-for-selected="path"
          fallback-selection="history"
          selected="[[getSelectedPage_(selectedPage_, items)]]"
          selected-item="{{scrollTarget}}"
          items="{{items}}">
        <history-list id="history" query-state="[[queryState_]]"
            searched-term="[[queryResult_.info.term]]"
            query-result="[[queryResult_]]"
            path="history">
        </history-list>
        <template is="dom-if" if="[[syncedTabsSelected_(selectedPage_)]]">
          <history-synced-device-manager id="synced-devices"
              session-list="[[queryResult_.sessionList]]"
              search-term="[[queryState_.searchTerm]]"
              sign-in-state="[[isUserSignedIn_]]"
              path="syncedTabs">
          </history-synced-device-manager>
        </template>
      </iron-pages>
    </div>

    <cr-lazy-render id="drawer">
      <template>
        <cr-drawer heading="$i18n{title}" align="$i18n{textdirection}"
            swipe-open>
          <history-side-bar id="drawer-side-bar" class="drawer-content"
              selected-page="{{selectedPage_}}"
              show-footer="[[showSidebarFooter]]">
          </history-side-bar>
        </cr-drawer>
      </template>
    </cr-lazy-render>

    <iron-media-query query="(max-width: 1023px)"
        query-matches="{{hasDrawer_}}">
    </iron-media-query>
  </template>
  <script src="chrome://history/app.js"></script>
</dom-module>