<%
  const createLocale = typeof lang === 'string'
    ? lang
    : (user && user.lang ? user.lang : 'ar');
  const createEnglish = String(createLocale).toLowerCase().startsWith('en');
  const copy = createEnglish ? {
    title: 'Create access role',
    subtitle: 'Define the role identity, then grant only the permissions it needs.',
    identity: 'Role identity',
    identityHelp: 'Bilingual role information used throughout the administration console.',
    submit: 'Create role',
    loading: 'Creating...',
    selected: 'permissions selected',
    back: 'Back to roles'
  } : {
    title: 'إضافة دور وصول',
    subtitle: 'عرّف هوية الدور، ثم امنحه الصلاحيات التي يحتاجها فقط.',
    identity: 'هوية الدور',
    identityHelp: 'بيانات الدور باللغتين كما ستظهر داخل لوحة الإدارة.',
    submit: 'إضافة الدور',
    loading: 'جاري الإضافة...',
    selected: 'صلاحية محددة',
    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="<%= createEnglish ? '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 ti-shield"></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>

    <form
      class="kt-permissions-form"
      action="/dashboard/permissions/create"
      method="POST"
      data-permissions-form
      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: null,
          csrfToken,
          lang: createLocale,
          readOnly: false
        }) %>
      </section>

      <%- include('./partials/permissionMatrix.ejs', {
        role: null,
        permissions,
        lang: createLocale,
        readOnly: false
      }) %>

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

      <div class="kt-permissions-savebar" data-permissions-savebar>
        <div>
          <span class="kt-permissions-savebar__status">
            <i class="ti ti-shield-check" aria-hidden="true"></i>
            <strong data-permissions-save-count>0</strong>
            <small><%= copy.selected %></small>
          </span>
        </div>
        <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>
      </div>
    </form>
  </div>
</section>

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