<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}Alpine 5G Router{% endblock %}</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body class="page-{{ page_id }}" data-page="{{ page_id }}">
  <div class="dash">
    <header class="dash-header">
      <h1><a href="{{ url_for('status_page') }}" style="color: inherit; text-decoration: none;">Alpine 5G Router</a></h1>
      <div class="user-badge">
        <span id="userName">{{ user.username if user else '–' }}</span>
        <span id="userRole">{% if user %}({{ user.role }}){% endif %}</span>
        <a href="{{ url_for('logout_page') }}" class="btn btn-secondary" style="margin-left: 0.75rem; text-decoration: none;">Log out</a>
      </div>
    </header>

    <nav class="nav-links">
      <a href="{{ url_for('status_page') }}" class="nav-link {% if page_id == 'status' %}active{% endif %}">Status</a>
      <a href="{{ url_for('logs_page') }}" class="nav-link {% if page_id == 'logs' %}active{% endif %}">Logs</a>
      <a href="{{ url_for('restart_page') }}" class="nav-link {% if page_id == 'restart' %}active{% endif %}">Restart 5G</a>
      {% if user and user.role == 'admin' %}
      <a href="{{ url_for('config_page') }}" class="nav-link {% if page_id == 'config' %}active{% endif %}">Config</a>
      <a href="{{ url_for('firewall_page') }}" class="nav-link {% if page_id == 'firewall' %}active{% endif %}">Firewall</a>
      <a href="{{ url_for('routes_page') }}" class="nav-link {% if page_id == 'routes' %}active{% endif %}">Routes</a>
      <a href="{{ url_for('users_page') }}" class="nav-link {% if page_id == 'users' %}active{% endif %}">Users</a>
      {% endif %}
    </nav>

    <main class="page-content">
      {% block content %}{% endblock %}
    </main>
  </div>
  <script src="{{ url_for('static', filename='app.js') }}"></script>
  {% block scripts %}{% endblock %}
</body>
</html>
