<div class="fl-content fl-content-min-height" layoutDirection="column" appLayoutGap="10px">
  <app-fl-backdrop *ngIf="loading" overlayParent></app-fl-backdrop>
  <form appFormSubmit (ngSubmit)="saveSettings()"
        [formGroup]="formattingSettingsForm">
    <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
      <div layoutDirection="column" appFlex="33" xsFlex="100" smFlex="100">
        <mat-form-field appFlex="auto">
          <mat-label i18n>Currency display mode</mat-label>
          <mat-select formControlName="currency_display_mode"
                      placeholder="Currency display mode" i18n-placeholder required>
            <mat-option [value]="'code'" i18n>Code</mat-option>
            <mat-option [value]="'symbol'" i18n>
              Symbol
            </mat-option>
            <mat-option [value]="'symbol-narrow'" i18n>
              Narrow symbol
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
      <div layoutDirection="column" appFlex="100" class="fl-help-text">
        <h3 class="hide-lt-md" i18n>Currency display mode</h3>
        <p class="fl-detail" i18n>
          Choose how to display currencies in Fleio. Current selection will display amounts like this:
          {{100 | currencyFormatter: 'USD': formattingSettingsForm.controls.currency_display_mode.value : null : config.locale}}.
          Note that placement of currency code or symbol is determined by localization.
          Because of user selected language & localization, the symbol may not be even displayed.
          Choices explanation:
        </p>
        <ul class="fl-detail">
          <li i18n>Code: Show the code (such as USD).</li>
          <li i18n>Symbol: Show the symbol (such as $).</li>
          <li i18n>Narrow symbol: Use the narrow symbol for locales that have two symbols for their currency. For example, the Canadian dollar CAD has the symbol CA$ and the symbol-narrow $.</li>
        </ul>
      </div>
    </div>
    <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
      <div layoutDirection="column" appFlex="33" xsFlex="100" smFlex="100">
        <mat-form-field appFlex="auto">
          <mat-label i18n>Date format</mat-label>
          <mat-select formControlName="date_format"
                      placeholder="Date format" i18n-placeholder required>
            <mat-option [value]="'mediumDate'" i18n>Medium date ({{today | dateFormatter: 'mediumDate'}})</mat-option>
            <mat-option [value]="'shortDate'" i18n>Short date ({{today | dateFormatter: 'shortDate'}})</mat-option>
            <mat-option [value]="'longDate'" i18n>Long date ({{today | dateFormatter: 'longDate'}})</mat-option>
            <mat-option [value]="'fullDate'" i18n>Full date ({{today | dateFormatter: 'fullDate'}})</mat-option>
          </mat-select>
        </mat-form-field>
      </div>
      <div layoutDirection="column" appFlex="100" class="fl-help-text">
        <h3 class="hide-lt-md" i18n>Date format</h3>
        <p class="fl-detail" i18n>
          The setting applies for end-user panel and staff panel. Actual format and month names are taken from user's
          chosen language from his profile. Displayed dates are always on the TIME_ZONE from settings.py.
          To see the actual time zone in the user interface, hover the mouse cursor on a date. The format is also used
          on backend generated texts with the Fleio end-user's language, e.g. invoice items or email notifications.
        </p>
      </div>
    </div>
    <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
      <div layoutDirection="column" appFlex="33" xsFlex="100" smFlex="100">
        <mat-form-field appFlex="auto">
          <mat-label i18n>Date time format</mat-label>
          <mat-select formControlName="date_time_format"
                      placeholder="Date time format" i18n-placeholder required>
            <mat-option [value]="'medium'" i18n>Medium ({{today | dateFormatter: 'medium'}})</mat-option>
            <mat-option [value]="'short'" i18n>Short ({{today | dateFormatter: 'short'}})</mat-option>
            <mat-option [value]="'long'" i18n>Long ({{today | dateFormatter: 'long'}})</mat-option>
          </mat-select>
        </mat-form-field>
      </div>
      <div layoutDirection="column" appFlex="100" class="fl-help-text">
        <h3 class="hide-lt-md" i18n>Date time format</h3>
        <p class="fl-detail" i18n>
          The setting applies for end-user panel and staff panel. Actual format and month names are taken from user's
          chosen language from his profile. Displayed dates are always on the TIME_ZONE from settings.py. To see the
          actual time zone, hover the mouse cursor on a date.
        </p>
      </div>
    </div>
  </form>
  <div layoutDirection="row" layoutAlign="end end" class="fl-margin-top" appFlex="auto">
    <button mat-button (click)="saveSettings()" color="primary" i18n>Save settings</button>
  </div>
</div>
