<?xml version="1.0" encoding="UTF-8"?>
<!--
Copyright (C) 2014 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:g='urn:import:com.google.gwt.user.client.ui'>
  <ui:with field='ico' type='com.google.gerrit.client.GerritResources'/>
  <ui:style gss='false' type='com.google.gerrit.client.editor.EditScreen.Style'>
    @external .CodeMirror, .CodeMirror-cursor;
    @external .CodeMirror-merge-2pane, .CodeMirror-merge-pane;
    @external .CodeMirror-merge-gap;
    @external .CodeMirror-scroll, .CodeMirror-overlayscroll-vertical;

    .header {
      position: relative;
      height: 16px;
      line-height: 16px;
    }

    .header .CodeMirror div.CodeMirror-cursor {
      border-left: 2px solid black;
    }

    .headerLine {
      background-color: #f7f7f7;
      border-bottom: 1px solid #ddd;
      padding-left: 30px;
    }

    .headerButtons {
      display: inline-block;
      padding-right: 5px;
      border-right: 1px inset #ddd;
      margin-right: 5px;
    }

    .headerButtons button:disabled {
      background-color: #ddd;
      font-weight: normal;
      cursor: default;
    }

    .headerButtons button {
      margin: 2px 0 2px 0;
      text-align: center;
      font-size: 8pt;
      cursor: pointer;
      border: 1px solid;
      color: rgba(0, 0, 0, 0.15);
      background-color: #f5f5f5;
      -webkit-border-radius: 1px;
      -webkit-box-sizing: content-box;
    }

    .headerButtons button div {
      color: #444;
      min-width: 54px;
      white-space: nowrap;
      line-height: 8pt;
    }

    .save {
      font-weight: bold;
    }

    .path {
      white-space: nowrap;
    }

    .statusLine {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 175px;
      height: 19px;
      background-color: #f7f7f7;
      border-top: 1px solid #ddd;
      border-right: 1px solid #ddd;
    }
    .statusLine div {
      height: inherit;
    }

    .cursorPosition {
      display: inline-block;
      margin: 0 5px 0 35px;
      white-space: nowrap;
    }

    .dirty {
      display: inline-block;
      margin: 0 5px 0 5px;
      padding: 0 0 0 5px;
      border-left: 1px solid #ddd;
      font-weight: bold;
    }

    .navigation {
      position: absolute;
      top: 0;
      right: 10px;
    }
    .linkPanel {
      float: left;
    }
    .linkPanel img {
      padding-top: 2px;
      padding-right: 3px;
    }

    .preferences {
      position: relative;
      top: 2px;
      cursor: pointer;
      outline: none;
    }

    .hideBase.CodeMirror-merge-pane {
      display: none;
    }

    .hideBase.CodeMirror-merge-gap {
      display: none;
    }

    .CodeMirror-merge-2pane .fullWidth.CodeMirror-merge-pane {
      width: 100%;
    }

    /* Hide the vertical scrollbar on the base side. The edit side controls
       both views */
    .base .CodeMirror-scroll { margin-right: -42px; }
    .base .CodeMirror-overlayscroll-vertical { display: none !important; }
  </ui:style>
  <g:HTMLPanel styleName='{style.header}'>
    <div class='{style.headerLine}' ui:field='header'>
       <div class='{style.headerButtons}'>
         <g:Button ui:field='close'
             title='Close file and return to change'>
           <ui:attribute name='title'/>
           <div><ui:msg>Close</ui:msg></div>
         </g:Button>
         <g:Button ui:field='save'
             styleName='{style.save}'
             title='Save'>
           <ui:attribute name='title'/>
           <div><ui:msg>Save</ui:msg></div>
         </g:Button>
       </div>
       <span class='{style.path}'><span ui:field='project'/> / <span ui:field='filePath'/></span>
       <div class='{style.navigation}'>
         <g:Label text='Show Base' styleName='{style.linkPanel}'></g:Label>
         <g:CheckBox ui:field='showBase' checked='true' styleName='{style.linkPanel}'
             title='Show Base Version'>
           <ui:attribute name='title'/>
         </g:CheckBox>
         <g:FlowPanel ui:field='linkPanel' styleName='{style.linkPanel}'/>
         <g:Image
             ui:field='editSettings'
             styleName='{style.preferences}'
             resource='{ico.gear}'
             title='Edit screen preferences'>
            <ui:attribute name='title'/>
         </g:Image>
       </div>
    </div>
    <div ui:field='editor' />
    <div class='{style.statusLine}'>
      <div class='{style.cursorPosition}'><span ui:field='cursLine'/> : <span ui:field='cursCol'/></div>
      <div class='{style.dirty}' ui:field='dirty'>Unsaved</div>
    </div>
  </g:HTMLPanel>
</ui:UiBinder>