@if (form) {
  <lib-form-section [formGroup]="form" class="source-content">
    <!-- CDN Header -->
    <div class="cdn-header">
      <div class="header-icon-wrapper">
        <nb-icon icon="cloud-download-outline"></nb-icon>
      </div>
      <div class="header-content">
        <h6 class="header-title">{{ 'PLUGIN.FORM.CDN.TITLE' | translate }}</h6>
        <p class="header-description">{{ 'PLUGIN.FORM.CDN.DESCRIPTION' | translate }}</p>
      </div>
    </div>
    <!-- CDN URL -->
    @if (form.get('url')) {
      <lib-form-row>
        <nb-form-field class="form-group full-width">
          <label class="label">
            <nb-icon icon="link-outline" class="label-icon"></nb-icon>
            {{ 'PLUGIN.FORM.CDN.URL' | translate }}
            <span class="required-indicator">*</span>
          </label>
          <input
            nbInput
            fullWidth
            id="cdn-url"
            formControlName="url"
            placeholder="https://cdn.example.com/plugin.js"
            type="url"
            [status]="getFieldError('url') ? 'danger' : 'basic'"
            />
            @if(getFieldError('url', 'required')) {
              <nb-hint class="hint-danger">
                <nb-icon icon="alert-circle-outline"></nb-icon>
                {{ 'PLUGIN.FORM.VALIDATION.URL_REQUIRED' | translate }}
              </nb-hint>
              } @if(getFieldError('url', '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('url')?.valid && form.get('url')?.value) {
              <nb-hint class="hint-success">
                <nb-icon icon="checkmark-circle-outline"></nb-icon>
                Valid CDN URL
              </nb-hint>
            }
          </nb-form-field>
        </lib-form-row>
      }
      <!-- Security Section -->
      <div class="security-section">
        <div class="section-header">
          <nb-icon icon="shield-outline" status="success"></nb-icon>
          <h6 class="section-title">{{ 'PLUGIN.FORM.CDN.SECURITY' | translate }}</h6>
        </div>
        <lib-form-row>
          @if (form.get('integrity')) {
            <nb-form-field class="form-group">
              <label class="label">
                <nb-icon icon="shield-outline" class="label-icon"></nb-icon>
                {{ 'PLUGIN.FORM.CDN.INTEGRITY' | translate }}
              </label>
              <input nbInput fullWidth id="cdn-integrity" formControlName="integrity" placeholder="sha384-..." />
              @if(form.get('integrity')?.value) {
                <nb-hint class="hint-info">
                  <nb-icon icon="info-outline"></nb-icon>
                  SRI hash for resource integrity
                </nb-hint>
              }
            </nb-form-field>
          }
          @if (form.get('crossOrigin')) {
            <nb-form-field class="form-group">
              <label class="label">
                <nb-icon icon="flip-2-outline" class="label-icon"></nb-icon>
                {{ 'PLUGIN.FORM.CDN.CROSS_ORIGIN' | translate }}
              </label>
              <input nbInput fullWidth id="cdn-crossorigin" formControlName="crossOrigin" placeholder="anonymous" />
              @if(form.get('crossOrigin')?.value) {
                <nb-hint class="hint-info">
                  <nb-icon icon="info-outline"></nb-icon>
                  CORS attribute: {{ form.get('crossOrigin')?.value }}
                </nb-hint>
              }
            </nb-form-field>
          }
        </lib-form-row>
      </div>
      <!-- Security Info Alert -->
      <nb-alert status="info" size="small" class="security-alert">
        <div class="alert-content">
          <nb-icon icon="bulb-outline"></nb-icon>
          <span>{{ 'PLUGIN.FORM.CDN.SECURITY_INFO' | translate }}</span>
        </div>
      </nb-alert>
    </lib-form-section>
  }