<%
  const showLocale = typeof lang === 'string' && lang.toLowerCase().startsWith('en') ? 'en' : 'ar';
  const currentSupervisorId = supervisor && supervisor.id ? String(supervisor.id) : '';
  const signedInId = user && user._id ? String(user._id) : '';
  const isCurrentSupervisor = currentSupervisorId === signedInId;
  const isProtectedSupervisor = Boolean(supervisor && (supervisor.isSuperAdmin || supervisor.isAdmin));
  const roleLabel = supervisor && supervisor.roleName
    ? supervisor.roleName
    : (
        supervisor && supervisor.role && supervisor.role.name && typeof supervisor.role.name === 'object'
          ? (supervisor.role.name[showLocale] || supervisor.role.name.ar || supervisor.role.name.en || '')
          : (supervisor && supervisor.role && supervisor.role.name ? supervisor.role.name : '')
      );
  const showCopy = showLocale === 'ar'
    ? {
        eyebrow: 'ملف الفريق',
        title: 'تفاصيل المشرف',
        subtitle: 'هوية الحساب ودور الوصول وحالة الحماية.',
        cardTitle: 'ملف المشرف',
        cardSubtitle: 'بيانات آمنة للقراءة فقط — لا يتم عرض كلمة المرور أو أي رموز حساسة.',
        name: 'الاسم',
        email: 'البريد الإلكتروني',
        phone: 'رقم الجوال',
        role: 'دور الوصول',
        status: 'حالة الحساب',
        joined: 'تاريخ الانضمام',
        protection: 'حالة الحماية',
        current: 'هذا حسابك الحالي ولا تعرض له إجراءات خطرة.',
        protected: 'حساب نظام محمي وغير قابل للإجراءات الخطرة.',
        editable: 'حساب فريق قابل للإدارة وفق عقد الأمان.',
        active: 'نشط',
        blocked: 'محظور',
        back: 'العودة للقائمة',
        edit: 'تعديل المشرف'
      }
    : {
        eyebrow: 'Team profile',
        title: 'Supervisor details',
        subtitle: 'Account identity, access role, and protection status.',
        cardTitle: 'Supervisor profile',
        cardSubtitle: 'Safe read-only data — passwords and sensitive tokens are never shown.',
        name: 'Name',
        email: 'Email',
        phone: 'Phone',
        role: 'Access role',
        status: 'Account status',
        joined: 'Joined',
        protection: 'Protection',
        current: 'This is your current account; dangerous actions are unavailable.',
        protected: 'Protected system account; dangerous actions are unavailable.',
        editable: 'Team account manageable under the safety contract.',
        active: 'Active',
        blocked: 'Blocked',
        back: 'Back to list',
        edit: 'Edit supervisor'
      };
  const canEditSupervisor = !isCurrentSupervisor && !isProtectedSupervisor;
%>

<link rel="stylesheet" href="/admin/assets/css/pages/people-resource.css?v=2.6.5">

<section class="kt-people-page kt-supervisors-page" dir="<%= showLocale === 'ar' ? 'rtl' : 'ltr' %>">
  <div class="kt-people-container kt-people-container--detail">
    <header class="kt-people-hero">
      <div class="kt-people-hero__identity">
        <span class="kt-people-hero__icon" aria-hidden="true"><i class="ti ti-user-shield"></i></span>
        <div>
          <span class="kt-people-hero__eyebrow"><%= showCopy.eyebrow %></span>
          <h1><%= showCopy.title %></h1>
          <p><%= showCopy.subtitle %></p>
        </div>
      </div>
      <a class="kt-people-btn kt-people-btn--secondary" href="<%= referer || '/dashboard/supervisions' %>">
        <i class="ti ti-arrow-right" aria-hidden="true"></i>
        <span><%= showCopy.back %></span>
      </a>
    </header>

    <section class="kt-people-detail-card">
      <div class="kt-people-card-heading">
        <span class="kt-people-card-heading__icon" aria-hidden="true"><i class="ti ti-id-badge-2"></i></span>
        <div>
          <h2><%= showCopy.cardTitle %></h2>
          <p><%= showCopy.cardSubtitle %></p>
        </div>
      </div>

      <div class="kt-people-profile">
        <div class="kt-people-profile__identity">
          <span class="kt-people-profile__avatar">
            <img
              src="<%= supervisor.image %>"
              alt="<%= supervisor.name || '' %>"
              data-people-image
              data-people-image-fallback="/admin/assets/img/front-pages/icons/user.png"
            >
          </span>
          <h2><%= supervisor.name || '—' %></h2>
          <p dir="ltr"><%= supervisor.email || '—' %></p>
          <span class="kt-people-badge <%= supervisor.status === 'block' ? 'kt-people-badge--blocked' : 'kt-people-badge--active' %>">
            <%= supervisor.status === 'block' ? showCopy.blocked : showCopy.active %>
          </span>
        </div>

        <div class="kt-people-profile__details">
          <div class="kt-people-detail">
            <small><%= showCopy.name %></small>
            <strong><%= supervisor.name || '—' %></strong>
          </div>
          <div class="kt-people-detail">
            <small><%= showCopy.email %></small>
            <strong dir="ltr"><%= supervisor.email || '—' %></strong>
          </div>
          <div class="kt-people-detail">
            <small><%= showCopy.phone %></small>
            <strong dir="ltr"><%= supervisor.phone || '—' %></strong>
          </div>
          <div class="kt-people-detail">
            <small><%= showCopy.role %></small>
            <strong><%= roleLabel || '—' %></strong>
          </div>
          <div class="kt-people-detail">
            <small><%= showCopy.status %></small>
            <strong><%= supervisor.status === 'block' ? showCopy.blocked : showCopy.active %></strong>
          </div>
          <div class="kt-people-detail">
            <small><%= showCopy.joined %></small>
            <strong><%= supervisor.timeAdd || '—' %></strong>
          </div>
          <div class="kt-people-detail kt-people-detail--full">
            <small><%= showCopy.protection %></small>
            <strong>
              <%= isCurrentSupervisor ? showCopy.current : (isProtectedSupervisor ? showCopy.protected : showCopy.editable) %>
            </strong>
          </div>
        </div>
      </div>

      <div class="kt-people-detail-actions">
        <a class="kt-people-btn kt-people-btn--soft" href="<%= referer || '/dashboard/supervisions' %>">
          <%= showCopy.back %>
        </a>
        <% if (canEditSupervisor) { %>
          <a class="kt-people-btn kt-people-btn--primary" href="/dashboard/supervisions/edit/<%= currentSupervisorId %>">
            <i class="ti ti-edit" aria-hidden="true"></i>
            <span><%= showCopy.edit %></span>
          </a>
        <% } %>
      </div>
    </section>
  </div>
</section>
<script src="/admin/assets/js/pages/people-resource.js?v=2.6.5" defer></script>
