/**
 * @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">
      .prefsButton {
        float: right;
      }
      .collapseToggleButton {
        text-decoration: none;
      }
      .patchInfoOldPatchSet.patchInfo-header {
        background-color: var(--emphasis-color);
      }
      .patchInfo-header {
        align-items: center;
        border-top: 1px solid var(--border-color);
        display: flex;
        padding: var(--spacing-s) var(--spacing-l);
      }
      .patchInfo-left {
        align-items: baseline;
        display: flex;
      }
      .patchInfoContent {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
      }
      .patchInfo-header .container.latestPatchContainer {
        display: none;
      }
      .patchInfoOldPatchSet .container.latestPatchContainer {
        display: initial;
      }
      .latestPatchContainer a {
        text-decoration: none;
      }
      gr-editable-label.descriptionLabel {
        max-width: 100%;
      }
      .mobile {
        display: none;
      }
      .patchInfo-header .container {
        align-items: center;
        display: flex;
      }
      .downloadContainer,
      .uploadContainer,
      .includedInContainer {
        margin-right: 16px;
      }
      .includedInContainer.hide,
      .uploadContainer.hide {
        display: none;
      }
      .rightControls {
        align-self: flex-end;
        margin: auto 0 auto auto;
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        font-weight: var(--font-weight-normal);
        justify-content: flex-end;
      }
      #collapseBtn,
      .expanded #expandBtn,
      .fileViewActions{
        display: none;
      }
      .expanded #expandBtn {
        display: none;
      }
      gr-linked-chip {
        --linked-chip-text-color: var(--primary-text-color);
      }
      .expanded #collapseBtn,
      .openFile .fileViewActions {
        align-items: center;
        display: flex;
      }
      .rightControls gr-button,
      gr-patch-range-select {
        margin: 0 -4px;
      }
      .fileViewActions gr-button {
        margin: 0;
        --gr-button: {
          padding: 2px 4px;
        }
      }
      .editMode .hideOnEdit {
        display: none;
      }
      .showOnEdit {
        display: none;
      }
      .editMode .showOnEdit {
        display: initial;
      }
      .editMode .showOnEdit.flexContainer {
        align-items: center;
        display: flex;
      }
      .label {
        font-weight: var(--font-weight-bold);
        margin-right: 24px;
      }
      gr-commit-info,
      gr-edit-controls {
        margin-right: -5px;
      }
      .fileViewActionsLabel {
        margin-right: var(--spacing-xs);
      }
      @media screen and (max-width: 50em) {
        .patchInfo-header .desktop {
          display: none;
        }
      }
    </style>
    <div class\$="patchInfo-header [[_computeEditModeClass(editMode)]] [[_computePatchInfoClass(patchNum, allPatchSets)]]">
      <div class="patchInfo-left">
        <div class="patchInfoContent">
          <gr-patch-range-select id="rangeSelect" change-comments="[[changeComments]]" change-num="[[changeNum]]" patch-num="[[patchNum]]" base-patch-num="[[basePatchNum]]" available-patches="[[allPatchSets]]" revisions="[[change.revisions]]" revision-info="[[revisionInfo]]" on-patch-range-change="_handlePatchChange">
          </gr-patch-range-select>
          <span class="separator"></span>
          <gr-commit-info change="[[change]]" server-config="[[serverConfig]]" commit-info="[[commitInfo]]"></gr-commit-info>
          <span class="container latestPatchContainer">
            <span class="separator"></span>
            <a href\$="[[changeUrl]]">Go to latest patch set</a>
          </span>
          <span class="container descriptionContainer hideOnEdit">
            <span class="separator"></span>
            <template is="dom-if" if="[[_patchsetDescription]]">
              <gr-linked-chip id="descriptionChip" text="[[_patchsetDescription]]" removable="[[!_descriptionReadOnly]]" on-remove="_handleDescriptionRemoved"></gr-linked-chip>
            </template>
            <template is="dom-if" if="[[!_patchsetDescription]]">
              <gr-editable-label id="descriptionLabel" uppercase="" class="descriptionLabel" label-text="Add patchset description" value="[[_patchsetDescription]]" placeholder="[[_computeDescriptionPlaceholder(_descriptionReadOnly)]]" read-only="[[_descriptionReadOnly]]" on-changed="_handleDescriptionChanged"></gr-editable-label>
            </template>
          </span>
        </div>
      </div>
      <div class\$="rightControls [[_computeExpandedClass(filesExpanded)]]">
        <span class="showOnEdit flexContainer">
          <gr-edit-controls id="editControls" patch-num="[[patchNum]]" change="[[change]]"></gr-edit-controls>
          <span class="separator"></span>
        </span>
        <span class\$="[[_computeUploadHelpContainerClass(change, account)]]">
          <gr-button link="" class="upload" on-click="_handleUploadTap">Update Change</gr-button>
        </span>
        <span class="downloadContainer desktop">
          <gr-button link="" class="download" title="[[createTitle(Shortcut.OPEN_DOWNLOAD_DIALOG,
                ShortcutSection.ACTIONS)]]" on-click="_handleDownloadTap">Download</gr-button>
        </span>
        <span class\$="includedInContainer [[_hideIncludedIn(change)]] desktop">
          <gr-button link="" class="includedIn" on-click="_handleIncludedInTap">Included In</gr-button>
        </span>
        <template is="dom-if" if="[[_fileListActionsVisible(shownFileCount, _maxFilesForBulkActions)]]">
          <gr-button id="expandBtn" link="" title="[[createTitle(Shortcut.EXPAND_ALL_DIFF_CONTEXT,
                ShortcutSection.DIFFS)]]" on-click="_expandAllDiffs">Expand All</gr-button>
          <gr-button id="collapseBtn" link="" on-click="_collapseAllDiffs">Collapse All</gr-button>
        </template>
        <template is="dom-if" if="[[!_fileListActionsVisible(shownFileCount, _maxFilesForBulkActions)]]">
          <div class="warning">
            Bulk actions disabled because there are too many files.
          </div>
        </template>
        <div class="fileViewActions">
          <span class="separator"></span>
          <span class="fileViewActionsLabel">Diff view:</span>
          <gr-diff-mode-selector id="modeSelect" mode="{{diffViewMode}}" save-on-change="[[!diffPrefsDisabled]]"></gr-diff-mode-selector>
          <span id="diffPrefsContainer" class="hideOnEdit" hidden\$="[[_computePrefsButtonHidden(diffPrefs, diffPrefsDisabled)]]" hidden="">
            <gr-button link="" has-tooltip="" title="Diff preferences" class="prefsButton desktop" on-click="_handlePrefsTap"><iron-icon icon="gr-icons:settings"></iron-icon></gr-button>
          </span>
        </div>
      </div>
    </div>
    <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
`;