<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="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='blockedUserSettings'>
  <h3>{{ blockedHeader }}</h3>
  <div class='blocked-user-settings'>
      <button class='grey unblock-button'>{{ unblockMessage }}</button>
  </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>
      <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 />
    <div class='menu-bar-setting'>
      <input type='checkbox' name='hide-menu-bar' id='hide-menu-bar'/>
      <label for='hide-menu-bar'>{{ hideMenuBar }}</label>
    </div>
    <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>
    <div class='spell-check-setting'>
      <h3>{{ spellCheckHeader }}</h3>
      <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 class='read-receipt-setting'>
        <input type='checkbox' name='read-receipt-setting' id='read-receipt-setting' />
        <label for='read-receipt-setting'>{{ readReceiptSettingDescription }}</label>
      </div>
    </div>
    <div class='sync-setting'></div>
    <hr>
    <div class='message-ttl-setting'>
      <h3>{{ messageTTL }}</h3>
      <div>{{ messageTTLSettingDescription }}</div>
      <div id='warning'>{{ messageTTLSettingWarning }}</div>
      <div class='inputs'>
        <input
          name='message-ttl-setting'
          id='message-ttl-setting'
          type='range'
          list='tickmarks'
          min='12'
          max='96'
          step='6'
          value='24'
        >
        <label for='message-ttl-setting'>24 Hours</label>
        <datalist id='tickmarks'>
          <option value='12'>
          <option value='18'>
          <option value='24'>
          <option value='30'>
          <option value='36'>
          <option value='42'>
          <option value='48'>
          <option value='54'>
          <option value='60'>
          <option value='66'>
          <option value='72'>
          <option value='78'>
          <option value='84'>
          <option value='90'>
          <option value='96'>
        </datalist>
      </div>
    </div>
    <hr>
    <div class='clear-data-settings'>
      <h3>{{ clearDataHeader }}</h3>
      <div>
        <button class='grey destructive clear-data'>{{ clearDataButton }}</button>
        <p>{{ clearDataExplanation }}</p>
      </div>
    </div>
    <hr>
    <div class='blocked-user-setting'>
    </div>
  </div>
</script>

<script type='text/javascript' src='js/components.js'></script>
<script type='text/javascript' src='js/storage.js'></script>
<script type='text/javascript' src='js/models/blockedNumbers.js'></script>
<script type='text/javascript' src='js/blocked_number_controller.js'></script>
<script type='text/javascript' src='js/views/whisper_view.js'></script>
<script type='text/javascript' src='js/views/list_view.js'></script>
<script type='text/javascript' src='js/views/blocked_number_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>
