cbsnexora/src/app/system/roles-and-permissions/edit-role/edit-role.component.html

<!--
  Copyright since 2025 Mifos Initiative

  This Source Code Form is subject to the terms of the Mozilla Public
  License, v. 2.0. If a copy of the MPL was not distributed with this
  file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->

<div class="er-container">
  <!-- Header -->
  <div class="er-header">
    <button mat-stroked-button [routerLink]="['../../']" class="er-back">
      <i class="fas fa-arrow-left"></i> {{ 'labels.inputs.Manage Roles and Permission' | translate }}
    </button>
    <h2 class="er-header__title">{{ 'labels.text.Edit Role' | translate }}</h2>
  </div>

  <!-- Form Card -->
  <div class="er-card">
    <form [formGroup]="roleForm" (ngSubmit)="submit()">
      <!-- Role Details Section -->
      <div class="er-section">
        <div class="er-section__header">
          <i class="fas fa-key"></i>
          <h3>{{ 'labels.inputs.Role' | translate }}</h3>
        </div>
        <div class="er-grid">
          <mat-form-field appearance="outline" class="er-field er-field--full">
            <mat-label>{{ 'labels.inputs.Role Name' | translate }}</mat-label>
            <input matInput disabled formControlName="name" />
          </mat-form-field>

          <mat-form-field appearance="outline" class="er-field er-field--full">
            <mat-label>{{ 'labels.inputs.Role Description' | translate }}</mat-label>
            <input matInput required formControlName="description" />
            @if (roleForm.controls.description.hasError('required')) {
              <mat-error>
                {{ 'labels.inputs.Description' | translate }} {{ 'labels.commons.is' | translate }}
                <strong>{{ 'labels.commons.required' | translate }}</strong>
              </mat-error>
            }
          </mat-form-field>
        </div>
      </div>

      <!-- Actions -->
      <div class="er-actions">
        <button type="button" mat-stroked-button [routerLink]="['../../']" class="er-actions__cancel">
          {{ 'labels.buttons.Cancel' | translate }}
        </button>
        <button
          type="submit"
          mat-flat-button
          color="primary"
          [disabled]="!roleForm.valid || roleForm.pristine"
          class="er-actions__submit"
        >
          <i class="fas fa-check"></i> {{ 'labels.buttons.Submit' | translate }}
        </button>
      </div>
    </form>
  </div>
</div>