<div id="tab-security" class="profile-tab-panel<%= activeTab !== 'security' ? ' hidden' : '' %>">
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-2 space-y-6">
      <% if (hasPassword) { %>
      <form method="post" action="/admin/profile/password" enctype="application/x-www-form-urlencoded" class="profile-card">
        <p class="profile-section-title">Change Password</p>
        <div class="space-y-4">
          <div><label class="profile-label">Current Password</label><input type="password" name="currentPassword" class="profile-input" autocomplete="current-password"/></div>
          <div>
            <label class="profile-label">New Password</label>
            <input type="password" name="newPassword" class="profile-input" id="new-pw" autocomplete="new-password" placeholder="Min 8 characters"/>
            <div class="mt-2 flex gap-1 mb-1">
              <div class="flex-1 profile-strength-bar" id="sb1" style="background:rgba(255,255,255,.08)"></div>
              <div class="flex-1 profile-strength-bar" id="sb2" style="background:rgba(255,255,255,.08)"></div>
              <div class="flex-1 profile-strength-bar" id="sb3" style="background:rgba(255,255,255,.08)"></div>
              <div class="flex-1 profile-strength-bar" id="sb4" style="background:rgba(255,255,255,.08)"></div>
            </div>
            <p id="strength-label" class="text-xs" style="color:rgba(255,255,255,.3)">Enter a password</p>
          </div>
          <div><label class="profile-label">Confirm New Password</label><input type="password" name="confirmPassword" class="profile-input" autocomplete="new-password"/></div>
        </div>
        <div class="flex justify-end pt-4"><button type="submit" class="btn-primary text-sm">Update Password</button></div>
      </form>
      <% } else { %>
      <div class="profile-card">
        <p class="profile-section-title">Password</p>
        <p class="text-sm" style="color:rgba(255,255,255,.5)">You sign in with Google. Password change is not available for OAuth-only accounts.</p>
      </div>
      <% } %>

      <div class="profile-card">
        <p class="profile-section-title">Two-Factor Authentication</p>
        <p class="text-sm text-white font-semibold mb-1">Authenticator App</p>
        <p class="text-xs mb-4" style="color:rgba(255,255,255,.4)">2FA is not enabled yet. This feature will be available in a future update.</p>
        <span class="badge badge-gray text-xs">Not enabled</span>
      </div>

      <div class="profile-card">
        <p class="profile-section-title">Active Sessions</p>
        <div class="flex items-center gap-4 p-4 rounded-xl" style="background:rgba(128,101,248,.08);border:1px solid rgba(128,101,248,.2)">
          <div class="w-9 h-9 rounded-xl flex items-center justify-center flex-shrink-0" style="background:rgba(128,101,248,.2)">
            <svg class="w-5 h-5" style="color:#a78bfa" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2"/></svg>
          </div>
          <div class="flex-1 min-w-0">
            <p class="text-sm font-semibold text-white">Current session</p>
            <p class="text-xs mt-0.5" style="color:rgba(255,255,255,.35)">Active now · <%= lastLoginLabel %></p>
          </div>
        </div>
      </div>
    </div>

    <div class="profile-card" style="background:linear-gradient(135deg,rgba(128,101,248,.1),rgba(68,144,211,.05));border-color:rgba(128,101,248,.2)">
      <p class="profile-section-title">Security Tips</p>
      <ul class="space-y-3 text-xs" style="color:rgba(255,255,255,.5);list-style:none;padding:0">
        <li>Use at least 8 characters with uppercase, numbers, and symbols.</li>
        <li>Never share your admin credentials.</li>
        <li>Sign out from shared devices when finished.</li>
      </ul>
    </div>
  </div>
</div>
