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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{% block title %}Promgen {{ VERSION }}{% endblock %}</title>
  <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
  <link rel="stylesheet" href="{% static 'css/bootstrap-theme.min.css' %}">
  <link rel="stylesheet" href="{% static 'css/bootstrap-switch.min.css' %}">
  <link rel="stylesheet" href="{% static 'css/promgen.css' %}">
  <link rel="icon" href="{% static 'images/promgen_logo_color.png' %}">
</head>

<body>
  <div id="vue">
    {% if debug %}
    <div class="alert alert-warning" role="alert">Currently in DEBUG Mode</div>
    {% endif %}
    {% block navbar %}
    {% include "promgen/navbar.html" %}
    {% endblock %}
    <div class="container">
      {% include 'promgen/global_messages.html' %}
      <silence-form></silence-form>
      {% include 'promgen/global_alerts.html' %}
      {% include 'promgen/global_silences.html' %}
      {% block content %}{% endblock %}
    </div>
  </div>
  <script src="{% static 'js/jquery.min.js' %}"></script>
  <script src="{% static 'js/bootstrap.min.js' %}"></script>
  <script src="{% static 'js/bootstrap-switch.min.js' %}"></script>
  <script src="{% static 'js/luxon.min.js' %}"></script>
  <script src="{% static 'js/linkify.min.js' %}"></script>
  <script src="{% static 'js/linkify-string.min.js' %}"></script>
  {% if debug %}
  <script src="{% static 'js/vue-3.3.7/vue.global.js' %}"></script>
  {% else %}
  <script src="{% static 'js/vue-3.3.7/vue.global.prod.js' %}"></script>
  {% endif %}
  <script type="text/x-template" id="bootstrap-panel-template">
    {% include 'promgen/vue/bootstrap_panel.html' %}
  </script>
  <script type="text/x-template" id="exporter-result-template">
    {% include 'promgen/vue/exporter_result.html' %}
  </script>
  <script type="text/x-template" id="exporter-test-template">
    {% include 'promgen/vue/exporter_test.html' %}
  </script>
  <script type="text/x-template" id="promql-query-template">
    {% include 'promgen/vue/promql_query.html' %}
  </script>
  <script type="text/x-template" id="silence-form-template">
    {% include 'promgen/vue/silence_form.html' %}
  </script>
  <script src="{% static 'js/promgen.js' %}"></script>
  <script src="{% static 'js/mixins.vue.js' %}"></script>
  <script src="{% static 'js/promgen.vue.js' %}"></script>
  {% block javascript %}{% endblock %}

  <datalist style="display:none" id="common.labels">
    <option>severity</option>
  </datalist>

  <datalist style="display:none" id="common.annotations">
    <option>summary</option>
    <option>grafana</option>
    <option>runbook</option>
  </datalist>

  <datalist style="display:none" id="common.labels.severity">
    <option>critical</option>
    <option>major</option>
    <option>minor</option>
    <option>debug</option>
  </datalist>

  <script>app.mount("#vue")</script>
</body>

</html>
