<form appFormSubmit [formGroup]="configurationBillingForm"
      (ngSubmit)="objectController.actionCallback(primaryAction)">
  <!--suppress JSUnusedGlobalSymbols -->
  <app-form-errors #formErrors [formGroup]="configurationBillingForm"></app-form-errors>
  <mat-accordion *ngIf="billingConfiguration" [multi]="true">
    <mat-expansion-panel #billingPanel id="billingPanel">
      <mat-expansion-panel-header>
        <mat-panel-title class="full-width" i18n>Billing</mat-panel-title>
      </mat-expansion-panel-header>
      <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
        <div layoutDirection="column" appFlex="45" xsFlex="100" smFlex="100">
          <mat-checkbox formControlName="require_credit_card" color="primary"
                        i18n>Require credit card and save details on sign-up
          </mat-checkbox>
          <mat-form-field class="fl-margin-top-medium">
            <mat-label i18n>Charge amount on sign-up</mat-label>
            <input matInput placeholder="Charge amount on sign-up" i18n-placeholder min="0" type="number"
                   formControlName="signup_charge_amount" required>
            <mat-error>{{fieldErrors['signup_charge_amount']}}</mat-error>
          </mat-form-field>
          <div class="fl-radio-group">
            <mat-label i18n>Sign-up charge amount action</mat-label>
            <mat-radio-group formControlName="signup_charge_amount_action">
              <mat-radio-button class="full-width"
                                value="add_to_client" color="primary" i18n>
                Add amount to client credit
              </mat-radio-button>
              <mat-radio-button class="full-width"
                                value="refund" color="primary" i18n>
                Refund amount after credit card validation
              </mat-radio-button>
            </mat-radio-group>
          </div>

          <div layoutDirection="row" layoutAlign="start center" appLayoutGap="10px">
            <mat-form-field appFlex="auto">
              <mat-label i18n>Required up-to-date credit for new services</mat-label>
              <input matInput placeholder="Required up-to-date credit for new services" i18n-placeholder type="number"
                     formControlName="credit_required" required>
              <mat-error>{{fieldErrors['credit_required']}}</mat-error>
            </mat-form-field>
            <p class="fl-margin-bottom">{{billingConfiguration.default_currency.code}}</p>
          </div>
          <div layoutDirection="row" layoutAlign="start center" appLayoutGap="10px">
            <mat-form-field appFlex="auto">
              <mat-label i18n>Up-to-date credit limit</mat-label>
              <input matInput placeholder="Up-to-date credit limit" i18n-placeholder type="number"
                     formControlName="credit_limit" required>
              <mat-error>{{fieldErrors['credit_limit']}}</mat-error>
            </mat-form-field>
            <p class="fl-margin-bottom">{{billingConfiguration.default_currency.code}}</p>
          </div>
          <div layoutDirection="row" layoutAlign="start center" appLayoutGap="10px">
            <mat-form-field appFlex="auto">
              <mat-label i18n>Minimum up-to-date credit to be left after paying an invoice</mat-label>
              <input matInput placeholder="Minimum up-to-date credit to be left after paying an invoice"
                     i18n-placeholder
                     type="number"
                     formControlName="minim_uptodate_credit_for_invoice_payment" required>
              <mat-error>{{fieldErrors['minim_uptodate_credit_for_invoice_payment']}}</mat-error>
            </mat-form-field>
            <p class="fl-margin-bottom">{{billingConfiguration.default_currency.code}}</p>
          </div>
        </div>
        <div layoutDirection="column" appFlex="55" xsFlex="100" smFlex="100">
          <div class="fl-help-text">
            <h3 i18n>Require credit card and save details on sign-up</h3>
            <p i18n>Users will have to validate a credit card before being able to use services.
              Require credit card and save details on sign-up needs a configured gateway that allows credit card
              saving for future automatic charging.</p>
            <h3 i18n>Charge amount on sign-up</h3>
            <p i18n>Choose the amount users will have to pay in order to validate their accounts. Taxes will be added
              if applicable.</p>
            <h3 i18n>Sign-up charge amount action</h3>
            <p i18n>Choose what to do with the amount new users pay in order to validate their account. This amount may
              either go into their client credit or be automatically refunded.</p>
            <h3 i18n>Required up-to-date credit for new services</h3>
            <p i18n>Once a client has reached this limit, he will no longer be able to create or upgrade resources.</p>
            <p i18n>Already created cloud resources will not be suspended based on this threshold.</p>
            <p i18n>Positive and negative values are allowed. Amount is in global default currency.</p>
            <h3 i18n>Up-to-date credit limit</h3>
            <p i18n>Based on up-to-date credit limit you can configure suspension and termination rules.</p>
            <p i18n>Positive and negative values are allowed. Amount is in global default currency.</p>
            <h3 i18n>Minimum up-to-date credit to be left after paying an invoice</h3>
            <p i18n>
              Based on this setting a user is not allowed to pay an invoice from his up-to-date credit (default
              currency)
              <br> if the remaining up-to-date credit after invoice payment is lower than this value.
            </p>
            <p i18n>Amount is in global default currency.</p>
          </div>
        </div>
      </div>
    </mat-expansion-panel>

    <mat-expansion-panel #agreementLimits id="agreementLimits">
      <mat-expansion-panel-header>
        <mat-panel-title class="full-width" i18n>
          Limits for clients with agreements
        </mat-panel-title>
      </mat-expansion-panel-header>
      <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
        <div layoutDirection="column" appFlex="45" xsFlex="100" smFlex="100">
          <div layoutDirection="row" layoutAlign="start center" appLayoutGap="10px">
            <mat-form-field appFlex="auto">
              <mat-label i18n>Required up-to-date credit when on agreement</mat-label>
              <input matInput placeholder="Required up-to-date credit when on agreement" i18n-placeholder type="number"
                     formControlName="credit_required_with_agreement" required>
              <mat-error>{{fieldErrors['credit_required_with_agreement']}}</mat-error>
            </mat-form-field>
            <p class="fl-margin-bottom">{{billingConfiguration.default_currency.code}}</p>
          </div>
          <div layoutDirection="row" layoutAlign="start center" appLayoutGap="10px">
            <mat-form-field appFlex="auto">
              <mat-label i18n>Up-to-date credit limit when on agreement</mat-label>
              <input matInput placeholder="Up-to-date credit limit when on agreement" i18n-placeholder type="number"
                     formControlName="credit_limit_with_agreement" required>
              <mat-error>{{fieldErrors['credit_limit_with_agreement']}}</mat-error>
            </mat-form-field>
            <p class="fl-margin-bottom">{{billingConfiguration.default_currency.code}}</p>
          </div>
        </div>
        <div layoutDirection="column" appFlex="55" xsFlex="100" smFlex="100">
          <div class="fl-help-text">
            <h3 i18n>Required up-to-date credit for new services when on agreement</h3>
            <p i18n>Once a client with a credit card on file with us has reached this limit, he will no longer be
              able to create or upgrade resources.</p>
            <p i18n>Already created cloud resources will not be suspended based on this threshold.</p>
            <p i18n>Positive and negative values are allowed. Amount is in global default currency.</p>
            <h3 i18n>Up-to-date credit limit when on agreement</h3>
            <p
              i18n>Based on up-to-date credit limit you can configure suspension and termination rules for clients that have
              a billing agreement.</p>
            <p i18n>Positive and negative values are allowed. Amount is in global default currency.</p>
          </div>
        </div>
      </div>
    </mat-expansion-panel>

    <mat-expansion-panel #billingCycles id="billingCycles">
      <mat-expansion-panel-header>
        <mat-panel-title class="full-width" i18n>
          Billing cycles
        </mat-panel-title>
      </mat-expansion-panel-header>
      <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
        <div layoutDirection="column" appFlex="45" xsFlex="100" smFlex="100">
          <mat-checkbox class="fl-ellipsis-text"
                        formControlName="billing_cycle_as_calendar_month" color="primary"
                        i18n>Billing cycle as calendar month
          </mat-checkbox>
          <mat-checkbox class="fl-ellipsis-text"
                        formControlName="auto_settle_invoiced_periods_external_billing" color="primary"
                        i18n>Mark invoiced periods as paid when using external billing
          </mat-checkbox>
          <mat-checkbox formControlName="limit_billable_seconds_per_month" color="primary"
                        i18n>Limit billable seconds per month
          </mat-checkbox>
          <mat-form-field>
            <mat-label i18n>Billable seconds per month</mat-label>
            <input matInput placeholder="Billable seconds per month" i18n-placeholder type="number"
                   formControlName="billable_seconds_per_month" required min="1" max="2678399">
            <mat-error>{{fieldErrors['billable_seconds_per_month']}}</mat-error>
          </mat-form-field>
        </div>
        <div layoutDirection="column" appFlex="55" xsFlex="100" smFlex="100">
          <div class="fl-help-text">
            <h3 class="hide-xs hide-sm" i18n>Billing cycle as calendar month</h3>
            <p i18n>Consider a calendar month as billing cycle.</p>
            <p i18n>
              Not checking this option will use the default: each client has his own anniversary date based on
              the date he signed up.
            </p>
            <p i18n>Cycle multiplier will be ignored if this option is active.</p>
          </div>
          <div class="fl-help-text">
            <h3 class="hide-xs hide-sm" i18n>Mark invoiced periods as paid when using external billing</h3>
            <p i18n>Invoiced periods will be marked as paid when appropriate and client credit will be updated.
              This setting works when fleio is using an external billing system.</p>
          </div>
          <div class="fl-help-text">
            <h3 i18n>Limit billable seconds per month</h3>
            <p i18n>
              Specifies the number of seconds per month that should be billed for clients.
              The remaining seconds after this limit is reached will not be billed.
              Maximum value for this is 2678399 (total seconds in 31 days - 1 second).
              If service related product cycle is not set to monthly the setting will be ignored.
            </p>
          </div>
        </div>
      </div>
    </mat-expansion-panel>

    <mat-expansion-panel #general id="general">
      <mat-expansion-panel-header>
        <mat-panel-title class="full-width" i18n>
          General
        </mat-panel-title>
      </mat-expansion-panel-header>
      <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
        <div layoutDirection="column" appFlex="45" xsFlex="100" smFlex="100">
          <mat-form-field>
            <mat-label i18n>Company info</mat-label>
            <textarea (keydown.control.enter)="objectController.actionCallback(primaryAction)"
                      matInput rows="3" maxlength="255"
                      placeholder="Company info" i18n-placeholder
                      type="text" formControlName="company_info" required>
            </textarea>
            <mat-error>{{fieldErrors['company_info']}}</mat-error>
          </mat-form-field>
          <mat-form-field>
            <mat-label i18n>Notifications sender name</mat-label>
            <input matInput placeholder="Notifications sender name" i18n-placeholder
                   type="text" formControlName="sender_name">
            <mat-error>{{fieldErrors['sender_name']}}</mat-error>
          </mat-form-field>
          <mat-form-field>
            <mat-label i18n>Notifications sender email</mat-label>
            <input matInput placeholder="Notifications sender email" i18n-placeholder
                   type="text" formControlName="sender_email">
            <mat-error>{{fieldErrors['sender_email']}}</mat-error>
          </mat-form-field>

          <mat-checkbox [color]="'primary'" formControlName="use_custom_logo_for_pdf_invoices"
                        i18n>Use custom logo for pdf invoices
          </mat-checkbox>

          <p *ngIf="customPdfLogo.value" i18n>
            Current logo file name: {{configurationBillingForm.controls.pdf_logo_file_name.value | nullValue}}
          </p>

          <mat-form-field>
            <input type="file" class="fl-ellipsis-text" (change)="pdfLogoChanged($event)"
                   [disabled]="!customPdfLogo.value">
            <input matInput type="text" formControlName="pdf_logo_file_name" class="hide">
          </mat-form-field>
          <p *ngIf="configurationBillingForm.controls.pdf_logo_file_name.invalid" class="fl-red-color fl-no-margin-top">
            {{ configurationBillingForm.controls.pdf_logo_file_name.errors | errorFormatter }}
          </p>
        </div>
        <div layoutDirection="column" appFlex="55" xsFlex="100" smFlex="100">
          <div class="fl-help-text">
            <h3 i18n>Company info</h3>
            <p i18n>Company information like name and other billing details.</p>
            <p i18n>This information is shown on invoices.</p>
            <h3 i18n>Notifications sender name</h3>
            <p i18n>The name to send the notifications from.</p>
            <p i18n>Leaving this blank will use just the <strong>Notifications sender email</strong>.</p>
            <h3 i18n>Notifications sender email</h3>
            <p i18n>The e-mail address the notifications are sent from.</p>
            <p i18n>Leaving this blank will use the Fleio DEFAULT_FROM_EMAIL setting.</p>
            <h3 i18n>Use custom logo for pdf invoices</h3>
            <p i18n>Checking this will insert a custom logo into pdf invoices. You can upload a logo below.</p>
          </div>
        </div>
      </div>
    </mat-expansion-panel>

    <mat-expansion-panel #maxMind id="maxMind">
      <mat-expansion-panel-header>
        <mat-panel-title class="full-width" i18n>MaxMind fraud check</mat-panel-title>
      </mat-expansion-panel-header>
      <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
        <div layoutDirection="column" appFlex="45" xsFlex="100" smFlex="100">
          <mat-checkbox formControlName="fraud_check" color="primary" i18n>
            Enable MaxMind fraud check
          </mat-checkbox>
          <mat-checkbox formControlName="enable_maxmind_insights" color="primary" i18n>
            Enable insights results
          </mat-checkbox>
          <mat-checkbox formControlName="skip_fraud_check_for_active_clients" color="primary" i18n>
            Skip fraud checks for active clients
          </mat-checkbox>
          <mat-checkbox formControlName="automatically_mark_new_orders_as_fraud_for_clients_with_fraud_order"
                        color="primary" i18n>
            Automatically mark new orders as fraud for clients with fraud order
          </mat-checkbox>
          <mat-form-field>
            <mat-label i18n>Fraud score</mat-label>
            <input matInput placeholder="Fraud score" i18n-placeholder type="number"
                   formControlName="maxmind_fraud_score">
            <mat-error>{{fieldErrors['maxmind_fraud_score']}}</mat-error>
          </mat-form-field>
        </div>
        <div layoutDirection="column" appFlex="55" xsFlex="100" smFlex="100">
          <div class="fl-help-text">
            <h3 i18n>MaxMind fraud check</h3>
            <p i18n>Enable or disable MaxMind fraud checking on new orders.</p>
            <p i18n>To completely enable this module, make sure you have the MAXMIND_CLIENTID and MAXMIND_LICENSE
              options set in settings.py</p>
            <p i18n>The score for manual review can be set or when an order is automatically marked as fraud.</p>
          </div>
        </div>
      </div>
    </mat-expansion-panel>

    <mat-expansion-panel #clientSignupAutomation id="clientSignupAutomation">
      <mat-expansion-panel-header>
        <mat-panel-title class="full-width" i18n>New client automation</mat-panel-title>
      </mat-expansion-panel-header>
      <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
        <div layoutDirection="column" appFlex="45" xsFlex="100" smFlex="100">
          <mat-checkbox formControlName="auto_create_order" color="primary" i18n>
            Automatically create order when client is created
          </mat-checkbox>
          <mat-form-field>
            <mat-label i18n>Auto order service</mat-label>
            <mat-select formControlName="auto_order_service" placeholder="Auto order service" i18n-placeholder>
              <ng-container *ngIf="billingConfiguration">
                <mat-option *ngFor="let product of billingConfiguration.products"
                            [value]="product.id">
                  {{product.name}}
                </mat-option>
              </ng-container>
            </mat-select>
            <mat-error>{{fieldErrors['auto_order_service']}}</mat-error>
          </mat-form-field>
          <mat-form-field>
            <mat-label i18n>Auto order service cycle</mat-label>
            <mat-select formControlName="auto_order_service_cycle"
                        placeholder="Auto order service cycle" i18n-placeholder>
              <ng-container *ngIf="autoOrderProduct">
                <mat-option *ngFor="let cycle of autoOrderProduct.cycles"
                            [value]="cycle.id">
                  {{cycle.display_name}}
                </mat-option>
              </ng-container>
            </mat-select>
            <mat-error>{{fieldErrors['auto_order_service_cycle']}}</mat-error>
          </mat-form-field>
          <mat-form-field>
            <mat-label i18n>Auto order parameters as JSON</mat-label>
            <textarea (keydown.control.enter)="objectController.actionCallback(primaryAction)"
                      matInput rows="3" maxlength="255"
                      placeholder="Auto order parameters as JSON" i18n-placeholder
                      type="text" formControlName="auto_order_service_params">
            </textarea>
            <mat-error>{{fieldErrors['auto_order_service_params']}}</mat-error>
          </mat-form-field>
          <div layoutDirection="row" layoutAlign="start center" appLayoutGap="10px">
            <mat-form-field appFlex="auto">
              <mat-label i18n>Client initial credit</mat-label>
              <input matInput placeholder="Client initial credit" i18n-placeholder type="number"
                     formControlName="client_initial_credit">
              <mat-error>{{fieldErrors['client_initial_credit']}}</mat-error>
            </mat-form-field>
            <p class="fl-margin-bottom">{{billingConfiguration.default_currency.code}}</p>
          </div>
        </div>
        <div layoutDirection="column" appFlex="55" xsFlex="100" smFlex="100">
          <div class="fl-help-text">
            <h3 i18n>Automatically create order when client is created</h3>
            <p i18n>
              If "Automatically create order when client is created" is checked, an order is placed automatically
              when end-user creates a client (on sign-up or when adding additional clients).
            </p>
            <p i18n>On create client staff form, a checkbox is available to choose if you want to place the order.</p>
            <p i18n>
              The "Auto order service cycle" is used with the default currency. If cycle with the default currency does
              not exist, the order creation fails, and an error is logged.
            </p>
            <p i18n>
              The amount specified in "Client initial credit" is added to the client's credit balance.
              If client has another currency than default one, the amount is converted.
            </p>
            <p i18n>
              Additional parameters can be set as JSON to be sent to the service module on creation.
            </p>
            <h3 i18n>Client initial credit</h3>
            <p i18n>Amount to be added to the client credit after a client is created.</p>
            <p i18n>Amount is in global default currency.</p>
          </div>
        </div>
      </div>
    </mat-expansion-panel>

    <mat-expansion-panel #invoicingPanel id="invoicingPanel">
      <mat-expansion-panel-header>
        <mat-panel-title class="full-width" i18n>
          Invoicing
        </mat-panel-title>
      </mat-expansion-panel-header>
      <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
        <div layoutDirection="column" appFlex="45" xsFlex="100" smFlex="100">
          <mat-checkbox formControlName="generate_invoices" color="primary" i18n>
            Generate invoices
          </mat-checkbox>
          <mat-checkbox formControlName="generate_invoices_after" class="fl-margin-bottom-small" color="primary" i18n>
            Generate invoices for service billing cycles ended after:
          </mat-checkbox>
          <div class="fl-margin-bottom" appLayoutGap="5px">
            <mat-form-field>
              <mat-label i18n>Date</mat-label>
              <input matInput [matDatepicker]="generateInvoicesAfterPicker"
                     formControlName="generate_invoices_after_dt">
              <mat-datepicker-toggle matSuffix [for]="generateInvoicesAfterPicker"></mat-datepicker-toggle>
              <mat-datepicker #generateInvoicesAfterPicker></mat-datepicker>
              <mat-error>{{ configurationBillingForm.controls.generate_invoices_after_dt.errors | errorFormatter}}</mat-error>
            </mat-form-field>
            <mat-form-field appFlex="45">
              <mat-label i18n>Time ({{timeHelper.timeFormat}})</mat-label>
              <input matInput placeholder="{{timeHelper.timeFormat}}"
                     formControlName="generate_invoices_after_time">
              <button [attr.fl-tooltip]="timeHelper.localTimeTooltip" mat-icon-button matSuffix
                      (click)="$event.preventDefault();">
                <mat-icon>info</mat-icon>
              </button>
              <mat-error>
                {{ configurationBillingForm.controls.generate_invoices_after_time.errors | errorFormatter }}
              </mat-error>
              <mat-hint i18n>E.g. {{timeHelper.timeExample}}, {{timeHelper.timezoneDisplay}} time</mat-hint>
            </mat-form-field>
          </div>
          <mat-checkbox formControlName="do_not_invoice_services_with_zero_price" color="primary"
                        i18n>Do not invoice services with zero price
          </mat-checkbox>
          <mat-checkbox formControlName="send_notifications_for_unpaid_invoices" color="primary"
                        i18n>Notify on unpaid invoices
          </mat-checkbox>
          <mat-checkbox formControlName="create_todo_on_invoice_payment" color="primary"
                        i18n>Create TODO on invoice payment
          </mat-checkbox>
          <mat-checkbox formControlName="auto_settle_usage" color="primary" i18n>Enable automatic settlements
          </mat-checkbox>
          <mat-checkbox formControlName="allow_multiple_add_credit_invoices" color="primary"
                        i18n>Allow multiple add credit invoices
          </mat-checkbox>
          <div class="fl-radio-group">
            <mat-label i18n>Invoicing options</mat-label>
            <mat-radio-group formControlName="invoicing_option">
              <mat-radio-button class="full-width fl-ellipsis-text"
                                value="fiscal_on_paid" color="primary" i18n>
                Issue proforma invoices and make them fiscal when paid
              </mat-radio-button>
              <mat-radio-button class="full-width fl-ellipsis-text"
                                value="always_fiscal" color="primary" i18n>
                Always issue fiscal invoices with sequential numbers
              </mat-radio-button>
              <mat-radio-button class="full-width fl-ellipsis-text"
                                value="only_proforma" color="primary" i18n>
                Only use proforma invoices with random numbers
              </mat-radio-button>
            </mat-radio-group>
          </div>
          <div class="fl-radio-group">
            <mat-label i18n>Invoice items detail level</mat-label>
            <mat-radio-group class="fl-block" formControlName="detailed_invoices">
              <mat-radio-button class="full-width" value="generate_detailed_invoices" color="primary" i18n>
                Generate detailed invoices
              </mat-radio-button>
              <mat-radio-button class="full-width" value="generate_simple_invoices" color="primary" i18n>
                Generate simple invoices
              </mat-radio-button>
            </mat-radio-group>
          </div>
          <mat-form-field>
            <mat-label i18n>Next fiscal invoice number</mat-label>
            <input matInput placeholder="Next fiscal invoice number" i18n-placeholder type="number"
                   formControlName="next_paid_invoice_number" required>
            <mat-error>{{fieldErrors['next_paid_invoice_number']}}</mat-error>
          </mat-form-field>
          <mat-form-field>
            <mat-label i18n>Next fiscal invoice number format</mat-label>
            <input matInput placeholder="Next fiscal invoice number format" i18n-placeholder type="text"
                   formControlName="next_paid_invoice_number_format" required>
            <mat-error>{{fieldErrors['next_paid_invoice_number_format']}}</mat-error>
          </mat-form-field>
          <mat-checkbox formControlName="issue_invoice_before_next_due_date" color="primary" i18n>
            Issue invoice before service due date
          </mat-checkbox>
          <mat-form-field>
            <mat-label i18n>Next invoice date offset</mat-label>
            <input matInput placeholder="Next invoice date offset" i18n-placeholder type="number"
                   formControlName="next_invoice_date_offset" required>
            <mat-error>{{fieldErrors['next_invoice_date_offset']}}</mat-error>
          </mat-form-field>
          <mat-checkbox formControlName="auto_eu_tax_exemption" color="primary"
                        i18n>Auto set EU tax exemption on client add
          </mat-checkbox>
          <mat-form-field>
            <mat-label i18n>Your home country</mat-label>
            <mat-select formControlName="provider_home_country" placeholder="Your home country" i18n-placeholder>
              <mat-option [value]="''"></mat-option>
              <ng-container *ngIf="billingConfiguration">
                <mat-option *ngFor="let countryOpt of billingConfiguration.countries"
                            [value]="countryOpt[0]">
                  {{countryOpt[1]}}
                </mat-option>
              </ng-container>
            </mat-select>
            <mat-error>{{fieldErrors['provider_home_country']}}</mat-error>
          </mat-form-field>

          <mat-form-field>
            <mat-label i18n>Default invoice tax text</mat-label>
            <input matInput type="text" formControlName="default_invoice_tax_text"
                   placeholder="Default invoice tax text" i18n-placeholder>
            <mat-error>{{fieldErrors['default_invoice_tax_text']}}</mat-error>
          </mat-form-field>

          <mat-form-field>
            <mat-label i18n>Zero tax EU invoice text</mat-label>
            <input matInput type="text" formControlName="zero_tax_eu_invoice_text"
                   placeholder="Zero tax EU invoice text" i18n-placeholder>
            <mat-error>{{fieldErrors['zero_tax_eu_invoice_text']}}</mat-error>
          </mat-form-field>

          <mat-checkbox class="fl-ellipsis-text" formControlName="add_tax_for_credit_invoices" color="primary" i18n>Add tax on add-credit invoices</mat-checkbox>
        </div>
        <div class="invoicing-separator hide-gt-sm"></div>
        <div layoutDirection="column" appFlex="55" xsFlex="100" smFlex="100">
          <div class="fl-help-text">
            <h3 i18n>Generate invoices</h3>
            <p i18n>An invoice will be generated for used services</p>
            <h3 i18n>Generate invoices for service billing cycles ended after</h3>
            <p i18n>
              Invoices will be generated only for service cycles that were ended after defined date.
              Older cycles will still be auto settled if "Enable automatic settlements" is checked.
            </p>
            <h3 i18n>Do not invoice services with zero price</h3>
            <p i18n>When checked, invoices will not be issued for services that have a price of zero.</p>
            <h3 i18n>Notify on unpaid invoices</h3>
            <p i18n>
              If an invoice is generated and it not automatically settled an notification containing invoice
              details will be sent to the customer.
            </p>
            <h3 i18n>Create TODO on invoice payment</h3>
            <p i18n>
              If an user manually pays an invoice a TODO will be created to make staff users aware of the payment.
            </p>
            <h3 i18n>Enable automatic settlements</h3>
            <p i18n>
              Existing usage will be automatically settled using client credit. If an invoice exists it will
              be paid using client credit.
            </p>
            <h3 i18n>Allow multiple add credit invoices</h3>
            <p i18n>
              If disabled, clients cannot add another unpaid add credit invoice if another one already exists.
            </p>
            <h3 i18n>Invoicing options</h3>
            <ul style="padding-left: 20px;">
              <li i18n>
                Issue proforma invoices and make them fiscal when paid. The fiscal invoice date will be set
                to the date when the invoice becomes paid.
              </li>
              <li i18n>
                Always issue fiscal invoices with sequential numbers - choose when you want all issued
                invoices to have consecutive numbers and it does not bother you that all invoices will be issued as
                fiscal,
                even if not paid. The fiscal invoice date will be the same as the invoice issue date.
              </li>
              <li i18n>
                Only use proforma invoices with random numbers - you can choose this when your fiscal rules
                do not require invoices with sequential numbers.
              </li>
            </ul>
            <h3 i18n>Invoice items detail level</h3>
            <ul style="padding-left: 20px;">
              <li i18n>Generate detailed invoices - the invoices will contain detailed data about resource usage.</li>
              <li i18n>Generate simple invoices - the invoices will contain only summary data.</li>
            </ul>
            <p i18n>Enable sequential numbering for paid invoices.</p>
            <h3 i18n>Next fiscal invoice number</h3>
            <p i18n>The next number that will be allocated for a paid invoice.</p>
            <p i18n>This option only takes effect if sequential invoice numbering is enabled.</p>
            <h3 i18n>Next fiscal invoice number format</h3>
            <p><span i18n>Customize the next invoice number by using</span>
              <span ngNonBindable>{{ number }}, {{ year }}, {{ month }}, {{ day }}.</span>
            </p>
            <h3 i18n>Issue invoice before next due date</h3>
            <p i18n>Allows issuing invoices a specified number of days before service due date.</p>
            <h3 i18n>Auto set tax exemption on client add</h3>
            <p i18n>
              When this option is enabled a Client will be automatically marked as "Tax exempt",
              if he fills in a valid KRA PIN at sign-up or when client is added by staff.
            </p>
            <h3 i18n>Your home country</h3>
            <p i18n>
              Clients from this country are never marked as "Tax exempt" on sign-up. Useful for VAT purposes: clients
              from your home country should always be charged VAT.
            </p>
            <h3 i18n>Default invoice tax text</h3>
            <p i18n>
              This text is shown at the bottom of the invoice when the tax value is different than zero. Available variables: client's
              {{invoiceTaxTextVariables}} as you define in the staff panel, Tax rules section.
            </p>
            <h3 i18n>Zero tax invoice text</h3>
            <p i18n>
              This text is shown at the bottom of the invoice when the client calculated tax is zero.
              Available variables: client's {{invoiceTaxTextVariables}} as you define in the staff panel, Tax rules
              section.
            </p>
            <h3 i18n>Add tax on add-credit invoices</h3>
            <p i18n>
              When checked, taxes are added to add-credit invoices. When a credit invoice is paid, the amount without
              taxes is added to client credit. Later, when an invoice is paid from credit, the corresponding tax amount
              is considered as paid.
            </p>
          </div>
        </div>
      </div>
    </mat-expansion-panel>

    <mat-expansion-panel #orderPanel id="orderPanel">
      <mat-expansion-panel-header>
        <mat-panel-title class="full-width" i18n>
          Order
        </mat-panel-title>
      </mat-expansion-panel-header>
      <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
        <div layoutDirection="column" appFlex="45" xsFlex="100" smFlex="100">
          <mat-form-field>
            <mat-label i18n>Order grace days</mat-label>
            <input matInput placeholder="Order grace days" i18n-placeholder type="number"
                   formControlName="order_grace_days">
            <mat-error>{{fieldErrors['order_grace_days']}}</mat-error>
          </mat-form-field>
        </div>
        <div layoutDirection="column" appFlex="55" xsFlex="100" smFlex="100">
          <div class="fl-help-text">
            <h3 i18n>Order grace days</h3>
            <p
              i18n>On new orders, if invoicing is enabled the invoice due date is set in this number of days from today. Fill in zero to set due date on the order date.</p>
          </div>
        </div>
      </div>
    </mat-expansion-panel>

    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-panel-title class="full-width" i18n>
          Upgrade/downgrade
        </mat-panel-title>
      </mat-expansion-panel-header>
      <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
        <div layoutDirection="column" appFlex="45" xsFlex="100" smFlex="100">
          <mat-checkbox formControlName="enduser_allow_service_cycle_change" color="primary"
                        i18n>Allow end-user to change service cycle
          </mat-checkbox>
        </div>
        <div layoutDirection="column" appFlex="55" xsFlex="100" smFlex="100">
          <div class="fl-help-text">
            <h3 i18n>Allow end-user to change service cycle</h3>
            <p i18n>If unchecked, the end-user will not be able to upgrade/downgrade service cycle.</p>
          </div>
        </div>
      </div>
      <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
        <div layoutDirection="column" appFlex="45" xsFlex="100" smFlex="100">
          <mat-checkbox formControlName="enduser_shorten_current_product_service_cycle" color="primary"
                        i18n>Allow end-user to change current product to shorter cycle
          </mat-checkbox>
        </div>
        <div layoutDirection="column" appFlex="55" xsFlex="100" smFlex="100">
          <div class="fl-help-text">
            <h3 i18n>Allow end-user to change current product to shorter cycle</h3>
            <p
              i18n>If unchecked, the end-user will not be able to choose a shorter billing cycle when keeping the current product.</p>
          </div>
        </div>
      </div>
      <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
        <div layoutDirection="column" appFlex="45" xsFlex="100" smFlex="100">
          <mat-checkbox formControlName="enduser_shorten_new_product_service_cycle" color="primary"
                        i18n>Allow new product upgrade/downgrade to shorter cycle
          </mat-checkbox>
        </div>
        <div layoutDirection="column" appFlex="55" xsFlex="100" smFlex="100">
          <div class="fl-help-text">
            <h3 i18n>Allow new product upgrade/downgrade to shorter cycle</h3>
            <p
              i18n>If unchecked, the end-user will not be able to choose a shorter billing cycle when upgrading/downgrading the current product.</p>
          </div>
        </div>
      </div>
    </mat-expansion-panel>

    <mat-expansion-panel #creditNotifications id="creditNotifications">
      <mat-expansion-panel-header>
        <mat-panel-title class="full-width" i18n>
          Credit notifications
        </mat-panel-title>
      </mat-expansion-panel-header>
      <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
        <div layoutDirection="column" appFlex="45" xsFlex="100" smFlex="100">
          <mat-checkbox formControlName="credit_notifications_enabled" color="primary" i18n>
            Enable credit notifications
          </mat-checkbox>
          <mat-checkbox class="fl-margin-bottom-medium"
                        formControlName="credit_notifications_when_agreement_enabled" color="primary"
                        i18n>Send notifications to customers having billing agreements
          </mat-checkbox>
          <div layoutDirection="row" appLayoutGap="5px">
            <mat-form-field subscriptSizing="dynamic" appFlex="33">
              <mat-label i18n>Hours remaining</mat-label>
              <input matInput placeholder="Hours remaining" i18n-placeholder type="number"
                     formControlName="first_credit_remaining_hours" required>
              <mat-error>{{fieldErrors['first_credit_remaining_hours']}}</mat-error>
            </mat-form-field>
            <mat-form-field appFlex="66">
              <mat-label i18n>Message template</mat-label>
              <mat-select formControlName="first_credit_notification_template"
                          placeholder="Message template" i18n-placeholder>
                <mat-option [value]="''" i18n>do not send</mat-option>
                <ng-container *ngIf="billingConfiguration">
                  <mat-option *ngFor="let notification of billingConfiguration.credit_message_templates"
                              [value]="notification[0]">
                    {{notification[0]}}
                  </mat-option>
                </ng-container>
              </mat-select>
            </mat-form-field>
          </div>
          <div layoutDirection="row" appLayoutGap="5px">
            <mat-form-field subscriptSizing="dynamic" appFlex="33">
              <mat-label i18n>Hours remaining</mat-label>
              <input matInput placeholder="Hours remaining" i18n-placeholder type="number"
                     formControlName="second_credit_remaining_hours" required>
              <mat-error>{{fieldErrors['second_credit_remaining_hours']}}</mat-error>
            </mat-form-field>
            <mat-form-field appFlex="66">
              <mat-label i18n>Message template</mat-label>
              <mat-select formControlName="second_credit_notification_template"
                          placeholder="Message template" i18n-placeholder>
                <mat-option [value]="''" i18n>do not send</mat-option>
                <ng-container *ngIf="billingConfiguration">
                  <mat-option *ngFor="let notification of billingConfiguration.credit_message_templates"
                              [value]="notification[0]">
                    {{notification[0]}}
                  </mat-option>
                </ng-container>
              </mat-select>
            </mat-form-field>
          </div>
          <div layoutDirection="row" appLayoutGap="5px">
            <mat-form-field subscriptSizing="dynamic" appFlex="33">
              <mat-label i18n>Hours remaining</mat-label>
              <input matInput placeholder="Hours remaining" i18n-placeholder type="number"
                     formControlName="third_credit_remaining_hours" required>
              <mat-error>{{fieldErrors['third_credit_remaining_hours']}}</mat-error>
            </mat-form-field>
            <mat-form-field appFlex="66">
              <mat-label i18n>Message template</mat-label>
              <mat-select formControlName="third_credit_notification_template"
                          placeholder="Message template" i18n-placeholder>
                <mat-option [value]="''" i18n>do not send</mat-option>
                <ng-container *ngIf="billingConfiguration">
                  <mat-option *ngFor="let notification of billingConfiguration.credit_message_templates"
                              [value]="notification[0]">
                    {{notification[0]}}
                  </mat-option>
                </ng-container>
              </mat-select>
            </mat-form-field>
          </div>
        </div>
        <div layoutDirection="column" appFlex="55" xsFlex="100" smFlex="100">
          <div class="fl-help-text">
            <h3 i18n>Enable credit notification</h3>
            <p i18n>Send notifications when a client's remaining hours with his current credit is reached</p>
            <h3 i18n>Send notifications to customers having billing agreements</h3>
            <p i18n>Send notifications when a client has a billing agreement enabled</p>
            <h3 i18n>Hours remaining &amp; message template</h3>
            <p i18n>How many hours until the client reaches the up-to-date credit limit with his current usage.
              Select a message template to send. Selecting the blank notification will disable it.</p>
          </div>
        </div>
      </div>
    </mat-expansion-panel>

    <mat-expansion-panel #invoiceNotifications id="invoiceNotifications">
      <mat-expansion-panel-header>
        <mat-panel-title class="full-width" i18n>Invoice notifications</mat-panel-title>
      </mat-expansion-panel-header>
      <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
        <div layoutDirection="column" appFlex="45" xsFlex="100" smFlex="100">
          <mat-checkbox formControlName="invoice_notifications_enabled" color="primary"
                        i18n>Enable invoice notifications
          </mat-checkbox>
          <p class="fl-no-margin-bottom" i18n>Invoice payment reminder notifications</p>
          <p class="fl-detail fl-margin-bottom-small" i18n>
            (notifications won't be sent when difference between due date and issue date
            is lower than or equal to configured hours, for example, if invoice due date is x hours after issue date,
            if first notification hours
            ({{configurationBillingForm.controls.first_invoice_payment_reminder_remaining_hours.value}})
            is set to a value greater than x, it won't be sent)
          </p>
          <div layoutDirection="row" appLayoutGap="5px">
            <mat-form-field subscriptSizing="dynamic" appFlex="33">
              <mat-label i18n>Hours remaining</mat-label>
              <input matInput placeholder="Hours remaining" i18n-placeholder type="number"
                     formControlName="first_invoice_payment_reminder_remaining_hours" required>
              <mat-error>{{fieldErrors['first_invoice_payment_reminder_remaining_hours']}}</mat-error>
            </mat-form-field>
            <mat-form-field appFlex="66">
              <mat-label i18n>Message template</mat-label>
              <mat-select formControlName="first_invoice_payment_reminder_notification_template"
                          placeholder="Message template" i18n-placeholder>
                <mat-option [value]="''" i18n>do not send</mat-option>
                <ng-container *ngIf="billingConfiguration">
                  <mat-option *ngFor="let notification of billingConfiguration.billing_message_templates"
                              [value]="notification[0]">
                    {{notification[0]}}
                  </mat-option>
                </ng-container>
              </mat-select>
            </mat-form-field>
          </div>
          <div layoutDirection="row" appLayoutGap="5px">
            <mat-form-field subscriptSizing="dynamic" appFlex="33">
              <mat-label i18n>Hours remaining</mat-label>
              <input matInput placeholder="Hours remaining" i18n-placeholder type="number"
                     formControlName="second_invoice_payment_reminder_remaining_hours" required>
              <mat-error>{{fieldErrors['second_invoice_payment_reminder_remaining_hours']}}</mat-error>
            </mat-form-field>
            <mat-form-field appFlex="66">
              <mat-label i18n>Message template</mat-label>
              <mat-select formControlName="second_invoice_payment_reminder_notification_template"
                          placeholder="Message template" i18n-placeholder>
                <mat-option [value]="''" i18n>do not send</mat-option>
                <ng-container *ngIf="billingConfiguration">
                  <mat-option *ngFor="let notification of billingConfiguration.billing_message_templates"
                              [value]="notification[0]">
                    {{notification[0]}}
                  </mat-option>
                </ng-container>
              </mat-select>
            </mat-form-field>
          </div>
          <p i18n>Invoice overdue notifications</p>
          <div layoutDirection="row" appLayoutGap="5px">
            <mat-form-field subscriptSizing="dynamic" appFlex="33">
              <mat-label i18n>Hours since overdue</mat-label>
              <input matInput placeholder="Hours since overdue" i18n-placeholder type="number"
                     formControlName="first_invoice_payment_overdue_hours" required>
              <mat-error>{{fieldErrors['first_invoice_payment_overdue_hours']}}</mat-error>
            </mat-form-field>
            <mat-form-field appFlex="66">
              <mat-label i18n>Message template</mat-label>
              <mat-select formControlName="first_invoice_payment_overdue_notification_template"
                          placeholder="Message template" i18n-placeholder>
                <mat-option [value]="''" i18n>do not send</mat-option>
                <ng-container *ngIf="billingConfiguration">
                  <mat-option *ngFor="let notification of billingConfiguration.billing_message_templates"
                              [value]="notification[0]">
                    {{notification[0]}}
                  </mat-option>
                </ng-container>
              </mat-select>
            </mat-form-field>
          </div>
          <div layoutDirection="row" appLayoutGap="5px">
            <mat-form-field subscriptSizing="dynamic" appFlex="33">
              <mat-label i18n>Hours since overdue</mat-label>
              <input matInput placeholder="Hours since overdue" i18n-placeholder type="number"
                     formControlName="second_invoice_payment_overdue_hours" required>
              <mat-error>{{fieldErrors['second_invoice_payment_overdue_hours']}}</mat-error>
            </mat-form-field>
            <mat-form-field appFlex="66">
              <mat-label i18n>Message template</mat-label>
              <mat-select formControlName="second_invoice_payment_overdue_notification_template"
                          placeholder="Message template" i18n-placeholder>
                <mat-option [value]="''" i18n>do not send</mat-option>
                <ng-container *ngIf="billingConfiguration">
                  <mat-option *ngFor="let notification of billingConfiguration.billing_message_templates"
                              [value]="notification[0]">
                    {{notification[0]}}
                  </mat-option>
                </ng-container>
              </mat-select>
            </mat-form-field>
          </div>
          <div layoutDirection="row" appLayoutGap="5px">
            <mat-form-field subscriptSizing="dynamic" appFlex="33">
              <mat-label i18n>Hours since overdue</mat-label>
              <input matInput placeholder="Hours since overdue" i18n-placeholder type="number"
                     formControlName="third_invoice_payment_overdue_hours" required>
              <mat-error>{{fieldErrors['third_invoice_payment_overdue_hours']}}</mat-error>
            </mat-form-field>
            <mat-form-field appFlex="66">
              <mat-label i18n>Message template</mat-label>
              <mat-select formControlName="third_invoice_payment_overdue_notification_template"
                          placeholder="Message template" i18n-placeholder>
                <mat-option [value]="''" i18n>do not send</mat-option>
                <ng-container *ngIf="billingConfiguration">
                  <mat-option *ngFor="let notification of billingConfiguration.billing_message_templates"
                              [value]="notification[0]">
                    {{notification[0]}}
                  </mat-option>
                </ng-container>
              </mat-select>
            </mat-form-field>
          </div>
          <mat-form-field>
            <mat-label i18n>Invoice payment confirmation message template</mat-label>
            <mat-select formControlName="invoice_payment_confirmation_notification_template"
                        placeholder="Invoice payment confirmation message template" i18n-placeholder>
              <mat-option [value]="''" i18n>do not send</mat-option>
              <ng-container *ngIf="billingConfiguration">
                <mat-option *ngFor="let notification of billingConfiguration.billing_message_templates"
                            [value]="notification[0]">
                  {{notification[0]}}
                </mat-option>
              </ng-container>
            </mat-select>
          </mat-form-field>
          <mat-form-field>
            <mat-label i18n>Invoice refund confirmation message template</mat-label>
            <mat-select formControlName="invoice_refund_confirmation_notification_template"
                        placeholder="Invoice refund confirmation message template" i18n-placeholder>
              <mat-option [value]="''" i18n>do not send</mat-option>
              <ng-container *ngIf="billingConfiguration">
                <mat-option *ngFor="let notification of billingConfiguration.billing_message_templates"
                            [value]="notification[0]">
                  {{notification[0]}}
                </mat-option>
              </ng-container>
            </mat-select>
          </mat-form-field>
        </div>
        <div layoutDirection="column" appFlex="55" xsFlex="100" smFlex="100">
          <div class="fl-help-text">
            <h3 i18n>Enable invoice notification</h3>
            <p i18n>Send invoice related notifications
              (payment reminders, payment overdue reminders, payment confirmation and refund confirmation)</p>
            <h3 i18n>Invoice payment reminder notifications</h3>
            <p i18n>Select how many hours until the invoice is due and a message template to send.
              Selecting the blank notification will disable it.</p>
            <h3 i18n>Invoice payment overdue notifications</h3>
            <p i18n>Select how many hours since the invoice was due and a message template to send.
              Selecting the blank notification will disable it.</p>
            <h3 i18n>Invoice payment confirmation message template</h3>
            <p i18n>Select a message template to send. Selecting the blank notification will disable it.</p>
            <h3 i18n>Invoice refund confirmation message template</h3>
            <p i18n>Select a message template to send. Selecting the blank notification will disable it.</p>
          </div>
        </div>
      </div>
    </mat-expansion-panel>

    <mat-expansion-panel #serviceNotifications id="serviceNotifications">
      <mat-expansion-panel-header>
        <mat-panel-title class="full-width" i18n>
          Service notifications
        </mat-panel-title>
      </mat-expansion-panel-header>
      <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
        <div layoutDirection="column" appFlex="45" xsFlex="100" smFlex="100">
          <mat-checkbox formControlName="service_notifications_enabled" color="primary" i18n>
            Enable service notifications
          </mat-checkbox>
          <mat-form-field>
            <mat-label i18n>Service suspended message template</mat-label>
            <mat-select formControlName="service_suspended_notification_template"
                        placeholder="Service suspended message template" i18n-placeholder>
              <mat-option [value]="''" i18n>do not send</mat-option>
              <ng-container *ngIf="billingConfiguration">
                <mat-option *ngFor="let notification of billingConfiguration.service_message_templates"
                            [value]="notification[0]">
                  {{notification[0]}}
                </mat-option>
              </ng-container>
            </mat-select>
          </mat-form-field>
          <mat-form-field>
            <mat-label i18n>Service unsuspended message template</mat-label>
            <mat-select formControlName="service_resumed_notification_template"
                        placeholder="Service unsuspended message template" i18n-placeholder>
              <mat-option [value]="''" i18n>do not send</mat-option>
              <ng-container *ngIf="billingConfiguration">
                <mat-option *ngFor="let notification of billingConfiguration.service_message_templates"
                            [value]="notification[0]">
                  {{notification[0]}}
                </mat-option>
              </ng-container>
            </mat-select>
          </mat-form-field>
        </div>
        <div layoutDirection="column" appFlex="55" xsFlex="100" smFlex="100">
          <div class="fl-help-text">
            <h3 i18n>Enable service notification</h3>
            <p i18n>Send notifications when a client's services are suspended or unsuspended</p>
            <h3 i18n>Service suspended notification</h3>
            <p i18n>Notification to send when a service is suspended</p>
            <h3 i18n>Service unsuspended notification</h3>
            <p i18n>Notification to send when a service is unsuspended</p>
          </div>
        </div>
      </div>
    </mat-expansion-panel>

    <mat-expansion-panel #suspension id="suspension">
      <mat-expansion-panel-header>
        <mat-panel-title class="full-width" i18n>
          Suspension
        </mat-panel-title>
      </mat-expansion-panel-header>
      <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
        <div layoutDirection="column" appFlex="45" xsFlex="100" smFlex="100">
          <mat-checkbox formControlName="auto_suspend" color="primary" i18n>Enable automatic suspension</mat-checkbox>
          <mat-checkbox formControlName="auto_suspend_delay_hours_enabled" color="primary" i18n>
            Enable delay by hours
          </mat-checkbox>
          <mat-form-field>
            <mat-label i18n>Delay (hours)</mat-label>
            <input matInput placeholder="Delay(hours)" i18n-placeholder type="number"
                   formControlName="auto_suspend_delay_hours" required>
            <mat-error>{{fieldErrors['auto_suspend_delay_hours']}}</mat-error>
          </mat-form-field>
          <mat-checkbox formControlName="auto_suspend_delay_credit_enabled" color="primary" i18n>
            Enable delay until credit is used
          </mat-checkbox>
          <div layoutDirection="row" layoutAlign="start center" appLayoutGap="10px">

            <mat-form-field appFlex="auto">
              <mat-label i18n>Delay (credit)</mat-label>
              <input matInput placeholder="Delay(credit)" i18n-placeholder type="number"
                     formControlName="auto_suspend_delay_credit" required>
              <mat-error>{{fieldErrors['auto_suspend_delay_credit']}}</mat-error>
            </mat-form-field>
            <p class="fl-margin-bottom">{{billingConfiguration.default_currency.code}}</p>
          </div>
          <mat-form-field>
            <mat-label i18n>Message template</mat-label>
            <mat-select formControlName="auto_suspend_notification_template"
                        placeholder="Message template" i18n-placeholder>
              <mat-option [value]="''" i18n>do not send</mat-option>
              <ng-container *ngIf="billingConfiguration">
                <mat-option *ngFor="let notification of billingConfiguration.credit_message_templates"
                            [value]="notification[0]">
                  {{notification[0]}}
                </mat-option>
              </ng-container>
            </mat-select>
          </mat-form-field>
          <mat-checkbox formControlName="auto_unsuspend_client_on_credit_update" color="primary" i18n>
            Auto unsuspend client on credit update
          </mat-checkbox>
        </div>
        <div layoutDirection="column" appFlex="55" xsFlex="100" smFlex="100">
          <div class="fl-help-text">
            <h3 i18n>Enable automatic suspension</h3>
            <p i18n>Automatically suspend a client when he reaches the up-to-date credit limit.</p>
            <p i18n>The actual suspension can be postponed by a few hours when <strong>Delay by hours</strong>
              is checked or until client is under the up-to-date credit limit by a specified amount when
              <strong>Delay until credit is used</strong> is checked. Amount is in global default currency.</p>
            <p i18n>Selecting a <strong>message template</strong> will send a notification to the
              client on suspension.</p>
          </div>
          <div class="fl-help-text">
            <h3 i18n>Auto unsuspend client on credit update</h3>
            <p
              i18n>Automatically unsuspend a suspended client if after a credit update the client is above credit limit.</p>
            <p i18n>Unchecking this will unsuspend the client at next process clients run.</p>
          </div>
        </div>
      </div>
    </mat-expansion-panel>

    <mat-expansion-panel #termination id="termination">
      <mat-expansion-panel-header>
        <mat-panel-title class="full-width" i18n>
          Termination
        </mat-panel-title>
      </mat-expansion-panel-header>
      <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
        <div layoutDirection="column" appFlex="45" xsFlex="100" smFlex="100">
          <mat-checkbox formControlName="suspend_instead_of_terminate" color="primary"
                        i18n>Suspend the client instead of termination
          </mat-checkbox>
          <p *ngIf="!configurationBillingForm.controls.suspend_instead_of_terminate.value" class="fl-important-text"
             i18n>
            Un-checking suspend instead of terminate allows clients and service termination and may cause accidental
            data loss. However, you can remove permissions for service/client deletion on authorization page and this
            will prevent accidental data loss.
          </p>
          <mat-checkbox formControlName="auto_terminate" color="primary" i18n>Enable automatic termination
          </mat-checkbox>
          <mat-form-field>
            <mat-label i18n>Delay(hours)</mat-label>
            <input matInput placeholder="Delay(hours)" i18n-placeholder type="number"
                   formControlName="auto_terminate_delay_hours" required>
            <mat-error>{{fieldErrors['auto_terminate_delay_hours']}}</mat-error>
          </mat-form-field>
          <mat-form-field>
            <mat-label i18n>Message template</mat-label>
            <mat-select formControlName="auto_terminate_notification_template" placeholder="Message template"
                        i18n-placeholder>
              <mat-option [value]="''"></mat-option>
              <ng-container *ngIf="billingConfiguration">
                <mat-option *ngFor="let notification of billingConfiguration.credit_message_templates"
                            [value]="notification[0]">
                  {{notification[0]}}
                </mat-option>
              </ng-container>
            </mat-select>
          </mat-form-field>
        </div>
        <div layoutDirection="column" appFlex="55" xsFlex="100" smFlex="100">
          <div class="fl-help-text">
            <h3 i18n>Suspend the client instead of termination</h3>
            <p i18n>
              This overrides the default termination action and suspends the client and his resources instead.
            </p>
            <h3 i18n>Enable automatic termination</h3>
            <p i18n>Automatically terminates a service after certain time (defined in delay field) passed
              since service suspension.</p>
            <p i18n>A <strong>Delay</strong> for service termination can be set (in hours) to postpone the actual
              termination after service was suspended.</p>
            <p i18n>The client can be notified about the termination if a <strong>message template</strong> is
              selected.</p>
          </div>
        </div>
      </div>
    </mat-expansion-panel>
  </mat-accordion>

</form>
