<?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'
    xmlns:x='urn:import:com.google.gerrit.client.ui'>
  <ui:style type='com.google.gerrit.client.editor.EditPreferencesBox.Style'>
    @external .gwt-TextBox;
    @external .gwt-ToggleButton .html-face;
    @external .gwt-ToggleButton-up;
    @external .gwt-ToggleButton-up-hovering;
    @external .gwt-ToggleButton-up-disabled;
    @external .gwt-ToggleButton-down;
    @external .gwt-ToggleButton-down-hovering;
    @external .gwt-ToggleButton-down-disabled;

    .dialog {
      background: rgba(0, 0, 0, 0.85) none repeat scroll 0 50%;
      color: #ffffff;
      font-family: arial,sans-serif;
      font-weight: bold;
      overflow: auto !important;
      bottom: 0;
      text-align: left;
      text-shadow: 1px 1px 7px #000000;
      min-width: 300px;
      z-index: 200;
      border-radius: 10px;
    }

    @if user.agent safari {
      .dialog {
        \-webkit-border-radius: 10px;
      }
    }

    @if user.agent gecko1_8 {
      .dialog {
        \-moz-border-radius: 10px;
      }
    }

    .box { margin: 10px; }
    .box .gwt-TextBox { padding: 0; }
    .context { vertical-align: bottom; }

    .table tr { min-height: 23px; }
    .table th,
    .table td {
      white-space: nowrap;
      color: #ffffff;
    }
    .table th {
      padding-right: 8px;
      text-align: right;
    }

    .box a,
    .box a:visited,
    .box a:hover {
      color: #dddd00;
    }

    .box .gwt-ToggleButton {
      position: relative;
      height: 19px;
      width: 140px;
      background: #fff;
      color: #000;
      text-shadow: none;
    }
    .box .gwt-ToggleButton .html-face {
      position: absolute;
      top: 0;
      width: 68px;
      height: 17px;
      line-height: 17px;
      text-align: center;
      border-width: 1px;
    }

    .box .gwt-ToggleButton-up,
    .box .gwt-ToggleButton-up-hovering,
    .box .gwt-ToggleButton-up-disabled,
    .box .gwt-ToggleButton-down,
    .box .gwt-ToggleButton-down-hovering,
    .box .gwt-ToggleButton-down-disabled {
      padding: 0;
      border: 0;
    }
    .box .gwt-ToggleButton-up .html-face,
    .box .gwt-ToggleButton-up-hovering .html-face {
      left: 0;
      background: #cacaca;
      border-style: outset;
    }
    .box .gwt-ToggleButton-down .html-face,
    .box .gwt-ToggleButton-down-hovering .html-face {
      right: 0;
      background: #bcf;
      border-style: inset;
    }

    .box button {
      margin: 6px 3px 0 0;
      border-color: rgba(0, 0, 0, 0.1);
      text-align: center;
      font-size: 8pt;
      font-weight: bold;
      border: 1px solid;
      cursor: pointer;
      color: #444;
      background-color: #f5f5f5;
      background-image: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
      -webkit-border-radius: 2px;
      -webkit-box-sizing: content-box;
    }
    .box button div {
      color: #444;
      height: 10px;
      min-width: 54px;
      line-height: 10px;
      white-space: nowrap;
    }

    button.apply {
      background-color: #4d90fe;
      background-image: -webkit-linear-gradient(top, #4d90fe, #4d90fe);
    }
    button.apply div { color: #fff; }

    button.save {
      margin-left: 10px;
      color: #d14836;
      background-color: #d14836;
      background-image: -webkit-linear-gradient(top, #d14836, #d14836);
    }
    button.save div { color: #fff; }
  </ui:style>

  <g:HTMLPanel styleName='{style.box}'>
    <div ui:field='header'>
      <table style='width: 100%'>
        <tr>
          <td><ui:msg>Edit Preferences</ui:msg></td>
          <td style='text-align: right'>
            <g:Anchor ui:field='close' href='javascript:;'><ui:msg>Close</ui:msg></g:Anchor>
          </td>
        </tr>
      </table>
      <hr/>
    </div>
    <table class='{style.table}'>
      <tr>
        <th><ui:msg>Theme</ui:msg></th>
        <td><g:ListBox ui:field='theme'/></td>
      </tr>
      <tr>
        <th><ui:msg>Key Map</ui:msg></th>
        <td><g:ListBox ui:field='keyMap'/></td>
      </tr>
      <tr>
        <th><ui:msg>Tab Width</ui:msg></th>
        <td><x:NpIntTextBox ui:field='tabWidth'
            visibleLength='4'
            alignment='RIGHT'/></td>
      </tr>
      <tr>
        <th><ui:msg>Columns</ui:msg></th>
        <td><x:NpIntTextBox ui:field='lineLength'
            visibleLength='4'
            alignment='RIGHT'/></td>
      </tr>
      <tr>
        <th><ui:msg>Indent Unit</ui:msg></th>
        <td><x:NpIntTextBox ui:field='indentUnit'
            visibleLength='4'
            alignment='RIGHT'/></td>
      </tr>
      <tr>
        <th><ui:msg>Cursor Blink Rate</ui:msg></th>
        <td><x:NpIntTextBox ui:field='cursorBlinkRate'
            visibleLength='4'
            alignment='RIGHT'/></td>
      </tr>
      <tr>
        <th><ui:msg>Top Menu</ui:msg></th>
        <td><g:ToggleButton ui:field='topMenu'>
          <g:upFace><ui:msg>Hide</ui:msg></g:upFace>
          <g:downFace><ui:msg>Show</ui:msg></g:downFace>
        </g:ToggleButton></td>
      </tr>
      <tr>
        <th><ui:msg>Syntax Highlighting</ui:msg></th>
        <td><g:ToggleButton ui:field='syntaxHighlighting'>
          <g:upFace><ui:msg>Hide</ui:msg></g:upFace>
          <g:downFace><ui:msg>Show</ui:msg></g:downFace>
        </g:ToggleButton></td>
      </tr>
      <tr>
        <th><ui:msg>Show Tabs</ui:msg></th>
        <td><g:ToggleButton ui:field='showTabs'>
          <g:upFace><ui:msg>Hide</ui:msg></g:upFace>
          <g:downFace><ui:msg>Show</ui:msg></g:downFace>
        </g:ToggleButton></td>
      </tr>
      <tr>
      <th><ui:msg>Whitespace Errors</ui:msg></th>
        <td><g:ToggleButton ui:field='whitespaceErrors'>
          <g:upFace><ui:msg>Hide</ui:msg></g:upFace>
          <g:downFace><ui:msg>Show</ui:msg></g:downFace>
        </g:ToggleButton></td>
      </tr>
      <tr>
        <th><ui:msg>Line Numbers</ui:msg></th>
        <td><g:ToggleButton ui:field='lineNumbers'>
          <g:upFace><ui:msg>Hide</ui:msg></g:upFace>
          <g:downFace><ui:msg>Show</ui:msg></g:downFace>
        </g:ToggleButton></td>
      </tr>
      <tr>
        <th><ui:msg>Match Brackets</ui:msg></th>
        <td><g:ToggleButton ui:field='matchBrackets'>
          <g:upFace><ui:msg>Off</ui:msg></g:upFace>
          <g:downFace><ui:msg>On</ui:msg></g:downFace>
        </g:ToggleButton></td>
      </tr>
      <tr>
        <th><ui:msg>Line Wrapping</ui:msg></th>
        <td><g:ToggleButton ui:field='lineWrapping'>
          <g:upFace><ui:msg>Off</ui:msg></g:upFace>
          <g:downFace><ui:msg>On</ui:msg></g:downFace>
        </g:ToggleButton></td>
      </tr>
      <tr>
        <th><ui:msg>Indent With Tabs</ui:msg></th>
        <td><g:ToggleButton ui:field='indentWithTabs'>
          <g:upFace><ui:msg>Off</ui:msg></g:upFace>
          <g:downFace><ui:msg>On</ui:msg></g:downFace>
        </g:ToggleButton></td>
      </tr>
      <tr>
        <th><ui:msg>Auto Close Brackets</ui:msg></th>
        <td><g:ToggleButton ui:field='autoCloseBrackets'>
          <g:upFace><ui:msg>Off</ui:msg></g:upFace>
          <g:downFace><ui:msg>On</ui:msg></g:downFace>
        </g:ToggleButton></td>
      </tr>
      <tr>
        <th><ui:msg>Show Base Version</ui:msg></th>
        <td><g:ToggleButton ui:field='showBase'>
          <g:upFace><ui:msg>Hide</ui:msg></g:upFace>
          <g:downFace><ui:msg>Show</ui:msg></g:downFace>
        </g:ToggleButton></td>
      </tr>
      <tr>
        <td></td>
        <td>
          <g:Button ui:field='apply' styleName='{style.apply}'>
            <div><ui:msg>Apply</ui:msg></div>
          </g:Button>
          <g:Button ui:field='save' styleName='{style.save}'>
            <div><ui:msg>Save</ui:msg></div>
          </g:Button>
        </td>
      </tr>
    </table>
  </g:HTMLPanel>
</ui:UiBinder>