/**
 * @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">
      /* Workaround for empty style block - see https://github.com/Polymer/tools/issues/408 */
    </style>
    <style include="gr-menu-page-styles">
      /* Workaround for empty style block - see https://github.com/Polymer/tools/issues/408 */
    </style>
    <style include="gr-page-nav-styles">
      gr-dropdown-list {
        --trigger-style: {
          text-transform: none;
        }
      }
      .breadcrumbText {
        /* Same as dropdown trigger so chevron spacing is consistent. */
        padding: 5px 4px;
      }
      iron-icon {
        margin: 0 var(--spacing-xs);
      }
      .breadcrumb {
        align-items: center;
        display: flex;
      }
      .mainHeader {
        align-items: baseline;
        border-bottom: 1px solid var(--border-color);
        display: flex;
      }
      .selectText {
        display: none;
      }
      .selectText.show {
        display: inline-block;
      }
      main.breadcrumbs:not(.table) {
        margin-top: var(--spacing-l);
      }
    </style>
    <gr-page-nav class="navStyles">
      <ul class="sectionContent">
        <template id="adminNav" is="dom-repeat" items="[[_filteredLinks]]">
          <li class\$="sectionTitle [[_computeSelectedClass(item.view, params)]]">
            <a class="title" href="[[_computeLinkURL(item)]]" rel="noopener">[[item.name]]</a>
          </li>
          <template is="dom-repeat" items="[[item.children]]" as="child">
            <li class\$="[[_computeSelectedClass(child.view, params)]]">
              <a href\$="[[_computeLinkURL(child)]]" rel="noopener">[[child.name]]</a>
            </li>
          </template>
          <template is="dom-if" if="[[item.subsection]]">
            <!--If a section has a subsection, render that.-->
            <li class\$="[[_computeSelectedClass(item.subsection.view, params)]]">
              <a class="title" href\$="[[_computeLinkURL(item.subsection)]]" rel="noopener">
                [[item.subsection.name]]</a>
            </li>
            <!--Loop through the links in the sub-section.-->
            <template is="dom-repeat" items="[[item.subsection.children]]" as="child">
              <li class\$="subsectionItem [[_computeSelectedClass(child.view, params, child.detailType)]]">
                <a href\$="[[_computeLinkURL(child)]]">[[child.name]]</a>
              </li>
            </template>
          </template>
        </template>
      </ul>
    </gr-page-nav>
    <template is="dom-if" if="[[_subsectionLinks.length]]">
      <section class="mainHeader">
        <span class="breadcrumb">
          <span class="breadcrumbText">[[_breadcrumbParentName]]</span>
          <iron-icon icon="gr-icons:chevron-right"></iron-icon>
        </span>
        <gr-dropdown-list lowercase="" id="pageSelect" value="[[_computeSelectValue(params)]]" items="[[_subsectionLinks]]" on-value-change="_handleSubsectionChange">
        </gr-dropdown-list>
      </section>
    </template>
    <template is="dom-if" if="[[_showRepoList]]" restamp="true">
      <main class="table">
        <gr-repo-list class="table" params="[[params]]"></gr-repo-list>
      </main>
    </template>
    <template is="dom-if" if="[[_showGroupList]]" restamp="true">
      <main class="table">
        <gr-admin-group-list class="table" params="[[params]]">
        </gr-admin-group-list>
      </main>
    </template>
    <template is="dom-if" if="[[_showPluginList]]" restamp="true">
      <main class="table">
        <gr-plugin-list class="table" params="[[params]]"></gr-plugin-list>
      </main>
    </template>
    <template is="dom-if" if="[[_showRepoMain]]" restamp="true">
      <main class="breadcrumbs">
        <gr-repo repo="[[params.repo]]"></gr-repo>
      </main>
    </template>
    <template is="dom-if" if="[[_showGroup]]" restamp="true">
      <main class="breadcrumbs">
        <gr-group group-id="[[params.groupId]]" on-name-changed="_updateGroupName"></gr-group>
      </main>
    </template>
    <template is="dom-if" if="[[_showGroupMembers]]" restamp="true">
      <main class="breadcrumbs">
        <gr-group-members group-id="[[params.groupId]]"></gr-group-members>
      </main>
    </template>
    <template is="dom-if" if="[[_showRepoDetailList]]" restamp="true">
      <main class="table breadcrumbs">
        <gr-repo-detail-list params="[[params]]" class="table"></gr-repo-detail-list>
      </main>
    </template>
    <template is="dom-if" if="[[_showGroupAuditLog]]" restamp="true">
      <main class="table breadcrumbs">
        <gr-group-audit-log group-id="[[params.groupId]]" class="table"></gr-group-audit-log>
      </main>
    </template>
    <template is="dom-if" if="[[_showRepoCommands]]" restamp="true">
      <main class="breadcrumbs">
        <gr-repo-commands repo="[[params.repo]]"></gr-repo-commands>
      </main>
    </template>
    <template is="dom-if" if="[[_showRepoAccess]]" restamp="true">
      <main class="breadcrumbs">
        <gr-repo-access path="[[path]]" repo="[[params.repo]]"></gr-repo-access>
      </main>
    </template>
    <template is="dom-if" if="[[_showRepoDashboards]]" restamp="true">
      <main class="table breadcrumbs">
        <gr-repo-dashboards repo="[[params.repo]]"></gr-repo-dashboards>
      </main>
    </template>
    <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
    <gr-js-api-interface id="jsAPI"></gr-js-api-interface>
`;