<!doctype html>
<html dir="$i18n{textdirection}" lang="$i18n{language}" $i18n{dark}>
<head>
  <meta charset="utf8">
  <title>$i18n{title}</title>

  <link rel="stylesheet" href="chrome://resources/css/md_colors.css">

  <style>
    html {
      /* Remove 300ms delay for 'click' event, when using touch interface. */
      touch-action: manipulation;
    }

    html,
    body {
      height: 100%;
      margin: 0;
      overflow: hidden;
    }

    body {
      background: var(--md-background-color);
      cursor: default;
    }

    /* Minimal styling required to display app shim. TODO(dbeam): do we really
     * need all this HTML/CSS just to show "History"? Other pages just show 56px
     * of [blue] border on top without text and this seems fine (maybe even
     * desired when the hamburger menu shifts the text on narrow screens. */
    .loading history-app {
      visibility: hidden;
    }

    #app-shim {
      display: none;
    }

    .loading #app-shim {
      bottom: 0;
      display: flex;
      flex-direction: column;
      font-size: 123%;
      height: 100%;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
    }

    #app-shim span {
      display: flex;
    }

    #loading-toolbar {
      align-items: center;
      background: var(--md-toolbar-color);
      color: #fff;
      height: 56px;
      letter-spacing: .25px;
      padding-inline-start: 24px;
    }

    html[dark] #loading-toolbar {
      color: rgb(232, 234, 237);  /* --google-grey-200 */
    }

    #loading-message {
      align-items: center;
      color: var(--md-loading-message-color);
      flex: 1;
      font-weight: 500;
      justify-content: center;
    }
  </style>
</head>

<body class="loading">
  <history-app id="history-app"></history-app>

  <div id="app-shim">
    <span id="loading-toolbar">$i18n{title}</span>
    <span id="loading-message">$i18n{loading}</span>
  </div>

  <command id="delete-command" shortcut="Delete Backspace">
<if expr="is_macosx">
  <command id="select-all-command" shortcut="Meta|a">
</if>
<if expr="not is_macosx">
  <command id="select-all-command" shortcut="Ctrl|a">
</if>

  <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
  <link rel="import" href="chrome://resources/html/util.html">
  <link rel="import" href="constants.html">
  <script src="history.js"></script>
  <link rel="import" href="chrome://resources/html/dark_mode.html">

  <link rel="import" href="app.html" async id="bundle">
</body>

</html>