<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{ APP_TITLE }}</title>

  <!-- Highlight.js (light and dark themes) -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css" media="(prefers-color-scheme: light)">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" media="(prefers-color-scheme: dark)">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

  <!-- Mermaid -->
  <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>

  <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
<header class="topbar">
  <div class="container topbar-inner">
    <div class="brand">
      <a class="brand-title" href="{{ url_for('browse', path='') }}">{{ APP_TITLE }}</a>
    </div>
    <nav class="top-actions">
      <a class="btn" href="{{ url_for('browse', path='') }}">Browser</a>
      <a class="btn" href="{{ url_for('scripts_home', path='') }}">Scripts</a>
    </nav>
  </div>
</header>

<main class="container layout">
  <aside class="sidebar">
    <div class="sidebar-h">Files</div>
    <div id="tree" class="tree"></div>
  </aside>
  <section class="content">
    {% block content %}{% endblock %}
  </section>
</main>


<footer class="footer container">
  <div>Serving <code>{{ ROOT_DIR }}</code></div>
  <!-- <div>LocalHub • Flask</div> -->
</footer>

<script>
  // current directory page
  window.CURRENT_PATH = "{{ rel_path|e }}";       // e.g. "src/utils"
  window.CURRENT_IS_FILE = false;
</script>


<script src="{{ url_for('static', filename='scripts.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Code highlighting
  if (window.hljs) {
    document.querySelectorAll('pre code').forEach(el => { hljs.highlightElement(el); });
  }
  // Mermaid
  if (window.mermaid) {
    const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    mermaid.initialize({ startOnLoad: true, theme: prefersDark ? 'dark' : 'default' });
  }
});
</script>
</body>
</html>
