{% extends "base.html" %}
{% block title %}System{% endblock %}

{% block extra_head %}
<!-- React Flow CSS bundle -->
{% load static %}
<link rel="stylesheet" href="{% static 'canvas/dist/canvas.css' %}?v={{ cache_bust }}">
<!-- React Flow overrides for dark theme -->
<style>
  /* Canvas takes full remaining height */
  #canvas-root {
    height: calc(100vh - 3.5rem); /* minus nav height */
    width: 100%;
  }
  /* React Flow overrides for dark theme */
  .react-flow__background {
    background-color: #0c0a14 !important;
  }
  .react-flow__minimap {
    background-color: #1a1728 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
  }
  .react-flow__controls {
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    overflow: hidden;
  }
  .react-flow__controls-button {
    background-color: #1a1728 !important;
    border-bottom-color: rgba(255,255,255,0.08) !important;
    fill: #9ca3af !important;
  }
  .react-flow__controls-button:hover {
    background-color: #231f35 !important;
    fill: #e5e7eb !important;
  }
</style>
{% endblock %}

{% block content %}
<div id="canvas-root" data-csrf="{{ csrf_token }}"></div>

<!-- React canvas bundle (built by Vite) -->
{% load static %}
<script type="module" src="{% static 'canvas/dist/canvas.js' %}?v={{ cache_bust }}"></script>
{% endblock %}

{% block content_mobile %}
<div class="px-4 py-6 space-y-4">
  <div class="flex items-center justify-between">
    <h1 class="text-xl font-bold text-white">Canvas</h1>
    <button id="mobile-add-node" class="btn-primary text-xs px-3 py-2">+ Add Node</button>
  </div>

  <div id="canvas-mobile-root" data-csrf="{{ csrf_token }}"></div>

  {% load static %}
  <script type="module" src="{% static 'canvas/dist/canvas-mobile.js' %}?v={{ cache_bust }}"></script>
</div>
{% endblock %}