<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{% block title %}CoderAI{% endblock %}</title>
  <link rel="icon" type="image/x-icon" href="{{ root_path }}/favicon.ico">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="{{ root_path }}/static/admin/style.css">
  <script>const ROOT_PATH = "{{ root_path }}";</script>
  {% block head %}{% endblock %}
</head>
<body>

{% if username %}
<nav class="topnav">
  <div class="topnav-inner">
    <div class="topnav-left">
      <a href="{{ root_path }}/admin" class="nav-logo">
        <div class="nav-logo-mark">AI</div>
        <span class="nav-logo-name">CoderAI</span>
      </a>
      <div class="nav-links">
        <a href="{{ root_path }}/admin" class="nav-link {% if request.url.path == '/admin' %}active{% endif %}">Overview</a>
        <a href="{{ root_path }}/chat" class="nav-link {% if request.url.path == '/chat' %}active{% endif %}">Studio</a>
        <a href="{{ root_path }}/docs" class="nav-link" target="_blank">API Docs</a>
        {% if is_admin|default(false) %}
        <a href="{{ root_path }}/admin/models" class="nav-link {% if '/models' in request.url.path %}active{% endif %}">Models</a>
        <a href="{{ root_path }}/admin/tasks" class="nav-link {% if '/tasks' in request.url.path %}active{% endif %}">Tasks</a>
        <a href="{{ root_path }}/admin/tokens" class="nav-link {% if '/tokens' in request.url.path %}active{% endif %}">Tokens</a>
        <a href="{{ root_path }}/admin/users" class="nav-link {% if '/users' in request.url.path %}active{% endif %}">Users</a>
        <a href="{{ root_path }}/admin/archive" class="nav-link {% if '/archive' in request.url.path %}active{% endif %}">Archive</a>
        <a href="{{ root_path }}/admin/settings" class="nav-link {% if '/settings' in request.url.path %}active{% endif %}">Settings</a>
        {% endif %}
        <button class="nav-link nav-donate-btn" onclick="document.getElementById('donateModal').classList.add('show')">&#9829; Donate</button>
      </div>
    </div>
    <div class="topnav-right">
      <span class="nav-username">{{ username }}</span>
      <div class="nav-sep"></div>
      <a href="{{ root_path }}/logout" class="nav-logout">Sign out</a>
    </div>
  </div>
</nav>

<div class="modal" id="donateModal" onclick="if(event.target===this)this.classList.remove('show')">
  <div class="modal-box donate-modal-box">
    <div class="modal-head">
      <span class="modal-title">Support CoderAI</span>
      <button class="modal-close" onclick="document.getElementById('donateModal').classList.remove('show')">&times;</button>
    </div>
    <div class="modal-body">
      <p class="donate-tagline">CoderAI is free and open source. If you find it useful, consider supporting its development — every contribution helps.</p>
      <div class="donate-coins">
        <div class="donate-coin">
          <span class="donate-coin-label">Bitcoin &mdash; BTC</span>
          <img class="donate-qr" src="https://api.qrserver.com/v1/create-qr-code/?size=160x160&color=DDE1F0&bgcolor=161820&qzone=2&data=bitcoin:bc1qcpt2uutqkz4456j5r78rjm3gwq03h5fpwmcc5u" alt="BTC QR code" width="160" height="160">
          <div class="donate-addr-row">
            <code class="donate-addr" id="btcAddr">bc1qcpt2uutqkz4456j5r78rjm3gwq03h5fpwmcc5u</code>
            <button class="donate-copy" onclick="donateCopy('btcAddr',this)">Copy</button>
          </div>
        </div>
        <div class="donate-coin">
          <span class="donate-coin-label">Ethereum &mdash; ETH</span>
          <img class="donate-qr" src="https://api.qrserver.com/v1/create-qr-code/?size=160x160&color=DDE1F0&bgcolor=161820&qzone=2&data=ethereum:0xdA6dAb526515b5cb556d20269207D43fcc760E51" alt="ETH QR code" width="160" height="160">
          <div class="donate-addr-row">
            <code class="donate-addr" id="ethAddr">0xdA6dAb526515b5cb556d20269207D43fcc760E51</code>
            <button class="donate-copy" onclick="donateCopy('ethAddr',this)">Copy</button>
          </div>
        </div>
        <div class="donate-coin">
          <span class="donate-coin-label">PayPal</span>
          <img class="donate-qr" src="https://api.qrserver.com/v1/create-qr-code/?size=160x160&color=DDE1F0&bgcolor=161820&qzone=2&data=https://paypal.me/nexlab" alt="PayPal QR code" width="160" height="160">
          <div class="donate-addr-row">
            <a class="donate-addr donate-paypal-link" id="ppAddr" href="https://paypal.me/nexlab" target="_blank" rel="noopener">paypal.me/nexlab</a>
            <a class="donate-copy" href="https://paypal.me/nexlab" target="_blank" rel="noopener">Open</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
function donateCopy(id, btn) {
  var el = document.getElementById(id);
  var text = el.href || el.textContent;
  navigator.clipboard.writeText(text.trim()).then(function() {
    var orig = btn.innerHTML;
    btn.innerHTML = '&#10003;';
    setTimeout(function(){ btn.innerHTML = orig; }, 1500);
  });
}
</script>
<main class="main">
{% endif %}

<div class="{% block wrapper_class %}container{% endblock %}">
  {% block content %}{% endblock %}
</div>

{% if username %}
</main>
{% endif %}

{% block scripts %}{% endblock %}
</body>
</html>
