{% extends "base.html" %}
{% block title %}Settings – Echo{% endblock %}
{% block content %}
<div class="max-w-xl mx-auto space-y-4">
  <div class="flex items-center justify-between">
    <h1 class="text-2xl font-semibold">Settings</h1>
    <a href="/dashboard/{{ (user.role | lower) if user and user.role else 'end_user' }}" class="text-sm text-blue-400 hover:text-blue-300">Back to Dashboard</a>
  </div>

  {% if not_found %}
    <div class="border border-red-800 bg-red-900 text-red-300 p-3 rounded">User not found.</div>
  {% endif %}

  <div class="bg-zinc-900 border border-zinc-800 rounded-lg p-4">
    <div class="text-sm text-zinc-400">(theme toggle - currently not functional ))</div>
    <button id="theme-toggle" class="inline-flex items-center gap-2 text-sm">
      <span>Theme</span>
      <span id="theme-label">
        {{ 'Dark' if user.theme == 'dark' else 'Light' }}
      </span>
    </button>
  </div>
</div>
{% endblock %}