<div layoutAlign="center center">
  <div class="dashboard-container">

    <div layoutDirection="row" layoutDirection-lt-sm="column">
      <!-- loader -->
      <div class="center-object position-relative fl-content-min-height"
           *ngIf="(auth && !auth.feature('billing') && auth.feature('openstack') && !openstackSummary) ||
                  (auth && auth.feature('billing') && !billingSummary && !auth.userData?.user?.notifications_only)">
        <app-fl-backdrop [hideBackdrop]="true" [spinnerDiameter]="100"></app-fl-backdrop>
      </div>

      <div *ngIf="auth?.userData?.user?.notifications_only" class="fl-important-text" i18n>
        Your user cannot perform any action and can only receive notifications.
      </div>

      <!-- credit section -->
      <div *ngIf="auth.feature('billing.addcredit') && billingSummary" layoutDirection="column"
           appFlex="{{showUnpaidInvoicesWidget ? 70 : 100}}">
        <span class="dashboard-subheader" i18n>Billing</span>
        <mat-card appearance="raised">
          <div class="fl-margin-bottom fl-margin-top-medium">
            <span i18n>Up-to-date credit</span>
            <app-icon [icon]="upToDateCreditInfo"></app-icon>
          </div>
          <mat-card-content *ngIf="billingSummary">
            <span *ngIf="billingSummary.credits" class="mat-headline-5">
              {{billingSummary.uptodate_credit | currencyFormatter: billingSummary.billing_currency: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale}}
            </span>
            <span *ngFor="let credit of billingSummary.credits; let last=last">
              <br><span>{{credit.uptodate_credit | currencyFormatter: credit.currency: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale }}</span>
            </span>
            <app-flashing-dots [classList]="['fl-margin-top', 'fl-margin-left-medium']"
                               *ngIf="auth && auth.feature('openstack') &&
                                      auth.feature('billing.credit_estimate') && !creditAndInvoicingInfo">
            </app-flashing-dots>
            <div *ngIf="creditAndInvoicingInfo">
              <span *ngIf="creditAndInvoicingInfo.has_billing_agreement === false &&
              creditAndInvoicingInfo.remaining_days !== null">
                <span *ngIf="creditAndInvoicingInfo.remaining_days > 7 &&
                creditAndInvoicingInfo.remaining_days < 365" i18n>
                  Your current credit will last for about {{ creditAndInvoicingInfo.remaining_days }} days.
                </span>
                <span *ngIf="creditAndInvoicingInfo.remaining_days <= 7" class="fl-red-color" i18n>
                  <span *ngIf="creditAndInvoicingInfo.reached_credit_limit === false">
                    <span *ngIf="creditAndInvoicingInfo.remaining_days > 1">
                      Your current credit will last for about {{ creditAndInvoicingInfo.remaining_days }} days.
                    </span>
                    <span *ngIf="creditAndInvoicingInfo.remaining_days === 1">
                      Your current credit will last for about one day.
                    </span>
                    <span *ngIf="creditAndInvoicingInfo.remaining_days === 0">
                      <span *ngIf="creditAndInvoicingInfo.remaining_hours > 1">
                        Your current credit will last for about {{ creditAndInvoicingInfo.remaining_hours }} hours.
                      </span>
                      <span *ngIf="creditAndInvoicingInfo.remaining_hours === 1">
                        Your current credit will last for about one hour.
                      </span>
                      <span *ngIf="creditAndInvoicingInfo.remaining_hours === 0">
                        Your current credit will last less than one hour.
                      </span>
                    </span>
                    To avoid any service interruption, you should add credit to your account.</span>
                  <span *ngIf="creditAndInvoicingInfo.reached_credit_limit === true">You are out of credit.
                    To avoid any service interruption, you should add credit to your account.</span>
                </span>
              </span>
              <span *ngIf="creditAndInvoicingInfo.has_billing_agreement === true">
                <span *ngIf="creditAndInvoicingInfo.credit_enough_this_cycle === true" i18n>
                  You're on a billing agreement and have enough credit for this cycle.
                </span>
                <span *ngIf="creditAndInvoicingInfo.credit_enough_this_cycle === false" i18n>
                  You're on billing agreement and have a credit limit of
                  {{ creditAndInvoicingInfo.credit_limit | currencyFormatter: billingSummary.billing_currency: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale }}.
                  You will reach this limit and will be charged on
                  {{ creditAndInvoicingInfo.charging_date | dateFormatter }}.
                </span>
              </span>
            </div>
            <span *ngIf="billingSummary.validate_credit_card && !billingSummary.account_under_review" class="fl-red-color" i18n>
              <div [innerHTML]="config.current.settings.requireCardValidationMsg"></div>
            </span>
            <span *ngIf="billingSummary.account_under_review" class="fl-red-color" i18n>
              Your client account is under review. For more information, contact support.
            </span>
          </mat-card-content>
          <mat-card-actions layoutAlign="end">
            <a mat-button *ngIf="billingSummary.validate_credit_card && !billingSummary.account_under_review" (click)="addPaymentDetails()"
               [disabled]="loadingAddPayment"
               class="active-link" i18n>
              Add payment details
            </a>
            <ng-container *ngIf="!billingSummary.validate_credit_card">
              <a mat-button
                 *ngIf="!externalBillingUrl && auth.feature('billing.invoices') &&
                 auth.userData.user.clients.length"
                 [routerLink]="config.getPanelUrl('billing/add-credit/', auth.userData.user.active_client)"
                 class="active-link" i18n>Add credit</a>
              <a mat-button *ngIf="externalBillingUrl" href="{{externalBillingUrl}}" target="_blank"
                 class="active-link" i18n>Add credit</a>
              <a mat-button *ngIf="!auth.feature('billing.invoices') && !externalBillingUrl"
                 [disabled]="!auth.feature('billing.invoices')"
                 [attr.fl-tooltip]="'Invoicing feature is disabled'" class="active-link" i18n>Add credit</a>
            </ng-container>
          </mat-card-actions>
        </mat-card>
      </div>

      <!-- unpaid invoices section -->
      <div *ngIf="showUnpaidInvoicesWidget" layoutDirection="column"
           [class.offset-1-gt-xs]="auth.feature('billing.addcredit')"
           appFlex="{{auth.feature('billing.addcredit') ? 30 : 100}}">
        <span class="dashboard-subheader" i18n>Unpaid invoices</span>
        <mat-card appFlex="100" appearance="raised" layoutDirection="column">
          <div class="fl-margin-bottom fl-margin-top-medium unpaid-inv-txt-fix-offset"
               *ngIf="billingSummary.invoices_details.unpaid_invoices_count === 0">
            <span i18n>All invoices are paid. Thank you.</span>
          </div>
          <div class="fl-margin-bottom fl-margin-top-medium unpaid-inv-txt-fix-offset"
               *ngIf="billingSummary.invoices_details.unpaid_invoices_count">
            <span i18n>Total outstanding amount</span>
          </div>
          <mat-card-content>
            <div *ngIf="billingSummary.invoices_details.unpaid_invoices_count">
              <span class="mat-headline-5">
                {{ billingSummary.invoices_details.unpaid_amount | currencyFormatter: billingSummary.invoices_details.unpaid_amount_currency: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale }}
              </span>
            </div>
          </mat-card-content>
          <span appFlex="auto"></span>
          <mat-card-actions layoutAlign="end">
            <a mat-flat-button [routerLink]="config.getPanelUrl('billing/invoices')" i18n>Invoices list</a>
            <div *ngIf="billingSummary.invoices_details.unpaid_invoices_count">
              <a mat-button color="primary"
                 [routerLink]="config.getPanelUrl('billing/invoices/pay-multiple-invoices')"
                 *ngIf="billingSummary.invoices_details.unpaid_invoices_count > 1" i18n>Pay</a>
              <a mat-button color="primary"
                 [routerLink]="[config.getPanelUrl('billing/invoices/'), billingSummary.invoices_details.unpaid_invoice_id]"
                 *ngIf="billingSummary.invoices_details.unpaid_invoice_id" i18n>Pay</a>
            </div>
          </mat-card-actions>
        </mat-card>
      </div>
    </div>

    <!-- openstack summary -->
    <div *ngIf="auth.feature('openstack') && openstackSummary">
      <span class="dashboard-subheader" i18n>Summary</span>
      <mat-card appearance="raised">
        <mat-card-content>
          <table class="fl-table dashboard-summary-table">
            <tbody>
              <tr *ngIf="auth.feature('openstack.instances')" class="v-middle">
                <td>
                  <a [routerLink]="config.getPanelUrl('openstack/instances')">
                    <span *ngIf="openstackSummary.instances > 1" i18n>
                      {{openstackSummary.instances}} instances
                    </span>
                    <span *ngIf="openstackSummary.instances === 1" i18n>
                      1 instance
                    </span>
                    <span *ngIf="openstackSummary.instances === 0" i18n>No instances</span>
                    <span class="fl-red-color" *ngIf="openstackSummary.stopped_instances > 0" i18n>
                      ({{openstackSummary.stopped_instances}} stopped)
                    </span>
                  </a>
                </td>
                <td>
                  <a mat-button [routerLink]="config.getPanelUrl('openstack/instances/create')" i18n>Create instance</a>
                </td>
              </tr>
              <tr *ngIf="auth.feature('openstack.images')" class="v-middle">
                <td>
                  <a [routerLink]="config.getPanelUrl('openstack/images')">
                    <span *ngIf="openstackSummary.images > 1" i18n>
                      {{openstackSummary.images}} images
                    </span>
                    <span *ngIf="openstackSummary.images === 1" i18n>
                      1 image
                    </span>
                    <span *ngIf="openstackSummary.images === 0" i18n>No images</span>
                  </a>
                </td>
                <td>
                  <a mat-button [routerLink]="config.getPanelUrl('openstack/images/create')"
                     *ngIf="auth.feature('openstack.images.updatecreate')" i18n>Create image</a>
                </td>
              </tr>
              <tr *ngIf="auth.feature('openstack.volumes')" class="v-middle">
                <td>
                  <a [routerLink]="config.getPanelUrl('openstack/volumes')">
                    <span *ngIf="openstackSummary.volumes > 1" i18n>
                      {{openstackSummary.volumes}} volumes
                    </span>
                    <span *ngIf="openstackSummary.volumes === 1" i18n>
                      1 volume
                    </span>
                    <span *ngIf="openstackSummary.volumes === 0" i18n>No volumes</span>
                  </a>
                </td>
                <td>
                  <a mat-button [routerLink]="config.getPanelUrl('openstack/volumes/create')" i18n>Create volume</a>
                </td>
              </tr>
              <tr *ngIf="auth.feature('openstack.sshkeys')" class="v-middle">
                <td>
                  <a [routerLink]="config.getPanelUrl('openstack/ssh-keys')">
                    <span *ngIf="openstackSummary.pkm > 1" i18n>
                      {{openstackSummary.pkm}} SSH keys
                    </span>
                    <span *ngIf="openstackSummary.pkm === 1" i18n>
                      1 SSH key
                    </span>
                    <span *ngIf="openstackSummary.pkm === 0" i18n>No SSH keys</span>
                  </a>
                </td>
                <td>
                  <a mat-button [routerLink]="config.getPanelUrl('openstack/ssh-keys/create')" i18n>
                    Add SSH key
                  </a>
                </td>
              </tr>
            </tbody>
          </table>
        </mat-card-content>
      </mat-card>
    </div>

    <!-- services -->
    <div *ngIf="(((auth.feature('billing.services') || auth.feature('billing.invoices')) &&
    billingSummary) || plugins.length) && billingSummary">
      <span class="dashboard-subheader" i18n>Services</span>
      <mat-card appearance="raised">
        <mat-card-content>
          <table *ngIf="(auth.feature('billing.services') || auth.feature('billing.invoices'))
          && billingSummary" class="fl-table dashboard-summary-table">
            <tbody>
              <tr *ngIf="auth.feature('billing.invoices')" class="v-middle">
                <td>
                  <a [routerLink]="config.getPanelUrl('billing/invoices')">
                    <span *ngIf="billingSummary.invoices_details.invoices_count > 1" i18n>
                      {{billingSummary.invoices_details.invoices_count}} invoices
                      <span *ngIf="billingSummary.invoices_details.unpaid_invoices_count === 0" class="fl-green-color">
                        (All paid)
                      </span>
                      <span *ngIf="billingSummary.invoices_details.unpaid_invoices_count > 0" class="fl-red-color">
                        ({{billingSummary.invoices_details.unpaid_invoices_count}} unpaid)
                      </span>
                    </span>
                    <span *ngIf="billingSummary.invoices_details.invoices_count === 1" i18n>
                      1 invoice
                    </span>
                    <span *ngIf="billingSummary.invoices_details.invoices_count === 0" i18n>No invoices</span>
                  </a>
                </td>
                <td></td>
              </tr>
              <tr *ngIf="auth.feature('billing.services')" class="v-middle">
                <td>
                  <a [routerLink]="config.getPanelUrl('billing/services')">
                    <span *ngIf="billingSummary.services_count > 1" i18n>
                      {{billingSummary.services_count}} services
                    </span>
                    <span *ngIf="billingSummary.services_count === 1" i18n>
                      1 service
                    </span>
                    <span *ngIf="billingSummary.services_count === 0" i18n>No services</span>
                  </a>
                </td>
                <td>
                  <a mat-button [routerLink]="config.getPanelUrl('billing/order')"
                     *ngIf="auth.feature('billing.order')" i18n>
                    Order new service
                  </a>
                </td>
              </tr>
            </tbody>
          </table>
          <app-plugin-ui
            *ngFor="let plugin of plugins"
            [plugin]="plugin" [panelName]="'enduser'" componentName="DashboardServicesRows"
            [componentData]="plugin">
          </app-plugin-ui>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
</div>
