{% load static %}
<html>
  <head>
    <title>Graphite Dashboard</title>
    <link rel="stylesheet" type="text/css" href="{% static "js/ext/resources/css/ext-all.css" %}"/>
    <link rel="stylesheet" type="text/css" href="{% static "css/dashboard.css" %}"/>

    <script type="text/javascript">
    // Be overly cautious to prevent an unlikely XSS (See the below link rule 3.1):
    // https://www.owasp.org/index.php/XSS_%28Cross_Site_Scripting%29_Prevention_Cheat_Sheet
    var schemes = JSON.parse('{{ schemes_json }}');
    var UI_CONFIG = JSON.parse('{{ ui_config_json }}');
    var CONTEXT_FIELD_WIDTH = 220;
    var AUTOCOMPLETE_DELAY = UI_CONFIG.autocomplete_delay;
    var FINDER_QUERY_DELAY = 100;
    var NEW_DASHBOARD_REMOVE_GRAPHS = false;

    var RESIZE_ICON   = '{% static "js/ext/resources/icons/fam/cog_edit.png" %}';
    var REMOVE_ICON   = '{% static "js/ext/resources/icons/fam/cross.gif" %}';
    var REFRESH_ICON  = '{% static "js/ext/resources/icons/fam/table_refresh.png" %}';
    var SHARE_ICON    = '{% static "js/ext/resources/icons/fam/application_go.png" %}';
    var HELP_ICON     = '{% static "js/ext/resources/icons/fam/information.png" %}';
    var CALENDAR_ICON = '{% static "js/ext/resources/images/default/shared/calendar.gif" %}';
    var CLOCK_ICON    = '{% static "img/clock_16.png" %}';
    var UP_ICON       = '{% static "img/move_up.png" %}';
    var DOWN_ICON     = '{% static "img/move_down.png" %}';
    var TRASH_ICON    = '{% static "img/trash.png" %}';

    {% if initialState %}
    var initialState = JSON.parse('{{ initialState|escapejs }}');
    {% else %}
    var initialState = null;
    {% endif %}

    {% if initialError %}
    var initialError = '{{ initialError|escapejs }}';
    {% else %}
    var initialError = null;
    {% endif %}

    {% if querystring %}
    var queryString = JSON.parse('{{ querystring|escapejs }}');
    {% endif %}

    var permissions = JSON.parse('{{ permissions }}');
    var permissionsUnauthenticated = JSON.parse('{{ permissionsUnauthenticated }}');

    {% if userName %}
    var userName = '{{ userName|escapejs }}';
    {% else %}
    var userName = null;
    {% endif %}

    </script>

    <!-- Theme overrides -->
    <link rel="stylesheet" type="text/css" href="{% static "css/dashboard-"|add:theme|add:".css" %}" />

  </head>
  <body data-static-root="{% get_static_prefix %}" data-base-url="{% url "browser" %}">
    <div id='merge'>Drop To Merge</div>

    {% if jsdebug %}
      <script type="text/javascript" src="{% static "js/ext/adapter/ext/ext-base-debug.js" %}"></script>
      <script type="text/javascript" src="{% static "js/ext/ext-all-debug.js" %}"></script>
    {% else %}
      <script type="text/javascript" src="{% static "js/ext/adapter/ext/ext-base.js" %}"></script>
      <script type="text/javascript" src="{% static "js/ext/ext-all.js" %}"></script>
    {% endif %}
    <script type="text/javascript" src="{% static "js/ext/ux/DataViewTransition.js" %}"></script>
    <script type="text/javascript" src="{% static "js/composer_widgets.js" %}"></script>
    <script type="text/javascript" src="{% static "js/dashboard.js" %}"></script>
    <script type="text/javascript" src="{% static "js/ace/ace.js" %}"></script>
    <script type="text/javascript" src="{% static "js/ace/mode-json.js" %}"></script>
    <script type="text/javascript" src="{% static "js/ace/theme-textmate.js" %}"></script>

    <script type="text/javascript">
    Ext.BLANK_IMAGE_URL = '{% static "js/ext/resources/images/default/s.gif" %}';
    Ext.QuickTips.init();
    Ext.onReady(initDashboard);
    </script>
  </body>
</html>
