@if (form) {
  <lib-form-section [formGroup]="form" class="source-content">
    <!-- NPM Header -->
    <div class="npm-header">
      <div class="header-icon-wrapper">
        <nb-icon icon="npm" pack="eva"></nb-icon>
      </div>
      <div class="header-content">
        <h6 class="header-title">{{ 'PLUGIN.FORM.NPM.TITLE' | translate }}</h6>
        <p class="header-description">{{ 'PLUGIN.FORM.NPM.DESCRIPTION' | translate }}</p>
      </div>
    </div>
    <!-- Package Name -->
    @if (form.get('name')) {
      <lib-form-row>
        <nb-form-field class="form-group full-width">
          <label class="label">
            <nb-icon icon="cube-outline" class="label-icon"></nb-icon>
            {{ 'PLUGIN.FORM.NPM.PACKAGE_NAME' | translate }}
            <span class="required-indicator">*</span>
          </label>
          <input
            nbInput
            fullWidth
            id="npm-name"
            formControlName="name"
            placeholder="@scope/package-name"
            [status]="getFieldError('name') ? 'danger' : 'basic'"
            />
            @if(getFieldError('name', 'required')) {
              <nb-hint class="hint-danger">
                <nb-icon icon="alert-circle-outline"></nb-icon>
                {{ 'PLUGIN.FORM.VALIDATION.PACKAGE_NAME_REQUIRED' | translate }}
              </nb-hint>
              } @if(getFieldError('name', 'pattern')) {
              <nb-hint class="hint-danger">
                <nb-icon icon="alert-circle-outline"></nb-icon>
                {{ 'PLUGIN.FORM.VALIDATION.INVALID_PACKAGE_NAME' | translate }}
              </nb-hint>
              } @if(form.get('name')?.valid && form.get('name')?.value) {
              <nb-hint class="hint-success">
                <nb-icon icon="checkmark-circle-outline"></nb-icon>
                Valid NPM package name
              </nb-hint>
            }
          </nb-form-field>
        </lib-form-row>
      }
      <!-- Registry & Scope -->
      <lib-form-row>
        @if (form.get('registry')) {
          <nb-form-field class="form-group">
            <label class="label">
              <nb-icon icon="globe-outline" class="label-icon"></nb-icon>
              {{ 'PLUGIN.FORM.NPM.REGISTRY' | translate }}
            </label>
            <input
              nbInput
              fullWidth
              id="npm-registry"
              formControlName="registry"
              placeholder="https://registry.npmjs.org"
              [status]="getFieldError('registry') ? 'danger' : 'basic'"
              />
              @if(getFieldError('registry', 'pattern')) {
                <nb-hint class="hint-danger">
                  <nb-icon icon="alert-circle-outline"></nb-icon>
                  {{ 'PLUGIN.FORM.VALIDATION.INVALID_URL' | translate }}
                </nb-hint>
                } @if(form.get('registry')?.valid && form.get('registry')?.value) {
                <nb-hint class="hint-success">
                  <nb-icon icon="checkmark-circle-outline"></nb-icon>
                  Valid registry URL
                </nb-hint>
              }
            </nb-form-field>
          }
          @if (form.get('scope')) {
            <nb-form-field class="form-group">
              <label class="label">
                <nb-icon icon="at-outline" class="label-icon"></nb-icon>
                {{ 'PLUGIN.FORM.NPM.SCOPE' | translate }}
              </label>
              <input
                nbInput
                fullWidth
                id="npm-scope"
                formControlName="scope"
                placeholder="@organization"
                [status]="getFieldError('scope') ? 'danger' : 'basic'"
                />
                @if(getFieldError('scope', 'pattern')) {
                  <nb-hint class="hint-danger">
                    <nb-icon icon="alert-circle-outline"></nb-icon>
                    {{ 'PLUGIN.FORM.VALIDATION.INVALID_SCOPE' | translate }}
                  </nb-hint>
                }
              </nb-form-field>
            }
          </lib-form-row>
          <!-- Private Package Toggle -->
          @if (form.get('private')) {
            <lib-form-row>
              <div class="form-group full-width toggle-group">
                <div class="toggle-container">
                  <div class="toggle-label">
                    <nb-icon icon="lock-outline" class="label-icon"></nb-icon>
                    <div>
                      <label class="label">{{ 'PLUGIN.FORM.NPM.PRIVATE_PACKAGE' | translate }}</label>
                      <p class="toggle-description">{{ 'PLUGIN.FORM.NPM.PRIVATE_PACKAGE_DESC' | translate }}</p>
                    </div>
                  </div>
                  <nb-toggle formControlName="private" status="primary"></nb-toggle>
                </div>
              </div>
            </lib-form-row>
          }
        </lib-form-section>
      }