<!DOCTYPE html>
<html i18n-values="dir:textdirection">
<head>
  <link rel="stylesheet" href="dialog.css">
  <style>
    body {
      margin: 10px 10px 0 10px;
      -webkit-user-select: none;
    }

    form {
      margin: 0;
    }

    #explanation {
      cursor: default;
    }

    #fields {
      padding: 10px 0;
      margin-left: auto;
      margin-right: auto;
    }

    #username-label-cell,
    #password-label-cell {
      text-align: end;
      -webkit-padding-end: 5px;
    }

    #username,
    #password {
      width: 150px;
    }

    #buttons {
      text-align: end;
    }

  </style>
  <script>
    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 cancel() {
      disableControls();
      chrome.send('DialogClose');
    }

    function handleSubmit(e) {
      sendCredentialsAndClose();
      e.preventDefault();
    }

    function handleKeyDown(e) {
      if (e.keyCode == 27) {  // Escape
        cancel();
        e.preventDefault();
      }
    }

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

    function load() {
      document.addEventListener('keydown', handleKeyDown);
      $('explanation').textContent = chrome.getVariableValue('dialogArguments');
      $('form').onsubmit = handleSubmit;
      $('cancel').onclick = cancel;

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

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