<html>
<head>
  <meta http-equiv="Content-Security-Policy"
    content="default-src 'none';
            child-src 'self';
            connect-src 'self' https: wss:;
            font-src 'self';
            form-action 'self';
            frame-src 'none';
            img-src 'self' blob: data:;
            media-src 'self' blob:;
            object-src 'none';
            script-src 'self';
            style-src 'self' 'unsafe-inline';"
  >
  <link href="node_modules/sanitize.css/sanitize.css" rel="stylesheet" type="text/css" />
  <link href="stylesheets/manifest.css" rel="stylesheet" type="text/css" />
<style>
</style>
</head>
<body>
</body>
<script type='text/x-tmpl-mustache' id='syncSettings'>
    <hr>
    <h3>{{ sync }}</h3>
    <div>
      <button class='grey sync'>{{ syncNow }}</button>
      <p>
        {{ syncExplanation }}
        <div class='synced_at'>
            {{ lastSynced }} {{ syncDate }} {{ syncTime }}
        </div>
        <div class='sync_failed'>{{ syncFailed }}</div>
        <div class='clearfix'></div>
      </p>
    </div>
</script>
<script type='text/x-tmpl-mustache' id='settings'>
  <div class='content'>
    <a class='x close' alt='close settings' href='#'></a>
    <h2>{{ settings }}</h2>
    <div class='device-name-settings'>
      <b>{{ deviceNameLabel }}:</b> {{ deviceName }}
    </div>
    <hr>
    <div class='theme-settings'>
      <h3>{{ theme }}</h3>
      {{#hasSystemTheme}}
        <div>
          <input type='radio' name='theme' id='theme-setting-system' value='system'>
          <label for='theme-setting-system'>{{ themeSystem }}</label>
        </div>
      {{/hasSystemTheme}}
      <div>
        <input type='radio' name='theme' id='theme-setting-light' value='light'>
        <label for='theme-setting-light'>{{ themeLight }}</label>
      </div>
      <div>
        <input type='radio' name='theme' id='theme-setting-dark' value='dark'>
        <label for='theme-setting-dark'>{{ themeDark }}</label>
      </div>
    </div>
    <br />
    {{ #isHideMenuBarSupported }}
    <div class='menu-bar-setting'>
      <input type='checkbox' name='hide-menu-bar' id='hide-menu-bar'/>
      <label for='hide-menu-bar'>{{ hideMenuBar }}</label>
    </div>
    {{ /isHideMenuBarSupported }}
    <hr>
    <div class='notification-settings'>
      <h3>{{ notifications }}</h3>
      <p>{{ notificationSettingsDialog }}</p>
      <div>
        <input type='radio' name='notifications' id='notification-setting-message' value='message'>
        <label for='notification-setting-message'>{{ nameAndMessage }} </label>
      </div>
      <div>
        <input type='radio' name='notifications' id='notification-setting-name'  value='name'/>
        <label for='notification-setting-name'>{{ nameOnly }} </label>
      </div>
      <div>
        <input type='radio' name='notifications' id='notification-setting-count' value='count'/>
        <label for='notification-setting-count'>{{ noNameOrMessage }} </label>
      </div>
      <div>
        <input type='radio' name='notifications' id='notification-setting-off' value='off'/>
        <label for='notification-setting-off'>{{ disableNotifications }} </label>
      </div>
    </div>
    <br />
    {{ #isAudioNotificationSupported }}
    <div class='audio-notification-setting'>
      <input type='checkbox' name='audio-notification' id='audio-notification'/>
      <label for='audio-notification'>{{ audioNotificationDescription }}</label>
    </div>
    {{ /isAudioNotificationSupported }}
    <hr>
      <h3>{{ generalHeader }}</h3>
      <div class='spell-check-setting'>
        <input type='checkbox' name='spell-check-setting' id='spell-check-setting' />
        <label for='spell-check-setting'>{{ spellCheckDescription }}</label>
      </div>
    <hr>
    <div class='permissions-setting'>
      <h3>{{ permissions }}</h3>
      <div class='media-permissions'>
        <input type='checkbox' name='media-permissions' id='media-permissions' />
        <label for='media-permissions'>{{ mediaPermissionsDescription }}</label>
      </div>
    </div>
    <div class='sync-setting'></div>
    <hr>
    <div class='clear-data-settings'>
      <h3>{{ clearDataHeader }}</h3>
      <div>
        <button class='grey destructive clear-data'>{{ clearDataButton }}</button>
        <p>{{ clearDataExplanation }}</p>
      </div>
    </div>
  </div>
</script>
<script type='text/javascript' src='js/components.js'></script>
<script type='text/javascript' src='js/views/whisper_view.js'></script>
<script type='text/javascript' src='js/views/settings_view.js'></script>
<script type='text/javascript' src='js/settings_start.js'></script>
</html>