<p-toast />
<p-confirmDialog />

<div class="page-container">
  <app-page-header title="RECONCILIATION_RULES.TITLE" subtitle="RECONCILIATION_RULES.SUBTITLE" (refresh)="retry()">
    <p-button [label]="'RECONCILIATION_RULES.NEW' | translate" icon="pi pi-plus" (onClick)="openNew()" />
  </app-page-header>

  <ng-template #bodyTpl let-item>
      <tr>
        <td>{{ item.name_ar || item.name }}</td>
        <td>{{ item.description_pattern }}</td>
        <td>{{ item.account?.name || '-' }}</td>
        <td><p-tag [value]="item.is_active ? ('COMMON.ACTIVE' | translate) : ('COMMON.INACTIVE' | translate)" [severity]="item.is_active ? 'success' : 'danger'" /></td>
        <td>
          <div class="action-buttons">
            <p-button icon="pi pi-pencil" [rounded]="true" [text]="true" severity="info" (onClick)="edit(item)" />
            <p-button icon="pi pi-trash" [rounded]="true" [text]="true" severity="danger" (onClick)="delete(item)" />
          </div>
        </td>
      </tr>
    </ng-template>
  <app-data-table [data]="items()" [loading]="loading()" (retry)="retry()" [columns]="columns" [bodyTpl]="bodyTpl">
  </app-data-table>
</div>

<app-form-dialog [(visible)]="dialogVisible" [header]="editing() ? ('RECONCILIATION_RULES.EDIT' | translate) : ('RECONCILIATION_RULES.NEW' | translate)" [saving]="saving()" (save)="onSave()" [width]="'600px'">
  <form [formGroup]="form" class="dialog-form">
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'RECONCILIATION_RULES.NAME_AR' | translate }} *</label>
        <input pInputText formControlName="name_ar" />
      </div>
      <div class="form-field">
        <label>{{ 'RECONCILIATION_RULES.NAME_EN' | translate }}</label>
        <input pInputText formControlName="name" />
      </div>
    </div>
    <div class="form-field">
      <label>{{ 'RECONCILIATION_RULES.PATTERN' | translate }} *</label>
      <input pInputText formControlName="description_pattern" />
    </div>
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'RECONCILIATION_RULES.ACCOUNT' | translate }} *</label>
        <p-select formControlName="account_id" [options]="(accounts$ | async) || []"
          optionLabel="name" optionValue="id" [filter]="true" filterBy="name,code"
          [placeholder]="'COMMON.SELECT' | translate" appendTo="body" />
      </div>
      <div class="form-field switch-field-wrap">
        <label>{{ 'COMMON.ACTIVE' | translate }}</label>
        <p-toggleSwitch formControlName="is_active" />
      </div>
    </div>
  </form>
</app-form-dialog>
