<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="panopti-viewport" content="width=device-width, initial-scale=1.0">
  <title>Panopti</title>
  <link rel="shortcut icon" href="{{ url_for('static', filename='templates/favicon.ico') }}" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css">
  
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=brightness_1,ev_shadow,start" />
  {% if is_dev %}
    <!-- Development mode: Load from Vite dev server -->
    <script>console.log('DEVELOPMENT MODE');</script>
    <script type="module" src="http://localhost:5173/@vite/client"></script>
    <link rel="stylesheet" href="http://localhost:5173/style.css">
  {% else %}
    <!-- Production mode: Load built assets -->
    <script>console.log('PRODUCTION MODE');</script>
    <link rel="stylesheet" href="{{ url_for('static', filename='dist/' + bundle['index.html']['css'][0]) }}">
  {% endif %}
</head>
<body>
  <div id="app"></div>
  
  <script>window.viewerId = "{{ viewer_id }}";</script>
  <script>window.panoptiConfig = {{ config | tojson | safe }};</script>

  {% if is_dev %}
    <script type="module" src="http://localhost:5173/main.js"></script>
  {% else %}
    <script type="module" src="{{ url_for('static', filename='dist/' + bundle['index.html']['file']) }}"></script>
  {% endif %}
</body>
</html>
