<%
  const roleRecord = typeof role !== 'undefined' && role ? role : {};
  const roleName = roleRecord.name || {};
  const roleNameAr = typeof roleName.ar === 'string' ? roleName.ar : '';
  const roleNameEn = typeof roleName.en === 'string' ? roleName.en : '';
  const roleDescription = typeof roleRecord.description === 'string' ? roleRecord.description : '';
  const fieldsLocale = typeof lang === 'string' && lang.toLowerCase().startsWith('en') ? 'en' : 'ar';
  const fieldsEnglish = fieldsLocale === 'en';
  const fieldsReadOnly = Boolean(readOnly);
  const fieldsCopy = fieldsEnglish ? {
    ar: 'Role name in Arabic',
    en: 'Role name in English',
    description: 'Role description',
    arPlaceholder: 'اكتب اسم الدور بالعربية',
    enPlaceholder: 'Write the role name in English',
    descriptionPlaceholder: 'Describe this role’s administrative responsibility',
    required: 'This field is required'
  } : {
    ar: 'اسم الدور بالعربية',
    en: 'اسم الدور بالإنجليزية',
    description: 'وصف الدور',
    arPlaceholder: 'اكتب اسم الدور بالعربية',
    enPlaceholder: 'Write the role name in English',
    descriptionPlaceholder: 'وضّح مسؤولية هذا الدور داخل لوحة التحكم',
    required: 'هذا الحقل مطلوب'
  };
%>

<input type="hidden" name="_csrf" value="<%= csrfToken %>">

<div class="kt-permissions-form-grid">
  <div class="kt-permissions-field" data-permissions-field>
    <label for="permission-role-name-ar">
      <span><%= fieldsCopy.ar %></span>
      <small aria-hidden="true">AR</small>
    </label>
    <input
      id="permission-role-name-ar"
      name="name[ar]"
      type="text"
      value="<%= roleNameAr %>"
      placeholder="<%= fieldsCopy.arPlaceholder %>"
      dir="rtl"
      required
      <%= fieldsReadOnly ? 'readonly aria-readonly="true"' : '' %>
      data-permissions-input
      data-required-message="<%= fieldsCopy.required %>"
      aria-describedby="permission-role-name-ar-error"
    >
    <p id="permission-role-name-ar-error" data-permissions-field-error aria-live="polite"></p>
  </div>

  <div class="kt-permissions-field" data-permissions-field>
    <label for="permission-role-name-en">
      <span><%= fieldsCopy.en %></span>
      <small aria-hidden="true">EN</small>
    </label>
    <input
      id="permission-role-name-en"
      name="name[en]"
      type="text"
      value="<%= roleNameEn %>"
      placeholder="<%= fieldsCopy.enPlaceholder %>"
      dir="ltr"
      required
      <%= fieldsReadOnly ? 'readonly aria-readonly="true"' : '' %>
      data-permissions-input
      data-required-message="<%= fieldsCopy.required %>"
      aria-describedby="permission-role-name-en-error"
    >
    <p id="permission-role-name-en-error" data-permissions-field-error aria-live="polite"></p>
  </div>

  <div class="kt-permissions-field kt-permissions-field--wide" data-permissions-field>
    <label for="permission-role-description">
      <span><%= fieldsCopy.description %></span>
    </label>
    <textarea
      id="permission-role-description"
      name="description"
      rows="3"
      placeholder="<%= fieldsCopy.descriptionPlaceholder %>"
      required
      <%= fieldsReadOnly ? 'readonly aria-readonly="true"' : '' %>
      data-permissions-input
      data-required-message="<%= fieldsCopy.required %>"
      aria-describedby="permission-role-description-error"
    ><%= roleDescription %></textarea>
    <p id="permission-role-description-error" data-permissions-field-error aria-live="polite"></p>
  </div>
</div>
