oggui/ogWebconsole/src/app/components/plugins/plugin-settings/plugin-settings.component.html

<div class="plugin-settings-container">
  @if (plugin) {
    <div class="plugin-header-card">
      <div class="plugin-header-icon-box">
        <mat-icon class="plugin-header-icon">{{ plugin.icon }}</mat-icon>
      </div>
      <div class="plugin-header-info">
        <div class="plugin-title-row">
          <h2 class="plugin-title">{{ plugin.title }}</h2>
          <span class="plugin-version-tag">v{{ plugin.version }}</span>
          <span class="plugin-status-tag">Activo</span>
        </div>
        <p class="plugin-description">{{ plugin.description }}</p>
        <span class="plugin-author">Autor: {{ plugin.author }}</span>
      </div>
    </div>

    <div class="settings-form-wrapper">
      <div class="section-header-row">
        <div class="section-title-box">
          <mat-icon class="section-icon">tune</mat-icon>
          <h3 class="section-heading">Parámetros de Configuración del Plugin</h3>
        </div>

        <div class="form-actions-bar top-actions">
          <button mat-stroked-button color="warn" (click)="reset()" class="btn-reset">
            <mat-icon>restart_alt</mat-icon>
            Restaurar por defecto
          </button>
          <button mat-raised-button color="primary" (click)="save()" class="btn-save">
            <mat-icon>save</mat-icon>
            Guardar Configuración
          </button>
        </div>
      </div>

      <p class="section-subheading">
        Ajusta el comportamiento y las opciones de ejecución. Los cambios se aplicarán inmediatamente a las nuevas órdenes enviadas a los puestos.
      </p>

      <div class="form-fields-grid">
        @for (field of schema; track field.key) {
          <div class="form-field-card" [class.full-width]="field.type === 'textarea'">
            <div class="field-meta">
              <label class="field-label" [for]="'field-' + field.key">{{ field.label }}</label>
              @if (field.description) {
                <span class="field-description">{{ field.description }}</span>
              }
            </div>

            <div class="field-control-container">
              @switch (field.type) {
                @case ('select') {
                  <mat-form-field appearance="outline" class="w-100">
                    <mat-select [id]="'field-' + field.key" [(ngModel)]="configData[field.key]">
                      @for (opt of field.options; track opt) {
                        <mat-option [value]="opt">{{ opt }}</mat-option>
                      }
                    </mat-select>
                  </mat-form-field>
                }

                @case ('checkbox') {
                  <div class="toggle-wrapper">
                    <mat-slide-toggle [id]="'field-' + field.key" color="primary" [(ngModel)]="configData[field.key]">
                      {{ configData[field.key] ? 'Habilitado' : 'Deshabilitado' }}
                    </mat-slide-toggle>
                  </div>
                }

                @case ('number') {
                  <mat-form-field appearance="outline" class="w-100">
                    <input matInput type="number" [id]="'field-' + field.key" [(ngModel)]="configData[field.key]">
                  </mat-form-field>
                }

                @case ('text') {
                  <mat-form-field appearance="outline" class="w-100">
                    <input matInput type="text" [id]="'field-' + field.key" [(ngModel)]="configData[field.key]">
                  </mat-form-field>
                }

                @case ('textarea') {
                  <div class="code-editor-box">
                    <div class="code-editor-header">
                      <div class="code-header-left">
                        <span class="terminal-dot red"></span>
                        <span class="terminal-dot yellow"></span>
                        <span class="terminal-dot green"></span>
                        <span class="code-lang-badge">PowerShell</span>
                      </div>
                      <div class="code-header-actions">
                        @if (field.action) {
                          <button type="button" class="code-action-btn action-helper" (click)="runFieldAction(field)" [title]="field.action.label">
                            <mat-icon class="action-btn-icon">{{ field.action.icon || 'auto_fix_high' }}</mat-icon>
                            <span>{{ field.action.label }}</span>
                          </button>
                        }
                        <button type="button" class="code-action-btn" (click)="copyToClipboard(configData[field.key])" title="Copiar script">
                          <mat-icon class="action-btn-icon">content_copy</mat-icon>
                          <span>Copiar</span>
                        </button>
                        <button type="button" class="code-action-btn" [class.active]="isEditingScript(field.key)" (click)="toggleScriptEdit(field.key)">
                          <mat-icon class="action-btn-icon">{{ isEditingScript(field.key) ? 'visibility' : 'edit' }}</mat-icon>
                          <span>{{ isEditingScript(field.key) ? 'Ver coloreado' : 'Editar código' }}</span>
                        </button>
                      </div>
                    </div>

                    @if (!isEditingScript(field.key)) {
                      <div class="code-preview-scroll">
                        <div class="code-lines-table">
                          @for (line of getScriptLines(configData[field.key]); track $index) {
                            <div class="code-line-row">
                              <span class="line-number">{{ $index + 1 }}</span>
                              <span class="line-code" [innerHTML]="line"></span>
                            </div>
                          }
                        </div>
                      </div>
                    } @else {
                      <div class="code-textarea-wrapper">
                        <textarea
                          [id]="'field-' + field.key"
                          class="code-raw-textarea"
                          rows="9"
                          [(ngModel)]="configData[field.key]"
                          spellcheck="false"
                        ></textarea>
                      </div>
                    }
                  </div>
                }
              }
            </div>
          </div>
        }
      </div>
    </div>
  } @else {
    <div class="no-plugin-box">
      <mat-icon class="no-plugin-icon">info</mat-icon>
      <p>Selecciona un plugin para ver y editar su configuración.</p>
    </div>
  }
</div>