<%
  const editLocale = typeof lang === 'string'
    ? lang
    : (user && user.lang ? user.lang : 'ar');
  const editEnglish = String(editLocale).toLowerCase().startsWith('en');
  const isProtectedRole = Boolean(roles && (roles.isProtected || roles.isAdmin));
  const copy = editEnglish ? {
    title: isProtectedRole ? 'Review protected role' : 'Edit access role',
    subtitle: isProtectedRole
      ? 'System-role permissions are locked to protect administrative access.'
      : 'Review the role identity and its permission coverage before saving.',
    identity: 'Role identity',
    identityHelp: 'Bilingual role information used throughout the administration console.',
    submit: 'Save changes',
    loading: 'Saving...',
    selected: 'permissions selected',
    protected: 'Protected system role',
    protectedHelp: 'This role is currently read-only. Its permissions cannot be changed.',
    back: 'Back to roles'
  } : {
    title: isProtectedRole ? 'مراجعة الدور المحمي' : 'تعديل دور الوصول',
    subtitle: isProtectedRole
      ? 'صلاحيات دور النظام مقفلة لحماية الوصول الإداري.'
      : 'راجع هوية الدور ونطاق صلاحياته قبل حفظ التعديلات.',
    identity: 'هوية الدور',
    identityHelp: 'بيانات الدور باللغتين كما ستظهر داخل لوحة الإدارة.',
    submit: 'حفظ التعديلات',
    loading: 'جاري الحفظ...',
    selected: 'صلاحية محددة',
    protected: 'دور نظام محمي',
    protectedHelp: 'هذا الدور متاح للقراءة فقط ولا يمكن تغيير صلاحياته.',
    back: 'العودة للأدوار'
  };
%>

<link rel="stylesheet" href="/admin/assets/css/pages/permissions.css?v=2.7.1-rowfix">

<section class="kt-permissions-page kt-permissions-page--form" dir="<%= editEnglish ? 'ltr' : 'rtl' %>">
  <div class="kt-permissions-container kt-permissions-container--form">
    <header class="kt-permissions-form-hero">
      <div>
        <span aria-hidden="true"><i class="ti <%= isProtectedRole ? 'ti-lock' : 'ti-edit' %>"></i></span>
        <div>
          <h1><%= copy.title %></h1>
          <p><%= copy.subtitle %></p>
        </div>
      </div>
      <a href="/dashboard/permissions">
        <i class="ti ti-arrow-back-up" aria-hidden="true"></i>
        <%= copy.back %>
      </a>
    </header>

    <% if (isProtectedRole) { %>
      <div class="kt-permissions-protected-banner">
        <span aria-hidden="true"><i class="ti ti-lock"></i></span>
        <div>
          <strong><%= copy.protected %></strong>
          <p><%= copy.protectedHelp %></p>
        </div>
        <% if (roles.assignmentCount) { %>
          <small><i class="ti ti-users" aria-hidden="true"></i> <%= roles.assignmentCount %></small>
        <% } %>
      </div>
    <% } %>

    <form
      class="kt-permissions-form"
      action="/dashboard/permissions/edit/<%= roles.roleId %>"
      method="POST"
      data-permissions-form
      data-protected="<%= isProtectedRole ? 'true' : 'false' %>"
      novalidate
    >
      <section class="kt-permissions-identity">
        <div class="kt-permissions-section-heading">
          <span aria-hidden="true"><i class="ti ti-id"></i></span>
          <div>
            <h2><%= copy.identity %></h2>
            <p><%= copy.identityHelp %></p>
          </div>
        </div>
        <%- include('./partials/formFields.ejs', {
          role: roles,
          csrfToken,
          lang: editLocale,
          readOnly: isProtectedRole
        }) %>
      </section>

      <%- include('./partials/permissionMatrix.ejs', {
        role: roles,
        permissions,
        lang: editLocale,
        readOnly: isProtectedRole
      }) %>

      <p class="kt-permissions-form-message" data-permissions-form-message aria-live="polite"></p>

      <div class="kt-permissions-savebar <%= isProtectedRole ? 'is-read-only' : '' %>" data-permissions-savebar>
        <div>
          <span class="kt-permissions-savebar__status">
            <i class="ti <%= isProtectedRole ? 'ti-lock' : 'ti-shield-check' %>" aria-hidden="true"></i>
            <strong data-permissions-save-count><%= Array.isArray(roles.permissions) ? roles.permissions.length : 0 %></strong>
            <small><%= copy.selected %></small>
          </span>
        </div>
        <% if (!isProtectedRole) { %>
          <button
            class="kt-permissions-button kt-permissions-button--primary kt-permissions-submit"
            type="submit"
            data-permissions-submit
            data-default-label="<%= copy.submit %>"
            data-loading-label="<%= copy.loading %>"
          >
            <i class="ti ti-check" data-permissions-submit-icon aria-hidden="true"></i>
            <i class="ti ti-loader-2 kt-permissions-spinner" data-permissions-submit-spinner hidden aria-hidden="true"></i>
            <span data-permissions-submit-label><%= copy.submit %></span>
          </button>
        <% } else { %>
          <span class="kt-permissions-read-only-chip"><i class="ti ti-eye" aria-hidden="true"></i><%= copy.protected %></span>
        <% } %>
      </div>
    </form>
  </div>
</section>

<script src="/admin/assets/js/pages/permissions.js?v=2.7.1-rowfix"></script>
