/**
 * @license
 * Copyright (C) 2020 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import {html} from '@polymer/polymer/lib/utils/html-tag.js';

export const htmlTemplate = html`
    <style include="shared-styles">
      :host {
        display: block;
      }
      nav {
        align-items: center;
        display: flex;
      }
      .bigTitle {
        color: var(--header-text-color);
        font-size: var(--header-title-font-size);
        text-decoration: none;
      }
      .bigTitle:hover {
        text-decoration: underline;
      }
      .titleText::before {
        background-image: var(--header-icon);
        background-size: var(--header-icon-size) var(--header-icon-size);
        background-repeat: no-repeat;
        content: "";
        display: inline-block;
        height: var(--header-icon-size);
        margin-right: calc(var(--header-icon-size) / 4);
        vertical-align: text-bottom;
        width: var(--header-icon-size);
      }
      .titleText::after {
        content: var(--header-title-content);
      }
      ul {
        list-style: none;
        padding-left: var(--spacing-l);
      }
      .links > li {
        cursor: default;
        display: inline-block;
        padding: 0;
        position: relative;
      }
      .linksTitle {
        display: inline-block;
        font-weight: var(--font-weight-bold);
        position: relative;
        text-transform: uppercase;
      }
      .linksTitle:hover {
        opacity: .75;
      }
      .rightItems {
        align-items: center;
        display: flex;
        flex: 1;
        justify-content: flex-end;
      }
      .rightItems gr-endpoint-decorator:not(:empty) {
        margin-left: var(--spacing-l);
      }
      gr-smart-search {
        flex-grow: 1;
        margin: 0 var(--spacing-m);
        max-width: 500px;
      }
      gr-dropdown,
      .browse {
        padding: var(--spacing-m);
      }
      gr-dropdown {
        --gr-dropdown-item: {
          color: var(--primary-text-color);
        }
      }
      .settingsButton {
        margin-left: var(--spacing-m);
      }
      .browse {
        color: var(--header-text-color);
        /* Same as gr-button */
        margin: 5px 4px;
        text-decoration: none;
      }
      .invisible,
      .settingsButton,
      gr-account-dropdown {
        display: none;
      }
      :host([loading]) .accountContainer,
      :host([logged-in]) .loginButton,
      :host([logged-in]) .registerButton {
        display: none;
      }
      :host([logged-in]) .settingsButton,
      :host([logged-in]) gr-account-dropdown {
        display: inline;
      }
      .accountContainer {
        align-items: center;
        display: flex;
        margin: 0 calc(0 - var(--spacing-m)) 0 var(--spacing-m);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .loginButton, .registerButton {
        padding: var(--spacing-m) var(--spacing-l);
      }
      .dropdown-trigger {
        text-decoration: none;
      }
      .dropdown-content {
        background-color: var(--view-background-color);
        box-shadow: var(--elevation-level-2);
      }
      /*
       * We are not using :host to do this, because :host has a lowest css priority
       * compared to others. This means that using :host to do this would break styles.
       */
      .linksTitle,
      .bigTitle,
      .loginButton,
      .registerButton,
      iron-icon,
      gr-account-dropdown {
        color: var(--header-text-color);
      }
      #mobileSearch {
        display: none;
      }
      @media screen and (max-width: 50em) {
        .bigTitle {
          font-family: var(--header-font-family);
          font-size: var(--font-size-h3);
          font-weight: var(--font-weight-h3);
          line-height: var(--line-height-h3);
        }
        gr-smart-search,
        .browse,
        .rightItems .hideOnMobile,
        .links > li.hideOnMobile {
          display: none;
        }
        #mobileSearch {
          display: inline-flex;
        }
        .accountContainer {
          margin-left: var(--spacing-m) !important;
        }
        gr-dropdown {
          padding: var(--spacing-m) 0 var(--spacing-m) var(--spacing-m);
        }
      }
    </style>
    <nav>
      <a href\$="[[_computeRelativeURL('/')]]" class="bigTitle">
        <gr-endpoint-decorator name="header-title">
          <span class="titleText"></span>
        </gr-endpoint-decorator>
      </a>
      <ul class="links">
        <template is="dom-repeat" items="[[_links]]" as="linkGroup">
          <li class\$="[[_computeLinkGroupClass(linkGroup)]]">
            <gr-dropdown link="" down-arrow="" items="[[linkGroup.links]]" horizontal-align="left">
              <span class="linksTitle" id="[[linkGroup.title]]">
                [[linkGroup.title]]
              </span>
            </gr-dropdown>
          </li>
        </template>
      </ul>
      <div class="rightItems">
        <gr-endpoint-decorator class="hideOnMobile" name="header-small-banner"></gr-endpoint-decorator>
        <gr-smart-search id="search" search-query="{{searchQuery}}"></gr-smart-search>
        <gr-endpoint-decorator class="hideOnMobile" name="header-browse-source"></gr-endpoint-decorator>
        <div class="accountContainer" id="accountContainer">
          <iron-icon id="mobileSearch" icon="gr-icons:search" on-tap="_onMobileSearchTap"></iron-icon>
          <div class\$="[[_computeIsInvisible(_registerURL)]]">
            <a class="registerButton" href\$="[[_registerURL]]">
              [[_registerText]]
            </a>
          </div>
          <a class="loginButton" href\$="[[loginUrl]]">Sign in</a>
          <a class="settingsButton" href\$="[[_generateSettingsLink()]]" title="Settings">
            <iron-icon icon="gr-icons:settings"></iron-icon>
          </a>
          <gr-account-dropdown account="[[_account]]"></gr-account-dropdown>
        </div>
      </div>
    </nav>
    <gr-js-api-interface id="jsAPI"></gr-js-api-interface>
    <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
`;