<form appFormSubmit [formGroup]="configurationOpenstackForm"
      (ngSubmit)="objectController.actionCallback(primaryAction)">
  <app-form-errors #formErrors [formGroup]="configurationOpenstackForm"></app-form-errors>

  <mat-accordion [multi]="true">
    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-panel-title class="full-width" i18n>
          Automatic images cleanup
        </mat-panel-title>
      </mat-expansion-panel-header>
      <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
        <div layoutDirection="column" appFlex="33" xsFlex="100" smFlex="100">
          <mat-checkbox formControlName="auto_cleanup_images" id="auto_cleanup_images" color="primary" i18n>Automatically cleanup images</mat-checkbox>
          <mat-form-field>
            <mat-label i18n>Number of days to keep images</mat-label>
            <input matInput placeholder="Number of days to keep images" i18n-placeholder type="number"
                   formControlName="auto_cleanup_number_of_days" required>
            <mat-error>{{fieldErrors['auto_cleanup_number_of_days']}}</mat-error>
          </mat-form-field>
          <mat-form-field>
            <mat-label i18n>Image types to cleanup</mat-label>
            <input matInput placeholder="Image types to cleanup" i18n-placeholder type="text"
                   formControlName="auto_cleanup_image_types" required>
            <mat-error>{{fieldErrors['credit_limit']}}</mat-error>
          </mat-form-field>
        </div>
        <div layoutDirection="column" appFlex="66" xsFlex="100" smFlex="100">
          <div class="fl-help-text">
            <h3 i18n>Automatically cleanup images</h3>
            <p i18n>Enables automatic cleanup of images for client.</p>
            <p i18n>You can specify the number of days to keep images starts from creation date of the image.</p>
            <p i18n>Once the number of days is reached the image will be deleted.</p>
            <p i18n>Valid image types for cleanup are: ami, ari, aki, vhd, vmdk, raw, qcow2, vdi and iso.</p>
          </div>
        </div>
      </div>
    </mat-expansion-panel>

    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-panel-title class="full-width" i18n>
          Suspend settings
        </mat-panel-title>
      </mat-expansion-panel-header>
      <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
        <div layoutDirection="column" appFlex="33" xsFlex="100" smFlex="100">
          <mat-checkbox formControlName="shelve_instances_on_suspend" id="shelve_instances_on_suspend" color="primary" i18n>Shelve instances on suspend</mat-checkbox>
        </div>
        <div layoutDirection="column" appFlex="66" xsFlex="100" smFlex="100">
          <div class="fl-help-text">
            <h3 i18n>Shelve instances on suspend</h3>
            <p i18n>Normally when suspending a service all instances are powered off. If you check "Shelve instances on suspend" instances will be shelved when suspending a service.</p>
          </div>
        </div>
      </div>
    </mat-expansion-panel>

    <mat-expansion-panel #instanceTemplatesPanel>
      <mat-expansion-panel-header>
        <mat-panel-title class="full-width" i18n>
          Instance price estimate template
        </mat-panel-title>
      </mat-expansion-panel-header>
      <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
        <div layoutDirection="column" appFlex="66" xsFlex="100" smFlex="100">
          <div *ngFor="let template of instancePriceEstTemplates.controls; let index = index">
            <mat-divider *ngIf="index > 0"></mat-divider>
            <div layoutDirection="row"
                 [class.fl-margin-top]="index > 0"
                 [class.fl-margin-bottom]="index < instancePriceEstTemplates.length - 1">
              <div [formGroup]="template" layoutDirection="column" appFlex="80">
                <mat-form-field>
                  <mat-label i18n>Language</mat-label>
                  <mat-select formControlName="language" placeholder="Language" i18n-placeholder>
                    <mat-option *ngFor="let languageArr of filteredLanguages(instancePriceEstTemplates, index)"
                                [value]="languageArr[0]">
                      {{ languageArr[1] }}
                    </mat-option>
                  </mat-select>
                  <mat-error>{{template.controls.language.errors | errorFormatter}}</mat-error>
                </mat-form-field>
                <mat-form-field class="fl-margin-top">
                  <mat-label i18n>Template</mat-label>
                  <textarea (keydown.control.enter)="objectController.actionCallback(primaryAction)"
                            matInput rows="5" placeholder="Template" i18n-placeholder type="text"
                            formControlName="content"></textarea>
                  <mat-error>{{template.controls.content.errors | errorFormatter}}</mat-error>
                </mat-form-field>
              </div>
              <div>
                <a mat-icon-button class="fl-margin-top-small"
                   (click)="removePriceEstimateTemplate(instancePriceEstTemplates, index)"
                   fl-tooltip="Remove template" i18n-fl-tooltip>
                  <mat-icon>delete</mat-icon>
                </a>
              </div>
            </div>
          </div>
          <div>
            <a (click)="addPriceEstimateTemplate(instancePriceEstTemplates)" mat-button i18n>Add new</a>
          </div>
        </div>
        <div layoutDirection="column" appFlex="33" xsFlex="100" smFlex="100">
          <div class="fl-help-text">
            <h3 i18n>Instance price estimate template</h3>
            <p i18n>
              This is where you can configure templates for estimated cost text shown on instance create form & on
              instance resize form.
            </p>
            <p i18n>List of supported variables:</p>
            <div layoutDirection="row" class="variables-container" *ngIf="openstackConfiguration?.cost_estimate_timespans">
              <span class="fl-tag fl-margin-right-small fl-margin-bottom-small"
                    *ngFor="let variable of openstackConfiguration.cost_estimate_timespans"
                    (click)="copyVariable(variable)"
                    [attr.fl-tooltip]="clickToCopyTooltip">
                {{ variable }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </mat-expansion-panel>

    <mat-expansion-panel #imageTemplatesPanel>
      <mat-expansion-panel-header>
        <mat-panel-title class="full-width" i18n>
          Image price estimate template
        </mat-panel-title>
      </mat-expansion-panel-header>
      <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
        <div layoutDirection="column" appFlex="66" xsFlex="100" smFlex="100">
          <div *ngFor="let template of imagePriceEstTemplates.controls; let index = index">
            <mat-divider *ngIf="index > 0"></mat-divider>
            <div layoutDirection="row"
                 [class.fl-margin-top]="index > 0"
                 [class.fl-margin-bottom]="index < imagePriceEstTemplates.length - 1">
              <div [formGroup]="template" layoutDirection="column" appFlex="80">
                <mat-form-field>
                  <mat-label i18n>Language</mat-label>
                  <mat-select formControlName="language" placeholder="Language" i18n-placeholder>
                    <mat-option *ngFor="let languageArr of filteredLanguages(imagePriceEstTemplates, index)"
                                [value]="languageArr[0]">
                      {{ languageArr[1] }}
                    </mat-option>
                  </mat-select>
                  <mat-error>{{template.controls.language.errors | errorFormatter}}</mat-error>
                </mat-form-field>
                <mat-form-field class="fl-margin-top">
                  <mat-label i18n>Template</mat-label>
                  <textarea (keydown.control.enter)="objectController.actionCallback(primaryAction)"
                            matInput rows="5" placeholder="Template" i18n-placeholder type="text"
                            formControlName="content"></textarea>
                  <mat-error>{{template.controls.content.errors | errorFormatter}}</mat-error>
                </mat-form-field>
              </div>
              <div>
                <a mat-icon-button class="fl-margin-top-small"
                   (click)="removePriceEstimateTemplate(imagePriceEstTemplates, index)"
                   fl-tooltip="Remove template" i18n-fl-tooltip>
                  <mat-icon>delete</mat-icon>
                </a>
              </div>
            </div>
          </div>
          <div>
            <a (click)="addPriceEstimateTemplate(imagePriceEstTemplates)" mat-button i18n>Add new</a>
          </div>
        </div>
        <div layoutDirection="column" appFlex="33" xsFlex="100" smFlex="100">
          <div class="fl-help-text">
            <h3 i18n>Image price estimate template</h3>
            <p i18n>
              This is where you can configure templates for estimated cost text shown on image create,
              instance snapshot create & instance backup create forms.
            </p>
            <p i18n>List of supported variables:</p>
            <div layoutDirection="row" class="variables-container" *ngIf="openstackConfiguration?.cost_estimate_timespans">
              <span class="fl-tag fl-margin-right-small fl-margin-bottom-small"
                    *ngFor="let variable of openstackConfiguration.cost_estimate_timespans"
                    (click)="copyVariable(variable)"
                    [attr.fl-tooltip]="clickToCopyTooltip">
                {{ variable }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </mat-expansion-panel>

    <mat-expansion-panel #volumeTemplatesPanel>
      <mat-expansion-panel-header>
        <mat-panel-title class="full-width" i18n>
          Volume price estimate template
        </mat-panel-title>
      </mat-expansion-panel-header>
      <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
        <div layoutDirection="column" appFlex="66" xsFlex="100" smFlex="100">
          <div *ngFor="let template of volumePriceEstTemplates.controls; let index = index">
            <mat-divider *ngIf="index > 0"></mat-divider>
            <div layoutDirection="row"
                 [class.fl-margin-top]="index > 0"
                 [class.fl-margin-bottom]="index < volumePriceEstTemplates.length - 1">
              <div [formGroup]="template" layoutDirection="column" appFlex="80">
                <mat-form-field>
                  <mat-label i18n>Language</mat-label>
                  <mat-select formControlName="language" placeholder="Language" i18n-placeholder>
                    <mat-option *ngFor="let languageArr of filteredLanguages(volumePriceEstTemplates, index)"
                                [value]="languageArr[0]">
                      {{ languageArr[1] }}
                    </mat-option>
                  </mat-select>
                  <mat-error>{{template.controls.language.errors | errorFormatter}}</mat-error>
                </mat-form-field>
                <mat-form-field class="fl-margin-top">
                  <mat-label i18n>Template</mat-label>
                  <textarea (keydown.control.enter)="objectController.actionCallback(primaryAction)"
                            matInput rows="5" placeholder="Template" i18n-placeholder type="text"
                            formControlName="content"></textarea>
                  <mat-error>{{template.controls.content.errors | errorFormatter}}</mat-error>
                </mat-form-field>
              </div>
              <div>
                <a mat-icon-button class="fl-margin-top-small"
                   (click)="removePriceEstimateTemplate(volumePriceEstTemplates, index)"
                   fl-tooltip="Remove template" i18n-fl-tooltip>
                  <mat-icon>delete</mat-icon>
                </a>
              </div>
            </div>
          </div>
          <div>
            <a (click)="addPriceEstimateTemplate(volumePriceEstTemplates)" mat-button i18n>Add new</a>
          </div>
        </div>
        <div layoutDirection="column" appFlex="33" xsFlex="100" smFlex="100">
          <div class="fl-help-text">
            <h3 i18n>Volume price estimate template</h3>
            <p i18n>
              This is where you can configure templates for estimated cost text shown on volume create,
              volume backup create & volume snapshot create forms.
            </p>
            <p i18n>List of supported variables:</p>
            <div layoutDirection="row" class="variables-container" *ngIf="openstackConfiguration?.cost_estimate_timespans">
              <span class="fl-tag fl-margin-right-small fl-margin-bottom-small"
                    *ngFor="let variable of openstackConfiguration.cost_estimate_timespans"
                    (click)="copyVariable(variable)"
                    [attr.fl-tooltip]="clickToCopyTooltip">
                {{ variable }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </mat-expansion-panel>

    <mat-expansion-panel #floatingIpTemplatesPanel>
      <mat-expansion-panel-header>
        <mat-panel-title class="full-width" i18n>
          Floating IP price estimate template
        </mat-panel-title>
      </mat-expansion-panel-header>
      <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
        <div layoutDirection="column" appFlex="66" xsFlex="100" smFlex="100">
          <div *ngFor="let template of floatingIpPriceEstTemplates.controls; let index = index">
            <mat-divider *ngIf="index > 0"></mat-divider>
            <div layoutDirection="row"
                 [class.fl-margin-top]="index > 0"
                 [class.fl-margin-bottom]="index < floatingIpPriceEstTemplates.length - 1">
              <div [formGroup]="template" layoutDirection="column" appFlex="80">
                <mat-form-field>
                  <mat-label i18n>Language</mat-label>
                  <mat-select formControlName="language" placeholder="Language" i18n-placeholder>
                    <mat-option *ngFor="let languageArr of filteredLanguages(floatingIpPriceEstTemplates, index)"
                                [value]="languageArr[0]">
                      {{ languageArr[1] }}
                    </mat-option>
                  </mat-select>
                  <mat-error>{{template.controls.language.errors | errorFormatter}}</mat-error>
                </mat-form-field>
                <mat-form-field class="fl-margin-top">
                  <mat-label i18n>Template</mat-label>
                  <textarea (keydown.control.enter)="objectController.actionCallback(primaryAction)"
                            matInput rows="5" placeholder="Template" i18n-placeholder type="text"
                            formControlName="content"></textarea>
                  <mat-error>{{template.controls.content.errors | errorFormatter}}</mat-error>
                </mat-form-field>
              </div>
              <div>
                <a mat-icon-button class="fl-margin-top-small"
                   (click)="removePriceEstimateTemplate(floatingIpPriceEstTemplates, index)"
                   fl-tooltip="Remove template" i18n-fl-tooltip>
                  <mat-icon>delete</mat-icon>
                </a>
              </div>
            </div>
          </div>
          <div>
            <a (click)="addPriceEstimateTemplate(floatingIpPriceEstTemplates)" mat-button i18n>Add new</a>
          </div>
        </div>
        <div layoutDirection="column" appFlex="33" xsFlex="100" smFlex="100">
          <div class="fl-help-text">
            <h3 i18n>Floating IP price estimate template</h3>
            <p i18n>
              This is where you can configure templates for estimated cost text shown on floating IP create form.
            </p>
            <p i18n>List of supported variables:</p>
            <div layoutDirection="row" class="variables-container" *ngIf="openstackConfiguration?.cost_estimate_timespans">
              <span class="fl-tag fl-margin-right-small fl-margin-bottom-small"
                    *ngFor="let variable of openstackConfiguration.cost_estimate_timespans"
                    (click)="copyVariable(variable)"
                    [attr.fl-tooltip]="clickToCopyTooltip">
                {{ variable }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </mat-expansion-panel>

    <mat-expansion-panel #clusterTemplatesPanel>
      <mat-expansion-panel-header>
        <mat-panel-title class="full-width" i18n>
          Cluster price estimate template
        </mat-panel-title>
      </mat-expansion-panel-header>
      <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
        <div layoutDirection="column" appFlex="66" xsFlex="100" smFlex="100">
          <div *ngFor="let template of clusterPriceEstTemplates.controls; let index = index">
            <mat-divider *ngIf="index > 0"></mat-divider>
            <div layoutDirection="row"
                 [class.fl-margin-top]="index > 0"
                 [class.fl-margin-bottom]="index < clusterPriceEstTemplates.length - 1">
              <div [formGroup]="template" layoutDirection="column" appFlex="80">
                <mat-form-field>
                  <mat-label i18n>Language</mat-label>
                  <mat-select formControlName="language" placeholder="Language" i18n-placeholder>
                    <mat-option *ngFor="let languageArr of filteredLanguages(clusterPriceEstTemplates, index)"
                                [value]="languageArr[0]">
                      {{ languageArr[1] }}
                    </mat-option>
                  </mat-select>
                  <mat-error>{{template.controls.language.errors | errorFormatter}}</mat-error>
                </mat-form-field>
                <mat-form-field class="fl-margin-top">
                  <mat-label i18n>Template</mat-label>
                  <textarea (keydown.control.enter)="objectController.actionCallback(primaryAction)"
                            matInput rows="5" placeholder="Template" i18n-placeholder type="text"
                            formControlName="content"></textarea>
                  <mat-error>{{template.controls.content.errors | errorFormatter}}</mat-error>
                </mat-form-field>
              </div>
              <div>
                <a mat-icon-button class="fl-margin-top-small"
                   (click)="removePriceEstimateTemplate(clusterPriceEstTemplates, index)"
                   fl-tooltip="Remove template" i18n-fl-tooltip>
                  <mat-icon>delete</mat-icon>
                </a>
              </div>
            </div>
          </div>
          <div>
            <a (click)="addPriceEstimateTemplate(clusterPriceEstTemplates)" mat-button i18n>Add new</a>
          </div>
        </div>
        <div layoutDirection="column" appFlex="33" xsFlex="100" smFlex="100">
          <div class="fl-help-text">
            <h3 i18n>Cluster price estimate template</h3>
            <p i18n>
              This is where you can configure templates for estimated cost text shown on cluster create form.
            </p>
            <p i18n>List of supported variables:</p>
            <div layoutDirection="row" class="variables-container" *ngIf="openstackConfiguration?.cost_estimate_timespans">
              <span class="fl-tag fl-margin-right-small fl-margin-bottom-small"
                    *ngFor="let variable of openstackConfiguration.cost_estimate_timespans"
                    (click)="copyVariable(variable)"
                    [attr.fl-tooltip]="clickToCopyTooltip">
                {{ variable }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </mat-expansion-panel>

    <mat-expansion-panel #dnsZoneTemplatesPanel>
      <mat-expansion-panel-header>
        <mat-panel-title class="full-width" i18n>
          DNS zone price estimate template
        </mat-panel-title>
      </mat-expansion-panel-header>
      <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
        <div layoutDirection="column" appFlex="66" xsFlex="100" smFlex="100">
          <div *ngFor="let template of dnsDomainPriceEstTemplates.controls; let index = index">
            <mat-divider *ngIf="index > 0"></mat-divider>
            <div layoutDirection="row"
                 [class.fl-margin-top]="index > 0"
                 [class.fl-margin-bottom]="index < dnsDomainPriceEstTemplates.length - 1">
              <div [formGroup]="template" layoutDirection="column" appFlex="80">
                <mat-form-field>
                  <mat-label i18n>Language</mat-label>
                  <mat-select formControlName="language" placeholder="Language" i18n-placeholder>
                    <mat-option *ngFor="let languageArr of filteredLanguages(dnsDomainPriceEstTemplates, index)"
                                [value]="languageArr[0]">
                      {{ languageArr[1] }}
                    </mat-option>
                  </mat-select>
                  <mat-error>{{template.controls.language.errors | errorFormatter}}</mat-error>
                </mat-form-field>
                <mat-form-field class="fl-margin-top">
                  <mat-label i18n>Template</mat-label>
                  <textarea (keydown.control.enter)="objectController.actionCallback(primaryAction)"
                            matInput rows="5" placeholder="Template" i18n-placeholder type="text"
                            formControlName="content"></textarea>
                  <mat-error>{{template.controls.content.errors | errorFormatter}}</mat-error>
                </mat-form-field>
              </div>
              <div>
                <a mat-icon-button class="fl-margin-top-small"
                   (click)="removePriceEstimateTemplate(dnsDomainPriceEstTemplates, index)"
                   fl-tooltip="Remove template" i18n-fl-tooltip>
                  <mat-icon>delete</mat-icon>
                </a>
              </div>
            </div>
          </div>
          <div>
            <a (click)="addPriceEstimateTemplate(dnsDomainPriceEstTemplates)" mat-button i18n>Add new</a>
          </div>
        </div>
        <div layoutDirection="column" appFlex="33" xsFlex="100" smFlex="100">
          <div class="fl-help-text">
            <h3 i18n>DNS zone price estimate template</h3>
            <p i18n>
              This is where you can configure templates for estimated cost text shown on DNS zone create form.
            </p>
            <p i18n>List of supported variables:</p>
            <div layoutDirection="row" class="variables-container" *ngIf="openstackConfiguration?.cost_estimate_timespans">
              <span class="fl-tag fl-margin-right-small fl-margin-bottom-small"
                    *ngFor="let variable of openstackConfiguration.cost_estimate_timespans"
                    (click)="copyVariable(variable)"
                    [attr.fl-tooltip]="clickToCopyTooltip">
                {{ variable }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </mat-expansion-panel>

    <mat-expansion-panel #loadBalancerTemplatesPanel>
      <mat-expansion-panel-header>
        <mat-panel-title class="full-width" i18n>
          Load balancer price estimate template
        </mat-panel-title>
      </mat-expansion-panel-header>
      <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
        <div layoutDirection="column" appFlex="66" xsFlex="100" smFlex="100">
          <div *ngFor="let template of loadBalancerPriceEstTemplates.controls; let index = index">
            <mat-divider *ngIf="index > 0"></mat-divider>
            <div layoutDirection="row"
                 [class.fl-margin-top]="index > 0"
                 [class.fl-margin-bottom]="index < loadBalancerPriceEstTemplates.length - 1">
              <div [formGroup]="template" layoutDirection="column" appFlex="80">
                <mat-form-field>
                  <mat-label i18n>Language</mat-label>
                  <mat-select formControlName="language" placeholder="Language" i18n-placeholder>
                    <mat-option *ngFor="let languageArr of filteredLanguages(loadBalancerPriceEstTemplates, index)"
                                [value]="languageArr[0]">
                      {{ languageArr[1] }}
                    </mat-option>
                  </mat-select>
                  <mat-error>{{template.controls.language.errors | errorFormatter}}</mat-error>
                </mat-form-field>
                <mat-form-field class="fl-margin-top">
                  <mat-label i18n>Template</mat-label>
                  <textarea (keydown.control.enter)="objectController.actionCallback(primaryAction)"
                            matInput rows="5" placeholder="Template" i18n-placeholder type="text"
                            formControlName="content"></textarea>
                  <mat-error>{{template.controls.content.errors | errorFormatter}}</mat-error>
                </mat-form-field>
              </div>
              <div>
                <a mat-icon-button class="fl-margin-top-small"
                   (click)="removePriceEstimateTemplate(loadBalancerPriceEstTemplates, index)"
                   fl-tooltip="Remove template" i18n-fl-tooltip>
                  <mat-icon>delete</mat-icon>
                </a>
              </div>
            </div>
          </div>
          <div>
            <a (click)="addPriceEstimateTemplate(loadBalancerPriceEstTemplates)" mat-button i18n>Add new</a>
          </div>
        </div>
        <div layoutDirection="column" appFlex="33" xsFlex="100" smFlex="100">
          <div class="fl-help-text">
            <h3 i18n>Load balancer price estimate template</h3>
            <p i18n>
              This is where you can configure templates for estimated cost text shown on load balancer create form.
            </p>
            <p i18n>List of supported variables:</p>
            <div layoutDirection="row" class="variables-container" *ngIf="openstackConfiguration?.cost_estimate_timespans">
              <span class="fl-tag fl-margin-right-small fl-margin-bottom-small"
                    *ngFor="let variable of openstackConfiguration.cost_estimate_timespans"
                    (click)="copyVariable(variable)"
                    [attr.fl-tooltip]="clickToCopyTooltip">
                {{ variable }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </mat-expansion-panel>

    <mat-expansion-panel #dbaasInstanceTemplatesPanel>
      <mat-expansion-panel-header>
        <mat-panel-title class="full-width" i18n>
          Database instance price estimate template
        </mat-panel-title>
      </mat-expansion-panel-header>
      <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
        <div layoutDirection="column" appFlex="66" xsFlex="100" smFlex="100">
          <div *ngFor="let template of dbaasInstancePriceEstTemplates.controls; let index = index">
            <mat-divider *ngIf="index > 0"></mat-divider>
            <div layoutDirection="row"
                 [class.fl-margin-top]="index > 0"
                 [class.fl-margin-bottom]="index < dbaasInstancePriceEstTemplates.length - 1">
              <div [formGroup]="template" layoutDirection="column" appFlex="80">
                <mat-form-field>
                  <mat-label i18n>Language</mat-label>
                  <mat-select formControlName="language" placeholder="Language" i18n-placeholder>
                    <mat-option *ngFor="let languageArr of filteredLanguages(dbaasInstancePriceEstTemplates, index)"
                                [value]="languageArr[0]">
                      {{ languageArr[1] }}
                    </mat-option>
                  </mat-select>
                  <mat-error>{{template.controls.language.errors | errorFormatter}}</mat-error>
                </mat-form-field>
                <mat-form-field class="fl-margin-top">
                  <mat-label i18n>Template</mat-label>
                  <textarea (keydown.control.enter)="objectController.actionCallback(primaryAction)"
                            matInput rows="5" placeholder="Template" i18n-placeholder type="text"
                            formControlName="content"></textarea>
                  <mat-error>{{template.controls.content.errors | errorFormatter}}</mat-error>
                </mat-form-field>
              </div>
              <div>
                <a mat-icon-button class="fl-margin-top-small"
                   (click)="removePriceEstimateTemplate(dbaasInstancePriceEstTemplates, index)"
                   fl-tooltip="Remove template" i18n-fl-tooltip>
                  <mat-icon>delete</mat-icon>
                </a>
              </div>
            </div>
          </div>
          <div>
            <a (click)="addPriceEstimateTemplate(dbaasInstancePriceEstTemplates)" mat-button i18n>Add new</a>
          </div>
        </div>
        <div layoutDirection="column" appFlex="33" xsFlex="100" smFlex="100">
          <div class="fl-help-text">
            <h3 i18n>Database instance price estimate template</h3>
            <p i18n>
              This is where you can configure templates for estimated cost text shown on database instance create form.
            </p>
            <p i18n>List of supported variables:</p>
            <div layoutDirection="row" class="variables-container" *ngIf="openstackConfiguration?.cost_estimate_timespans">
              <span class="fl-tag fl-margin-right-small fl-margin-bottom-small"
                    *ngFor="let variable of openstackConfiguration.cost_estimate_timespans"
                    (click)="copyVariable(variable)"
                    [attr.fl-tooltip]="clickToCopyTooltip">
                {{ variable }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </mat-expansion-panel>

  </mat-accordion>
</form>
