<?xml version="1.0" encoding="UTF-8"?>
<!--
Copyright (C) 2013 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.
-->
<ui:UiBinder
    xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:c='urn:import:com.google.gerrit.client.change'
    xmlns:g='urn:import:com.google.gwt.user.client.ui'
    xmlns:x='urn:import:com.google.gerrit.client.ui'>
  <ui:with field='ico' type='com.google.gerrit.client.GerritResources'/>
  <ui:with field='res' type='com.google.gerrit.client.change.Resources'/>
  <ui:style gss='false' type='com.google.gerrit.client.change.ChangeScreen.Style'>
    @eval textColor com.google.gerrit.client.Gerrit.getTheme().textColor;
    @eval trimColor com.google.gerrit.client.Gerrit.getTheme().trimColor;

    @def COMMIT_WIDTH 560px;
    @def HEADER_HEIGHT 30px;

    @def BUTTON_HEIGHT 14px;

    .cs2 {
      margin-bottom: 1em;
    }

    .headerLine {
      position: relative;
      background-color: trimColor;
      height: HEADER_HEIGHT;
      margin: 0 -5px;
      padding: 0 5px;
    }

    .subjectLine {
      position: relative;
      width: COMMIT_WIDTH;
      height: HEADER_HEIGHT;
      background-color: trimColor;
      color: textColor;
      font-family: sans-serif;
    }
    .subjectText {
      width: 460px;
      height: HEADER_HEIGHT;
      line-height: HEADER_HEIGHT;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .infoLine {
      position: absolute;
      top: 0;
      left: COMMIT_WIDTH;
      height: HEADER_HEIGHT;
      padding-left: 25px;
    }

    .infoLineHeaderButtons {
      display: inline-block;
      height: HEADER_HEIGHT;
    }
    .statusRight {
      position: absolute;
      top: 0;
      right: 0;
      height: HEADER_HEIGHT;
    }
    .idAndStatus {
      display: inline-block;
      position: relative;
      height: HEADER_HEIGHT;
    }
    .star {
      position: absolute;
      top: 5px;
      right: 2px;
      cursor: pointer;
      outline: none;
    }
    .changeId {
      width: 300px;
      white-space: nowrap;
      line-height: HEADER_HEIGHT;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .statusText {
      font-weight: bold;
    }

    div.popdown {
      display: inline-block;
      margin-top: 2px;
      margin-left: 5px;
      margin-right: 25px;
    }

    .popdown button {
      cursor: pointer;
      height: 25px;
      border: none;
      background-color: trimColor;
      margin: 0 0 0 -2px;
      padding-left: 2px;
      padding-right: 2px;
      min-width: 100px;
    }
    .popdown button div {
      padding-left: 6px;
      padding-right: 6px;
    }
    .popdown button div:after {
      content: " \25bc";
    }
    .popdown button.selected {
      font-weight: bold;
    }
    .popdown button:focus {
      outline: none;
    }

    .headerButtons button:disabled,
    #change_infoTable button:disabled,
    .popdown button:disabled {
      background-color: #999;
      background-image: -webkit-linear-gradient(top, #999, #999);
    }

    .infoTable {
      border-spacing: 0;
    }

    .infoTable th {
      width: 60px;
      color: #444;
      font-weight: normal;
      vertical-align: top;
      text-align: left;
      padding: 0 5px 0 0;
    }

    .projectSettings {
      float: right;
      cursor: pointer;
    }

    .infoColumn {
      width: 440px;
      padding-left: 17px;
      padding-right: 17px;
      vertical-align: top;
    }

    #change_infoTable {
      border-spacing: 0;
      width: 100%;
      margin-left: 2px;
      margin-right: 5px;
    }

    .notMergeable {
      float: right;
      font-weight: bold;
      color: #d00;
    }

    .commitColumn, .relatedColumn {
      padding: 0;
      vertical-align: top;
    }
    .commitColumn { width: COMMIT_WIDTH; }
    .relatedColumn { width: 375px; }

    .labels {
      border-spacing: 0;
      padding: 0;
    }
    .labelName {
      color: #444;
      vertical-align: top;
      text-align: left;
      padding-top: 3px;
      padding-right: 5px;
      white-space: nowrap;
    }

    .label_user {
      display: inline-block;
      margin-bottom: 2px;
      padding: 1px 3px 0px 3px;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      background: trimColor;
      border: 1px solid trimColor;
      white-space: nowrap;
    }
    .label_user img.avatar {
      margin: 0 2px 0 0;
      width: 16px;
      height: 16px;
      vertical-align: bottom;
    }
    .label_user button {
      cursor: pointer;
      padding: 0;
      margin: 0 0 0 5px;
      border: 0;
      background-color: transparent;
      white-space: nowrap;
    }

    .label_ok {color: #060;}
    .label_reject {color: #d14836;}
    .label_need {color: #000;}
    .label_may {color: #777;}

    .hashtagName {
      display: inline-block;
      margin-bottom: 2px;
      padding: 1px 3px 0px 3px;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      background: #E2F5FF;
      border: 1px solid #579FDA;
      white-space: nowrap;
    }

    .hashtagName button {
      cursor: pointer;
      padding: 0;
      margin: 0 0 0 5px;
      border: 0;
      background-color: transparent;
      white-space: nowrap;
    }

    .headerButtons button {
      margin: 5.286px 3px 0 0;
      text-align: center;
      font-size: 8pt;
      font-weight: bold;
      cursor: pointer;
      border: 2px solid;
      color: rgba(0, 0, 0, 0.15);
      background-color: #f5f5f5;
      -webkit-border-radius: 2px;
      -webkit-box-sizing: content-box;
    }
    .headerButtons button div {
      color: #444;
      min-width: 54px;
      white-space: nowrap;
      height: BUTTON_HEIGHT;
      line-height: BUTTON_HEIGHT;
    }
    button.highlight {
      background-color: #4d90fe;
    }
    button.highlight div { color: #fff; }

    .sectionHeader {
      position: relative;
      background-color: trimColor;
      font-weight: bold;
      color: textColor;
      height: 20px;
      line-height: 20px;
      margin: 0 -5px;
      padding: 5px 5px;
    }
    .sectionHeader .headerButtons {
      position: absolute;
      left: 300px;
      top: 2px;
      height: 18px;
      line-height: 18px;
      border-left: 1px inset #fff;
      padding-left: 5px;
      padding-top: 3px;
      padding-bottom: 3px;
    }
    .sectionHeader button { margin-top: 0; }

    .diffBase {
      display: inline-block;
      height: 18px;
      line-height: 18px;
      font-size: smaller;
      font-weight: normal;
      vertical-align: top;
    }
    .diffBase select {
      margin: 0;
      border: 2px solid rgba(0, 0, 0, 0.15);
      height: 20px;
      font-size: 8pt;
      font-weight: bold;
      border-radius: 2px;
      background-color: #f5f5f5
    }

    .replyBox {
      background-color: trimColor;
    }

    .ownerPanel img, .uploaderPanel img {
      margin: 0 2px 0 0;
      width: 16px;
      height: 16px !important;
      vertical-align: bottom;
    }

    .headerExtension {
      display: inline-block;
      float: right;
    }

    .headerExtension>div>div {
      float: left;
    }

    .changeExtension {
      padding-top: 5px;
    }

    .pushCertStatus {
      padding-left: 5px;
    }
  </ui:style>

  <g:HTMLPanel styleName='{style.cs2}'>
    <g:HTMLPanel styleName='{style.headerLine}' ui:field='headerLine'>
      <div class='{style.subjectLine}'>
        <div class='{style.idAndStatus}'>
          <span class='{style.changeId}'>
            <ui:msg>Change <g:Anchor ui:field='permalink' title='Reload the change (Shortcut: R)'>
              <ui:attribute name='title'/>
            </g:Anchor> - <span ui:field='statusText' class='{style.statusText}'/></ui:msg>
          </span>
          <g:SimplePanel ui:field='headerExtension' styleName='{style.headerExtension}'/>
        </div>
      </div>

      <div class='{style.infoLine}'>
        <div class='{style.headerButtons} {style.infoLineHeaderButtons}'>
          <g:Button ui:field='reply'
              styleName=''
              title=''
              visible='false'>
            <ui:attribute name='title'/>
          </g:Button>
          <c:QuickApprove ui:field='quickApprove'
              styleName='{style.highlight}'
              title='Apply score with one click'>
            <ui:attribute name='title'/>
          </c:QuickApprove>
          <g:Button ui:field='publishEdit'
              styleName='{style.highlight}' visible='false'>
            <div><ui:msg>Publish Edit</ui:msg></div>
          </g:Button>
          <g:Button ui:field='rebaseEdit'
              styleName='{style.highlight}' visible='false'>
            <div><ui:msg>Rebase Edit</ui:msg></div>
          </g:Button>
          <g:Button ui:field='deleteEdit' styleName='' visible='false'>
            <div><ui:msg>Delete Edit</ui:msg></div>
          </g:Button>
          <g:Button ui:field='publish'
              styleName='{style.highlight}' visible='false'>
            <div><ui:msg>Publish</ui:msg></div>
          </g:Button>
          <g:Button ui:field='deleteChange' styleName='' visible='false'>
            <div><ui:msg>Delete Change</ui:msg></div>
          </g:Button>
          <g:Button ui:field='deleteRevision' styleName='' visible='false'>
            <div><ui:msg>Delete Revision</ui:msg></div>
          </g:Button>
          <g:SimplePanel ui:field='headerExtensionMiddle' styleName='{style.headerExtension}'/>
        </div>
      </div>

      <div class='{style.statusRight}'>
        <g:FlowPanel styleName='{style.popdown}'>
          <g:Button ui:field='includedIn' styleName='' visible="false">
            <div><ui:msg>Included in</ui:msg></div>
          </g:Button>
          <g:Button ui:field='patchSets' styleName=''>
            <div ui:field='patchSetsText'/>
          </g:Button>
          <g:Button ui:field='download' styleName=''>
            <div><ui:msg>Download</ui:msg></div>
          </g:Button>
          <g:SimplePanel ui:field='headerExtensionRight' styleName='{style.headerExtension}'/>
        </g:FlowPanel>
        <c:StarIcon ui:field='star' styleName='{style.star}' title='Star the change (Shortcut: s)'>
          <ui:attribute name='title'/>
        </c:StarIcon>
      </div>
    </g:HTMLPanel>

    <table class='{style.infoTable}'>
      <tr>
        <td class='{style.commitColumn}'>
          <c:CommitBox ui:field='commit'/>
        </td>
        <td class='{style.infoColumn}'>
          <table id='change_infoTable'>
            <tr>
              <th><ui:msg>Owner</ui:msg></th>
              <td>
                <g:FlowPanel ui:field='ownerPanel' styleName='{style.ownerPanel}'>
                  <x:InlineHyperlink ui:field='ownerLink'/>
                </g:FlowPanel>
              </td>
            </tr>
            <tr ui:field='uploaderRow'>
              <th><ui:msg>Uploader</ui:msg></th>
              <td>
                <g:FlowPanel ui:field='uploaderPanel' styleName='{style.uploaderPanel}'>
                  <g:InlineLabel ui:field='uploaderName'/>
                </g:FlowPanel>
              </td>
            </tr>
            <tr>
              <th><ui:msg>Reviewers</ui:msg></th>
              <td>
                <c:Reviewers ui:field='reviewers'/>
              </td>
            </tr>
            <tr>
              <th/>
              <td ui:field='ccText'/>
            </tr>
            <tr>
              <th><ui:msg>Project</ui:msg></th>
              <td><x:InlineHyperlink ui:field='projectDashboard'
                     title='Go to project dashboard'>
                     <ui:attribute name='title'/>
                  </x:InlineHyperlink>
                  <a ui:field='projectSettingsLink'
                     class='{style.projectSettings}'>
                    <g:Image
                       ui:field='projectSettings'
                       resource='{ico.gear}'
                       title='Go to project settings'>
                      <ui:attribute name='title'/>
                    </g:Image>
                  </a>
              </td>
            </tr>
            <tr>
              <th><ui:msg>Branch</ui:msg></th>
              <td><x:InlineHyperlink ui:field='branchLink'
                     title='Search for changes on this branch'>
                     <ui:attribute name='title'/>
                  </x:InlineHyperlink>
              </td>
            </tr>
            <tr>
              <th><ui:msg>Topic</ui:msg></th>
              <td><c:Topic ui:field='topic'/></td>
            </tr>
            <tr ui:field='strategy'>
              <th><ui:msg>Strategy</ui:msg></th>
              <td>
                <span ui:field='submitActionText'/>
                <div ui:field='notMergeable'
                     class='{style.notMergeable}'
                     style='display: none'
                     aria-hidden='true'
                     title='The change cannot be merged due to a path conflict. Rebase the change and upload the rebased commit for review.'>
                  <ui:attribute name='title'/>
                  <ui:msg>Cannot Merge</ui:msg>
                </div>
              </td>
            </tr>
            <tr>
              <th ui:field='actionText'/>
              <td ui:field='actionDate'/>
            </tr>
            <tr ui:field='hashtagTableRow'>
              <td colspan='2'>
                <c:Hashtags ui:field='hashtags'/>
              </td>
            </tr>
            <tr><td colspan='2'><c:Actions ui:field='actions'/></td></tr>
          </table>
          <hr/>
          <c:Labels ui:field='labels' styleName='{style.labels}'/>
          <g:SimplePanel ui:field='changeExtension' styleName='{style.changeExtension}'/>
          <div id='change_plugins'/>
        </td>
        <td class='{style.relatedColumn}'>
          <c:RelatedChanges ui:field='related'/>
        </td>
      </tr>
    </table>

    <div class='{style.sectionHeader} {style.headerButtons}'>
      <ui:msg>Files</ui:msg>
      <g:Button ui:field='addFile'
         title='Add file to this change'
         styleName=''
         visible='false'>
        <ui:attribute name='title'/>
        <div><ui:msg>Add&#8230;</ui:msg></div>
      </g:Button>
      <g:Button ui:field='deleteFile'
         title='Delete file from the repository'
         styleName=''
         visible='false'>
        <ui:attribute name='title'/>
        <div><ui:msg>Delete&#8230;</ui:msg></div>
      </g:Button>
      <g:Button ui:field='renameFile'
         title='Rename file in the repository'
         styleName=''
         visible='false'>
        <ui:attribute name='title'/>
        <div><ui:msg>Rename&#8230;</ui:msg></div>
      </g:Button>
      <div class='{style.headerButtons}'>
        <g:Button ui:field='openAll'
            styleName=''
            title='Open each file in a new tab'>
          <ui:attribute name='title'/>
          <div><ui:msg>Open All</ui:msg></div>
        </g:Button>
        <div class='{style.diffBase}'>
          <ui:msg>Diff against: <g:ListBox ui:field='diffBase' styleName=''/></ui:msg>
        </div>
        <g:Button ui:field='editMode'
            styleName=''
            visible='false'
            title='Switch file table to edit mode'>
          <ui:attribute name='title'/>
          <div><ui:msg>Edit</ui:msg></div>
        </g:Button>
        <g:Button ui:field='reviewMode'
            styleName=''
            visible='false'
            title='Done with edit mode'>
          <ui:attribute name='title'/>
          <div><ui:msg>Done Editing</ui:msg></div>
        </g:Button>
      </div>
    </div>
    <c:FileTable ui:field='files'/>

    <div class='{style.sectionHeader}'>
      <ui:msg>History</ui:msg>
      <div class='{style.headerButtons}'>
        <g:Button ui:field='expandAll'
            styleName=''
            title='Expand all messages in the change history'>
          <ui:attribute name='title'/>
          <div><ui:msg>Expand All</ui:msg></div>
        </g:Button>
        <g:Button ui:field='collapseAll'
            styleName=''
            visible='false'
            title='Collapse all messages in the change history'>
          <ui:attribute name='title'/>
          <div><ui:msg>Collapse All</ui:msg></div>
        </g:Button>
      </div>
    </div>
    <c:History ui:field='history'/>
  </g:HTMLPanel>
</ui:UiBinder>