/**
 * @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;
      }
      h3 {
        margin: var(--spacing-m) 0 0;
      }
      section {
        margin-bottom: 1.4em; /* Same as line height for collapse purposes */
      }
      a {
        display: block;
      }
      .changeContainer,
      a {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .changeContainer {
        display: flex;
      }
      .changeContainer.thisChange:before {
        content: '➔';
        width: 1.2em;
      }
      h4,
      section div {
        display: flex;
      }
      h4:before,
      section div:before {
        content: ' ';
        flex-shrink: 0;
        width: 1.2em;
      }
      .note {
        color: var(--error-text-color);
      }
      .relatedChanges a {
        display: inline-block;
      }
      .strikethrough {
        color: var(--deemphasized-text-color);
        text-decoration: line-through;
      }
      .status {
        color: var(--deemphasized-text-color);
        font-weight: var(--font-weight-bold);
        margin-left: var(--spacing-xs);
      }
      .notCurrent {
        color: #e65100;
      }
      .indirectAncestor {
        color: #33691e;
      }
      .submittable {
        color: #1b5e20;
      }
      .submittableCheck {
        color: var(--vote-text-color-recommended);
        display: none;
      }
      .submittableCheck.submittable {
        display: inline;
      }
      .hidden,
      .mobile {
        display: none;
      }
       @media screen and (max-width: 60em) {
        .mobile {
          display: block;
        }
      }
    </style>
    <div>
      <section class="relatedChanges" hidden\$="[[!_relatedResponse.changes.length]]" hidden="">
        <h4>Relation chain</h4>
        <template is="dom-repeat" items="[[_relatedResponse.changes]]" as="related">
          <div class\$="rightIndent [[_computeChangeContainerClass(change, related)]]">
            <a href\$="[[_computeChangeURL(related._change_number, related.project, related._revision_number)]]" class\$="[[_computeLinkClass(related)]]" title\$="[[related.commit.subject]]">
              [[related.commit.subject]]
            </a>
            <span class\$="[[_computeChangeStatusClass(related)]]">
              ([[_computeChangeStatus(related)]])
            </span>
          </div>
        </template>
      </section>
      <section id="submittedTogether" class\$="[[_computeSubmittedTogetherClass(_submittedTogether)]]">
        <h4>Submitted together</h4>
        <template is="dom-repeat" items="[[_submittedTogether.changes]]" as="related">
          <div class\$="[[_computeChangeContainerClass(change, related)]]">
            <a href\$="[[_computeChangeURL(related._number, related.project)]]" class\$="[[_computeLinkClass(related)]]" title\$="[[related.project]]: [[related.branch]]: [[related.subject]]">
              [[related.project]]: [[related.branch]]: [[related.subject]]
            </a>
            <span tabindex="-1" title="Submittable" class\$="submittableCheck [[_computeLinkClass(related)]]">✓</span>
          </div>
        </template>
        <template is="dom-if" if="[[_submittedTogether.non_visible_changes]]">
          <div class="note">
            [[_computeNonVisibleChangesNote(_submittedTogether.non_visible_changes)]]
          </div>
        </template>
      </section>
      <section hidden\$="[[!_sameTopic.length]]" hidden="">
        <h4>Same topic</h4>
        <template is="dom-repeat" items="[[_sameTopic]]" as="change">
          <div>
            <a href\$="[[_computeChangeURL(change._number, change.project)]]" class\$="[[_computeLinkClass(change)]]" title\$="[[change.project]]: [[change.branch]]: [[change.subject]]">
              [[change.project]]: [[change.branch]]: [[change.subject]]
            </a>
          </div>
        </template>
      </section>
      <section hidden\$="[[!_conflicts.length]]" hidden="">
        <h4>Merge conflicts</h4>
        <template is="dom-repeat" items="[[_conflicts]]" as="change">
          <div>
            <a href\$="[[_computeChangeURL(change._number, change.project)]]" class\$="[[_computeLinkClass(change)]]" title\$="[[change.subject]]">
              [[change.subject]]
            </a>
          </div>
        </template>
      </section>
      <section hidden\$="[[!_cherryPicks.length]]" hidden="">
        <h4>Cherry picks</h4>
        <template is="dom-repeat" items="[[_cherryPicks]]" as="change">
          <div>
            <a href\$="[[_computeChangeURL(change._number, change.project)]]" class\$="[[_computeLinkClass(change)]]" title\$="[[change.branch]]: [[change.subject]]">
              [[change.branch]]: [[change.subject]]
            </a>
          </div>
        </template>
      </section>
    </div>
    <div hidden\$="[[!loading]]">Loading...</div>
    <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
`;