/**
 * @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,
    .messageListControls {
      display: flex;
      justify-content: space-between;
    }
    .header {
      align-items: center;
      border-top: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
      display: flex;
      justify-content: space-between;
      padding: var(--spacing-s) var(--spacing-l);
    }
    #messageControlsContainer {
      padding: 0 var(--spacing-l);
    }
    .highlighted {
      animation: 3s fadeOut;
    }
    @keyframes fadeOut {
      0% {
        background-color: var(--emphasis-color);
      }
      100% {
        background-color: var(--view-background-color);
      }
    }
    #messageControlsContainer {
      align-items: center;
      background-color: var(--background-color-secondary);
      border-bottom: 1px solid var(--border-color);
      display: flex;
      height: 2.25em;
      justify-content: center;
    }
    #messageControlsContainer gr-button {
      padding: var(--spacing-s) 0;
    }
    .container {
      align-items: center;
      display: flex;
    }
    gr-message:not(:last-of-type) {
      border-bottom: 1px solid var(--border-color);
    }
    gr-message:nth-child(2n) {
      background-color: var(--background-color-secondary);
    }
    gr-message:nth-child(2n + 1) {
      background-color: var(--background-color-tertiary);
    }
  </style>
  <div class="header">
    <span
      id="automatedMessageToggleContainer"
      class="container"
      hidden$="[[!_hasAutomatedMessages(messages)]]"
    >
      <paper-toggle-button
        id="automatedMessageToggle"
        checked="{{_hideAutomated}}"
      ></paper-toggle-button
      >Only comments
      <span class="transparent separator"></span>
    </span>
    <gr-button
      id="collapse-messages"
      link=""
      title="[[_expandAllTitle]]"
      on-click="_handleExpandCollapseTap"
    >
      [[_expandAllState]]
    </gr-button>
  </div>
  <span
    id="messageControlsContainer"
    hidden$="[[_computeShowHideTextHidden(_visibleMessages, _processedMessages, _hideAutomated, _visibleMessages.length)]]"
  >
    <gr-button id="oldMessagesBtn" link="" on-click="_handleShowAllTap">
      [[_computeNumMessagesText(_visibleMessages, _processedMessages,
      _hideAutomated, _visibleMessages.length)]]
    </gr-button>
    <span
      class="container"
      hidden$="[[_computeIncrementHidden(_visibleMessages, _processedMessages, _hideAutomated, _visibleMessages.length)]]"
    >
      <span class="transparent separator"></span>
      <gr-button
        id="incrementMessagesBtn"
        link=""
        on-click="_handleIncrementShownMessages"
      >
        [[_computeIncrementText(_visibleMessages, _processedMessages,
        _hideAutomated, _visibleMessages.length)]]
      </gr-button>
    </span>
  </span>
  <template is="dom-repeat" items="[[_visibleMessages]]" as="message">
    <gr-message
      change-num="[[changeNum]]"
      message="[[message]]"
      comments="[[_computeCommentsForMessage(changeComments, message)]]"
      hide-automated="[[_hideAutomated]]"
      project-name="[[projectName]]"
      show-reply-button="[[showReplyButtons]]"
      on-message-anchor-tap="_handleAnchorClick"
      label-extremes="[[_labelExtremes]]"
      data-message-id$="[[message.id]]"
    ></gr-message>
  </template>
`;