<% const n = notifications || {}; const s = profile.social || {}; const tab = activeTab || 'info'; %>

<%- include('../../partials/adminTopbar', {
  pageTitle: 'My Profile',
  pageSubtitle: 'Manage your account and preferences',
  topbarActions: `
    <div class="hidden sm:flex items-center gap-2 px-3 py-1.5 rounded-full" style="background:rgba(19,179,180,.1);border:1px solid rgba(19,179,180,.2)">
      <span class="w-1.5 h-1.5 rounded-full" style="background:#13b3b4"></span>
      <span class="text-xs font-semibold" style="color:#13b3b4">Online</span>
    </div>
    <a href="/admin" class="btn-ghost text-xs">Dashboard</a>
  `
}) %>

<main class="flex-1 overflow-y-auto profile-page" id="profile-page"
  data-active-tab="<%= tab %>"
  data-flash="<%= typeof flash !== 'undefined' && flash ? flash.replace(/"/g, '&quot;') : '' %>">

  <form id="avatar-upload-form" method="post" action="/admin/profile/avatar" enctype="multipart/form-data" class="hidden">
    <input type="file" name="avatar" id="avatar-file-input" accept="image/*" data-avatar-input/>
  </form>

  <div class="max-w-5xl mx-auto px-6 py-8">
    <% if (typeof flash !== 'undefined' && flash) { %>
    <div class="admin-flash <%= flashType === 'error' ? 'admin-flash-error' : 'admin-flash-success' %> mb-4"><%= flash %></div>
    <% } %>

    <%- include('./_hero') %>

    <div class="flex items-center gap-2 mb-6 overflow-x-auto pb-1">
      <button type="button" class="profile-ptab<%= tab === 'info' ? ' active' : '' %>" data-tab="info">Personal Info</button>
      <button type="button" class="profile-ptab<%= tab === 'security' ? ' active' : '' %>" data-tab="security">Security</button>
      <button type="button" class="profile-ptab<%= tab === 'notifications' ? ' active' : '' %>" data-tab="notifications">Notifications</button>
      <button type="button" class="profile-ptab<%= tab === 'integrations' ? ' active' : '' %>" data-tab="integrations">Integrations</button>
      <button type="button" class="profile-ptab<%= tab === 'activity' ? ' active' : '' %>" data-tab="activity">Activity</button>
    </div>

    <%- include('./_tab-info') %>
    <%- include('./_tab-security') %>
    <%- include('./_tab-notifications') %>
    <%- include('./_tab-integrations') %>
    <%- include('./_tab-activity') %>
  </div>
</main>

<div id="profile-toast" class="profile-toast">
  <svg class="w-4 h-4 flex-shrink-0" style="color:#13b3b4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
  <span class="profile-toast-msg"></span>
</div>
