/**
 * @license
 * Copyright (C) 2019 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.
 */

export const htmlTemplate = Polymer.html`
    <style include="shared-styles"></style>
    <style include="gr-subpage-styles"></style>
    <style>
      div.image-panel {
        margin: 2em auto;
        max-width: 50em;
        height: 150px;
      }

      div.title {
        float: left;
        width: 30%;
        height: 100%;
      }

      div.value {
        text-align: center;
        float: right;
        width: 70%;
        height: 100%;
      }

      div.imageName {
        font-weight: bold;
        padding: 1em;
      }

      a {
        display: block;
      }

      .ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        float: left;
        width: 80%;
      }

      img {
        width: 100%;
        height: auto;
        max-height: 100%;
        max-width: 80%;
        object-fit: contain;
      }

      #editButton {
        box-shadow: none;
      }
    </style>
    <div class="image-panel">
      <div class="title">
        <img id="thumbnail">
      </div>
      <div id="staging" class="value">
        <div class="imageName">
          <iron-input bind-value="{{imageName}}">
            <input id="imageNameInput" value="{{imageName::input}}" type="text"
                   disabled="[[!_editing]]" placeholder$="[[imageName]]">
          </iron-input>
          <gr-button id="editButton" on-click="_handleEditImage" hidden="[[_editing]]">
            Edit
          </gr-button>
          <gr-button id="saveButton" on-click="_handleSaveName" hidden="[[!_editing]]">
            Save
          </gr-button>
          <gr-button id="cancelRenameButton" on-click="_handleCancelRenameName"
                     hidden="[[!_editing]]">
            Cancel
          </gr-button>
        </div>
        <div>
          <section>
            <gr-button id="uploadButton"
                       on-click="_handleUploadImage"
                       disabled="[[_editing]]">
              Upload
            </gr-button>
            <gr-button id="cleanButton"
                       on-click="_handleClearImage">
              Clear
            </gr-button>
          </section>
        </div>
      </div>
      <div id="uploading" class="value">
        <div class="imageName">
          [[imageName]]
        </div>
        <div>
          <a class="ellipsis" href="[[imageUrl]]">[[imageUrl]]</a>
          <gr-copy-clipboard has-tooltip button-title="Copy URL to Clipboard"
                             hide-input text="[[imageUrl]]">
          </gr-copy-clipboard>
        </div>
        <gr-button id="deleteButton"
                   on-click="_openDeleteDialog">
          Delete
        </gr-button>
        <gr-overlay id="deleteOverlay" with-backdrop>
          <gr-dialog id="deleteDialog"
                     class="confirmDialog"
                     confirm-label="Delete"
                     confirm-on-enter
                     on-confirm="_handleDeleteImage">
            <div class="header" slot="header">
              Delete Image
            </div>
            <div class="main" slot="main">
              Are you sure you want to delete '[[imageName]]'?
            </div>
          </gr-dialog>
        </gr-overlay>
      </div>
    </div>
`;