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

<link rel="import" href="../cr_icons_css.html">
<link rel="import" href="../cr_toolbar/cr_toolbar_search_field.html">
<link rel="import" href="../hidden_style_css.html">
<link rel="import" href="../shared_vars_css.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/paper-icon-button/paper-icon-button-light.html">

<dom-module id="cr-toolbar">
  <template>
    <style include="cr-icons cr-hidden-style">
      :host {
        --cr-toolbar-height: 56px;
        --paper-icon-button-ink-color: white;
        align-items: center;
        color: #fff;
        display: flex;
        height: var(--cr-toolbar-height);
      }

      :host-context([dark]) {
        border-bottom: 1px solid var(--cr-separator-color);
      }

      h1 {
        flex: 1;
        font-size: 123%;
        font-weight: 400;
        letter-spacing: .25px;
        line-height: normal;
        margin-inline-start: 6px;
        padding-inline-end: 12px;
      }

      #leftContent {
        /* margin-start here must match margin-end on #rightContent. */
        margin-inline-start: 12px;
        position: relative;
        transition: opacity 100ms;
      }

      #leftSpacer {
        align-items: center;
        display: flex;
        margin-inline-start: 6px;
      }

      #menuButtonContainer {
        height: 32px;
        min-width: 32px;
        padding: 6px 0;
        width: 32px;
      }

      #centeredContent {
        display: flex;
        flex: 1 1 0;
        justify-content: center;
      }

      #rightContent {
        margin-inline-end: 12px;
      }

      :host([narrow]) #centeredContent {
        justify-content: flex-end;
      }

      :host([has-overlay]) {
        transition: visibility var(--cr-toolbar-overlay-animation-duration);
        visibility: hidden;
      }

      :host([narrow][showing-search_]) #leftContent {
        opacity: 0;
        position: absolute;
      }

      :host(:not([narrow])) #leftContent {
        flex: 1 1 var(--cr-toolbar-field-margin, 0);
      }

      :host(:not([narrow])) #rightContent {
        flex: 1 1 0;
        text-align: end;
      }

      #menuPromo {
        align-items: center;
        background: #616161;
        border-radius: 2px;
        color: white;
        display: flex;
        font-size: 92.3%;
        font-weight: 500;
        opacity: 0;
        padding-bottom: 6px;
        padding-inline-end: 12px;
        padding-inline-start: 8px;
        padding-top: 6px;
        position: absolute;
        top: var(--cr-toolbar-height);
        white-space: nowrap;
        z-index: 2;
      }

      #menuPromo::before {
        background: inherit;
        /* Up arrow. 105% in Y coordinates fixes glitch at 110/125% zoom. */
        clip-path: polygon(0 105%, 100% 105%, 50% 0);
        content: '';
        display: block;
        height: 6px;
        left: 10px;
        position: absolute;
        top: -6px;
        width: 12px;
      }

      :host-context([dir=rtl]) #menuPromo::before {
        left: auto;
        right: 10px;
      }

      #closePromo {
        -webkit-appearance: none;
        background: none;
        border: none;
        color: inherit;
        font-size: 20px;  /* Shouldn't change if default font-size changes. */
        line-height: 20px;
        margin-inline-start: 12px;
        padding: 0;
        width: 20px;
      }
    </style>
    <div id="leftContent">
      <div id="leftSpacer">
        <!-- Note: showing #menuPromo relies on this dom-if being [restamp]. -->
        <template is="dom-if" if="[[showMenu]]" restamp>
          <paper-icon-button-light id="menuButtonContainer"
              class="icon-menu-white no-overlap">
            <button id="menuButton"
                on-tap="onMenuTap_"
                title="[[titleIfNotShowMenuPromo_(menuLabel, showMenuPromo)]]"
                aria-label$="[[menuLabel]]">
            </button>
          </paper-icon-button-light>
          <template is="dom-if" if="[[showMenuPromo]]">
            <div id="menuPromo" role="tooltip">
              [[menuPromo]]
              <button id="closePromo" on-tap="onClosePromoTap_"
                  aria-label$="[[closeMenuPromo]]">&#x2715;</button>
            </paper-tooltip>
          </template>
        </template>
        <h1>[[pageName]]</h1>
      </div>
    </div>

    <div id="centeredContent" hidden$="[[!showSearch]]">
      <cr-toolbar-search-field id="search" narrow="[[narrow]]"
          label="[[searchPrompt]]" clear-label="[[clearLabel]]"
          spinner-active="[[spinnerActive]]"
          showing-search="{{showingSearch_}}">
      </cr-toolbar-search-field>
      <iron-media-query query="(max-width: [[narrowThreshold]]px)"
          query-matches="{{narrow}}">
      </iron-media-query>
    </div>

    <div id="rightContent">
      <slot></slot>
    </div>
  </template>
  <script src="cr_toolbar.js"></script>
</dom-module>