+ </div>
+
+ <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+
+ <ng-container formGroupName="instance">
+ <ng-container formGroupName="customizations">
+ <div class="form-group">
+ <label i18n for="customizationJavascript">JavaScript</label>
+ <my-help>
+ <ng-template ptTemplate="customHtml">
+ <ng-container i18n>
+ Write JavaScript code directly.<br />Example: <pre>console.log('my instance is amazing');</pre>
+ </ng-container>
+ </ng-template>
+ </my-help>
+
+ <textarea
+ id="customizationJavascript" formControlName="javascript"
+ [ngClass]="{ 'input-error': formErrors['instance.customizations.javascript'] }"
+ ></textarea>
+
+ <div *ngIf="formErrors.instance.customizations.javascript" class="form-error">{{ formErrors.instance.customizations.javascript }}</div>
+ </div>
+
+ <div class="form-group">
+ <label for="customizationCSS">CSS</label>
+
+ <my-help>
+ <ng-template ptTemplate="customHtml">
+ <ng-container i18n>
+ Write CSS code directly. Example:<br /><br />
+ <pre>
+ #custom-css {{ '{' }}
+ color: red;
+ {{ '}' }}
+ </pre>
+ Prepend with <em>#custom-css</em> to override styles. Example:<br /><br />
+ <pre>
+ #custom-css .logged-in-email {{ '{' }}
+ color: red;
+ {{ '}' }}
+ </pre>
+ </ng-container>
+ </ng-template>
+ </my-help>
+
+ <textarea
+ id="customizationCSS" formControlName="css"
+ [ngClass]="{ 'input-error': formErrors['instance.customizations.css'] }"
+ ></textarea>
+ <div *ngIf="formErrors.instance.customizations.css" class="form-error">{{ formErrors.instance.customizations.css }}</div>
+ </div>
+ </ng-container>
+ </ng-container>
+
+ </div>
+ </div>