{% load static %} {% load app_tags %}
<!DOCTYPE html>

<head>
  {% include "common/onetrust_cookies_consent_notice.html" %}

  <!-- Google Tag Manager -->
   <!-- End Google Tag Manager -->
  <title>Kurono</title>
  <link rel="shortcut icon" href="{% static 'favicon.ico' %}" type="image/x-icon" />
  <style type="text/css">
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
  </style>

  <!-- This overrides the monokai theme used by the AceEditor (IDEEditor/index.js) 
    Copied from https://github.com/ajaxorg/ace/blob/master/lib/ace/theme/monokai.css (also installed as a package)
    and a few colours were modified to achieve a good contrast ratio, checked using
    https://webaim.org/resources/contrastchecker/
  -->
  <style id="ace-monokai">
    .ace-monokai .ace_gutter {
      background: #2f3129;
      color: #8f908a;
    }
    .ace-monokai .ace_print-margin {
      width: 1px;
      background: #555651;
    }
    .ace-monokai {
      background-color: #272822;
      color: #f8f8f2;
    }
    .ace-monokai .ace_cursor {
      color: #f8f8f0;
    }
    .ace-monokai .ace_marker-layer .ace_selection {
      background: #49483e;
    }
    .ace-monokai.ace_multiselect .ace_selection.ace_start {
      box-shadow: 0 0 3px 0px #272822;
    }
    .ace-monokai .ace_marker-layer .ace_step {
      background: rgb(102, 82, 0);
    }
    .ace-monokai .ace_marker-layer .ace_bracket {
      margin: -1px 0 0 -1px;
      border: 1px solid #49483e;
    }
    .ace-monokai .ace_marker-layer .ace_active-line {
      background: #202020;
    }
    .ace-monokai .ace_gutter-active-line {
      background-color: #272727;
    }
    .ace-monokai .ace_marker-layer .ace_selected-word {
      border: 1px solid #49483e;
    }
    .ace-monokai .ace_invisible {
      color: #52524d;
    }
    .ace-monokai .ace_entity.ace_name.ace_tag,
    .ace-monokai .ace_keyword,
    .ace-monokai .ace_meta.ace_tag,
    .ace-monokai .ace_storage {
      color: #fca6c6;
    }
    .ace-monokai .ace_punctuation,
    .ace-monokai .ace_punctuation.ace_tag {
      color: #fff;
    }
    .ace-monokai .ace_constant.ace_character,
    .ace-monokai .ace_constant.ace_language,
    .ace-monokai .ace_constant.ace_numeric,
    .ace-monokai .ace_constant.ace_other {
      color: #cdb3ff;
    }
    .ace-monokai .ace_invalid {
      color: #f8f8f0;
      background-color: #f92672;
    }
    .ace-monokai .ace_invalid.ace_deprecated {
      color: #f8f8f0;
      background-color: #cdb3ff;
    }
    .ace-monokai .ace_support.ace_constant,
    .ace-monokai .ace_support.ace_function {
      color: #66d9ef;
    }
    .ace-monokai .ace_fold {
      background-color: #a6e22e;
      border-color: #f8f8f2;
    }
    .ace-monokai .ace_storage.ace_type,
    .ace-monokai .ace_support.ace_class,
    .ace-monokai .ace_support.ace_type {
      font-style: italic;
      color: #66d9ef;
    }
    .ace-monokai .ace_entity.ace_name.ace_function,
    .ace-monokai .ace_entity.ace_other,
    .ace-monokai .ace_entity.ace_other.ace_attribute-name,
    .ace-monokai .ace_variable {
      color: #a6e22e;
    }
    .ace-monokai .ace_variable.ace_parameter {
      font-style: italic;
      color: #fd971f;
    }
    .ace-monokai .ace_string {
      color: #e6db74;
    }
    .ace-monokai .ace_comment {
      color: #c3c0b7;
    }
    .ace-monokai .ace_indent-guide {
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWPQ0FD0ZXBzd/wPAAjVAoxeSgNeAAAAAElFTkSuQmCC)
        right repeat-y;
    }
    /*# sourceURL=ace/css/ace-monokai */
  </style>

  <script>
    var appData = {
      urlForAimmoDashboard: '{% url_for_aimmo_dashboard %}',
      {% if request.session.screentime_warning_timeout %}screentimeWarningTimeout: {{ request.session.screentime_warning_timeout }},{% endif %}
    }
  </script>
</head>

<body>
  <!-- Google Tag Manager (noscript) -->
   <!-- End Google Tag Manager (noscript) -->
  <!-- Freshdesk widget. Needs to be at before React gets loaded in otherwise the link to open the widget won't work -->
  {% include "common/freshdesk_widget.html" %}
  <!-- CSS to hide Freshdesk widget button even after the widget has been used -->
  <style>
    #launcher-frame {
      display: none;
    }
  </style>
  <div id="root"></div>
  <script src="{% static 'react/src.2759a47e.js' %}"></script>
</body>
