<html i18n-values="dir:textdirection;">
<head>
<title></title>
<style type="text/css">
body {
   line-height: 1.5em;
   background: #FFFFFF;
   font-size: 11pt;
}
html[os='mac'] body {
  line-height: 1.5em;
  background: #FFFFFF;
}
form {
  -webkit-user-select: none;
}
.error {
  color: red;
  font-size: 10pt;
 }
.sync-header {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 10px;
}
.sync-instructions {
  margin-top: 10px;
  margin-bottom: 10px;
}
.sync-footer {
  position: fixed;
  right: 0px;
  bottom: 0px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.sync-section {
  background: #EEE;
  margin: 5px;
  padding: 10px;
}

#learn-more-link {
  float: right;
}
html[dir='rtl'] #learn-more-link {
  float: left;
}
html[dir='rtl'] .sync-footer {
  text-align: left;
  left: 0px;
  bottom: 0px;
  margin-left: 20px;
}
input[type='button'],
input[type='submit'] {
  min-width: 87px;
  min-height: 26px;
  margin-left: 7px;
}
html[os='mac'] input[type='button'],
html[os='mac'] input[type='submit'] {
  font-size: 12pt;
}

#passphrase {
  margin-top: 5px;
}

</style>
<script src="chrome://resources/js/cr.js"></script>
<script>
  var currentMode;

  // Called once, when this html/js is loaded.
  function setupDialog(args) {
    // Allow platform specific rules
    if (cr.isMac) {
      document.documentElement.setAttribute('os', 'mac');
    } else if (!cr.isWindows) {
      document.documentElement.setAttribute('os', 'linux');
    }

    switchToMode("");
  }

  function switchToMode(mode) {
    document.getElementById("section-explicit").style.display = "none";

    if (mode == "explicit") {
      document.getElementById("section-explicit").style.display = "block";
    }
  }

  function getRadioCheckedValue() {
    var f = document.getElementById("form");
    for (var i = 0; i < f.option.length; ++i) {
      if (f.option[i].checked) {
        return f.option[i].value;
      }
    }
    return undefined;
  }

  function onRadioChange() {
    switchToMode(getRadioCheckedValue());
  }

  function checkPassphraseMatch() {
    var emptyError = document.getElementById("emptyerror");
    var mismatchError = document.getElementById("mismatcherror");
    emptyError.style.display = "none";
    mismatchError.style.display = "none";

    if (getRadioCheckedValue() != "explicit") {
      return true;
    }
    var f = document.getElementById("form");
    if (f.passphrase.value.length == 0) {
      emptyError.style.display = "block";
      return false;
    }
    if (f.confirmpassphrase.value != f.passphrase.value) {
      mismatchError.style.display = "block";
      return false;
    }
    return true;
  }

  function sendValuesAndClose() {
    var f = document.getElementById("form");
    if (!checkPassphraseMatch()) {
      return false;
    }

    var result = JSON.stringify({"option": getRadioCheckedValue(),
                                 "passphrase": f.passphrase.value});
    chrome.send("FirstPassphrase", [result]);
  }

  function optOutOfPasswordsAndClose() {
    var result = JSON.stringify({"option": "nothanks",
                                 "passphrase": ""});
    chrome.send("FirstPassphrase", [result]);
  }
</script>
</head>
<body i18n-values=".style.fontFamily:fontfamily" onload="setupDialog();">

</body>
</html>