<!DOCTYPE HTML>
<html i18n-values="dir:textdirection">
<head>
<title i18n-content="title"></title>
<link rel="stylesheet" href="chrome://resources/css/button.css">
<link rel="stylesheet" href="mobile_dialogs.css">
<link rel="stylesheet" href="sim_unlock.css">
<script src="chrome://resources/js/cr.js"></script>
<script src="chrome://resources/js/cr/event_target.js"></script>
<script src="chrome://resources/js/local_strings.js"></script>
<script src="chrome://resources/js/util.js"></script>
<script src="sim_unlock.js"></script>
<script>
var SimUnlock = mobile.SimUnlock;

function load() {
  SimUnlock.initialize();
}

document.addEventListener('DOMContentLoaded', load);
</script>
</head>
<body i18n-values=".style.fontFamily:fontfamily;">
  <div id="container" class="container">
    <div id="locked-pin-overlay" class="dialog" hidden>
      <h1 i18n-content="enterPinTitle"></h1>
      <div id="pin-content-area" class="content-area">
        <div id="pin-error-msg"></div>
        <div id="pin-input-area" class="input-area">
          <input id="pin-input" class="code-input" type="password"
              maxlength="8" size="14">
        </div>
      </div>
      <div class="action-area">
        <div class="action-area-right">
          <div class="button-strip">
            <button id="enter-pin-confirm" i18n-content="ok"></button>
            <button id="enter-pin-dismiss" i18n-content="cancel"></button>
          </div>
        </div>
      </div>
    </div>
    <div id="locked-pin-no-tries-overlay" class="dialog" hidden>
      <h1 i18n-content="incorrectPinTitle"></h1>
      <div id="pin-no-tries-content-area" class="content-area">
        <!-- TODO(nkostylev): Add warning icon. -->
        <div id="pin-no-tries-error-msg" i18n-content="noPinTriesLeft"></div>
      </div>
      <div class="action-area">
        <div class="action-area-right">
          <div class="button-strip">
            <button id="pin-no-tries-proceed" i18n-content="enterPukButton">
            </button>
            <button id="pin-no-tries-dismiss" i18n-content="cancel"></button>
          </div>
        </div>
      </div>
    </div>
    <div id="locked-puk-overlay" class="dialog" hidden>
      <h1 i18n-content="enterPukTitle"></h1>
      <div id="puk-content-area" class="content-area">
        <div id="puk-warning-msg" i18n-content="enterPukWarning" class="error">
        </div>
        <div id="puk-enter-msg" i18n-content="enterPukMessage"></div>
        <div id="puk-input-area" class="input-area">
          <input id="puk-input" class="code-input" type="text"
              maxlength="8" size="14">
        </div>
      </div>
      <div class="action-area">
        <div class="action-area-right">
          <div class="button-strip">
            <button id="enter-puk-confirm" i18n-content="ok"></button>
            <button id="enter-puk-dismiss" i18n-content="cancel"></button>
          </div>
        </div>
      </div>
    </div>
    <div id="choose-pin-overlay" class="dialog" hidden>
      <h1 id="choose-pin-title" i18n-content="choosePinTitle"></h1>
      <div id="choose-pin-content-area" class="choose-pin-content-area">
        <div id="choose-pin-msg" i18n-content="choosePinMessage"></div>
        <div class="input-with-label">
          <div id="old-pin-label" i18n-content="oldPin" class="label" hidden>
          </div>
          <div id="old-pin-input-area" class="choose-pin-input-area" hidden>
            <input id="old-pin-input" class="code-input" type="text"
                maxlength="8" size="14">
          </div>
        </div>
        <div class="input-with-label">
          <div id="new-pin-label" i18n-content="newPin" class="label"></div>
          <div id="new-pin-input-area" class="choose-pin-input-area">
            <input id="new-pin-input" class="code-input" type="text"
                maxlength="8" size="14">
          </div>
        </div>
        <div class="input-with-label">
          <div id="retype-new-pin-label" i18n-content="retypeNewPin"
              class="label"></div>
          <div id="retype-new-pin-input-area" class="choose-pin-input-area">
            <input id="retype-new-pin-input" class="code-input" type="text"
                maxlength="8" size="14">
          </div>
        </div>
        <div id="choose-pin-error" class="error"
            i18n-content="pinsDontMatchMessage" hidden></div>
      </div>
      <div id="choose-pin-action-area" class="action-area">
        <div class="action-area-right">
          <div class="button-strip">
            <button id="choose-pin-confirm" i18n-content="ok"></button>
            <button id="choose-pin-dismiss" i18n-content="cancel"></button>
          </div>
        </div>
      </div>
    </div>
    <div id="locked-puk-no-tries-overlay" class="dialog" hidden>
      <h1 i18n-content="enterPukTitle"></h1>
      <div id="puk-no-tries-content-area" class="content-area">
        <div id="puk-no-tries-msg" i18n-content="noPukTriesLeft"></div>
      </div>
      <div id="locked-puk-action-area" class="action-area">
        <div class="button-strip">
          <button id="puk-no-tries-confirm" i18n-content="ok"></button>
        </div>
      </div>
    </div>
    <div id="sim-disabled-overlay" class="dialog" hidden>
      <h1 i18n-content="simDisabledTitle"></h1>
      <div id="sim-disabled-content-area" class="content-area">
        <div id="sim-disabled-msg" i18n-content="simDisabledMessage"></div>
      </div>
      <div id="disabled-sim-action-area" class="action-area">
        <div class="button-strip">
          <button id="sim-disabled-confirm" i18n-content="ok"></button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>