{% extends "layout.html" %}

{% block title %}Profile — {{ panel_title }}{% endblock %}

{% block breadcrumb %}
  <nav class="flex flex-wrap items-center gap-1 text-xs text-secondary-400 dark:text-secondary-500">
    <a href="{{ panel_prefix }}/" class="hover:text-secondary-600 dark:hover:text-secondary-300 transition-colors">Dashboard</a>
    <span class="select-none">›</span>
    <span class="text-secondary-600 dark:text-secondary-300">Profile</span>
  </nav>
{% endblock %}

{% block page_heading %}
  <div>
    <h1 class="text-xl font-semibold text-secondary-900 dark:text-secondary-100">Your Profile</h1>
    <p class="text-sm text-secondary-500 dark:text-secondary-400 mt-0.5">Account details and session info</p>
  </div>
{% endblock %}

{% block content %}
<div class="max-w-xl space-y-6">

  {# Avatar + name card #}
  <div class="bg-white dark:bg-secondary-800 rounded-xl border border-secondary-200 dark:border-secondary-700 shadow-sm p-6">
    <div class="flex items-center gap-5">
      <div class="w-16 h-16 rounded-full bg-primary flex items-center justify-center flex-shrink-0 shadow-sm">
        <span class="text-white text-2xl font-bold select-none">{{ current_user.username[0] | upper }}</span>
      </div>
      <div class="min-w-0">
        <p class="text-lg font-semibold text-secondary-900 dark:text-secondary-100 truncate">{{ current_user.username }}</p>
        <p class="text-sm text-secondary-500 dark:text-secondary-400 mt-0.5">Administrator</p>
      </div>
    </div>
  </div>

  {# Details #}
  <div class="bg-white dark:bg-secondary-800 rounded-xl border border-secondary-200 dark:border-secondary-700 shadow-sm divide-y divide-secondary-100 dark:divide-secondary-700">
    <div class="px-6 py-4 flex items-center justify-between gap-4">
      <div>
        <p class="text-xs font-medium text-secondary-400 dark:text-secondary-500 uppercase tracking-wide">Username</p>
        <p class="mt-0.5 text-sm font-medium text-secondary-900 dark:text-secondary-100">{{ current_user.username }}</p>
      </div>
      <svg class="w-4 h-4 text-secondary-300 dark:text-secondary-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
      </svg>
    </div>
    <div class="px-6 py-4 flex items-center justify-between gap-4">
      <div>
        <p class="text-xs font-medium text-secondary-400 dark:text-secondary-500 uppercase tracking-wide">Role</p>
        <p class="mt-0.5 text-sm font-medium text-secondary-900 dark:text-secondary-100">Administrator</p>
      </div>
      <svg class="w-4 h-4 text-secondary-300 dark:text-secondary-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
      </svg>
    </div>
    <div class="px-6 py-4 flex items-center justify-between gap-4">
      <div>
        <p class="text-xs font-medium text-secondary-400 dark:text-secondary-500 uppercase tracking-wide">Panel</p>
        <p class="mt-0.5 text-sm font-medium text-secondary-900 dark:text-secondary-100">{{ panel_title }}</p>
      </div>
      <svg class="w-4 h-4 text-secondary-300 dark:text-secondary-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/>
      </svg>
    </div>
  </div>

  {# Sign out #}
  <div>
    <a href="{{ panel_prefix }}/logout"
       class="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium
              text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20
              border border-red-200 dark:border-red-800/40
              hover:bg-red-100 dark:hover:bg-red-900/40 transition-colors">
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
      </svg>
      Sign out
    </a>
  </div>

</div>
{% endblock %}