<div layoutDirection="column" class="fl-content-min-height">
  <app-fl-backdrop *ngIf="loadingCurrencies" overlayParent></app-fl-backdrop>
  <div layoutDirection="row" class="fl-padding-left fl-content">
    <div appFlex="70" ltMdFlex="100">
      <p class="fl-detail" i18n>
        Here you can manage fleio currencies. All currencies are relative to the default one, thus the cost of one unit
        of default currency is given in units of regular currency ( indirect quotation ). So, when you update exchange
        rates the regular currencies will show prices that are equivalent to one unit of default currency.
      </p>
      <p class="fl-detail" i18n>
        For example if the USD (direct) quotation now changes to 1 USD = 0.87 EUR, the indirect quote would be
        1 EUR = 1.14 USD (i.e. 1/0.87).
      </p>
    </div>
  </div>
  <div *ngIf="currencies" layoutDirection="column" class="fl-padding-left fl-content fl-margin-right">
    <div layoutDirection="row" class="currency-row">
      <div class="fl-margin-bottom-small fl-bold" appFlex="33">
        <span i18n>Currency</span>
      </div>
      <div class="fl-margin-bottom-small fl-bold" appFlex="auto">
        <span *ngIf="defaultCurrency" i18n>1 {{defaultCurrency.code}} =</span>
      </div>
    </div>
    <div *ngFor="let currency of currencies.objects" layoutDirection="row" class="currency-row">
      <div appFlex="33">
        {{currency.code}}
      </div>
      <div appFlex="auto">
        <ng-container *ngIf="currency.is_default">
          <span class="fl-tag" i18n>default</span>
          <app-icon [icon]="defaultCurrencyInfo"></app-icon>
        </ng-container>
        <span *ngIf="!currency.is_default">{{currency.rate}}</span>
      </div>
      <div class="action-container-class">
        <app-object-actions [objectActions]="this.currencyActions[currency.code]" maxVisibleActions="2">
        </app-object-actions>
      </div>
    </div>
  </div>
  <div layoutDirection="row" layoutDirection-lt-md="column" layoutAlign="end" class="fl-margin-top">
    <button mat-button [disabled]="currencies && !currencies.permissions['currency.create']"
            (click)="createCurrency()" color="primary" i18n>Create currency</button>
    <button mat-button [disabled]="currencies && !currencies.permissions['currency.update_exchange_rates']"
            (click)="updateExchangeRates()" color="primary" i18n>Update exchange rates</button>
    <button mat-button [disabled]="currencies && !currencies.permissions['currency.update_relative_prices']"
            (click)="updateRelativePrices()" color="primary" i18n>Update relative prices</button>
  </div>
</div>
