<!DOCTYPE html>
<html i18n-values="dir:textdirection">
<head>
  <style type="text/css">
    body {
      margin: 0px;
    }

    #buttons {
      text-align: right;
    }

    html[dir='rtl'] #buttons {
      text-align: left;
    }

    #username,
    #password {
      width: 220px;
    }
  </style>
  <script type="text/javascript">
    function $(o) {
      return document.getElementById(o);
    }

    function disableControls() {
      $('username').disabled = true;
      $('password').disabled = true;
      $('login').disabled = true;
      $('cancel').disabled = true;
    }

    function sendCredentialsAndClose() {
      disableControls();

      var result = JSON.stringify({
          'username': $('username').value,
          'password': $('password').value});

      chrome.send('DialogClose', [result]);
    }

    function setAutofillCredentials(username, password) {
      $('username').value = username;
      $('password').value = password;
    }

    function load() {
      $('explanation').textContent = chrome.dialogArguments;

      $('cancel').onclick = function() {
        disableControls();
        chrome.send('DialogClose', ['']);
      };

      $('login').onclick = function() {
        sendCredentialsAndClose();
      };

      $('username').focus();

      chrome.send('GetAutofill', ['']);
    }

    document.addEventListener('DOMContentLoaded', load);
  </script>
</head>
<body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
  <div id="explanation"></div>
  <table>
    <tr>
      <td i18n-content="username"></td>
      <td>
        <input id="username" type="text">
      </td>
    </tr>
    <tr>
      <td i18n-content="password"></td>
      <td>
        <input id="password" name="password" type="password">
      </td>
    </tr>
  </table>
  <div id="buttons">
    <input id="cancel" type="button" i18n-values="value:cancel">
    <input id="login" type="button" i18n-values="value:signin">
  </div>
</body>
</html>