<link rel="import" href="chrome://resources/html/polymer.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.html">
<link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html">

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

      h1 {
        -webkit-margin-start: 6px;
        -webkit-padding-end: 12px;
        flex: 1;
        font-size: 123%;
        font-weight: 400;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }

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

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

      #menuButton {
        height: 32px;
        margin-bottom: 6px;
        margin-top: 6px;
        min-width: 32px;
        padding: 6px;
        width: 32px;
      }

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

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

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

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

      :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 {
        -webkit-padding-end: 12px;
        -webkit-padding-start: 8px;
        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-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;
        left: 10px;
        height: 6px;
        position: absolute;
        top: -6px;
        width: 12px;
      }

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

      #closePromo {
        -webkit-appearance: none;
        -webkit-margin-start: 12px;
        background: none;
        border: none;
        color: inherit;
        font-size: 20px;  /* Shouldn't change if default font-size changes. */
        line-height: 20px;
        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 id="menuButton" icon="cr20:menu"
              on-tap="onMenuTap_"
              title="[[titleIfNotShowMenuPromo_(menuLabel, showMenuPromo)]]"
              aria-label$="[[menuLabel]]">
          </paper-icon-button>
          <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">
      <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: 900px)" query-matches="{{narrow}}">
      </iron-media-query>
    </div>

    <div id="rightContent">
      <content select=".more-actions"></content>
    </div>
  </template>
  <script src="cr_toolbar.js"></script>
</dom-module>