<bit-simple-dialog>
  <div bitDialogIcon>
    <i class="bwi bwi-shield bwi-3x" aria-hidden="true"></i>
  </div>
  <div bitDialogTitle>Bitwarden</div>
  <div bitDialogContent>
    <p>&copy; Bitwarden Inc. 2015-{{ year }}</p>
    <p class="user-select">{{ "version" | i18n }}: {{ version$ | async }}</p>
    <p class="user-select">SDK: {{ sdkVersion$ | async }}</p>
    <ng-container *ngIf="data$ | async as data">
      <p *ngIf="data.isCloud">
        {{ "serverVersion" | i18n }}: {{ data.serverConfig?.version }}
        <span *ngIf="!data.serverConfig.isValid()">
          ({{ "lastSeenOn" | i18n: (data.serverConfig.utcDate | date: "mediumDate") }})
        </span>
      </p>

      <ng-container *ngIf="!data.isCloud">
        <ng-container *ngIf="data.serverConfig.server">
          <p class="user-select">
            {{ "serverVersion" | i18n }} <small>({{ "thirdParty" | i18n }})</small>:
            {{ data.serverConfig?.version }}
            <span *ngIf="!data.serverConfig.isValid()">
              ({{ "lastSeenOn" | i18n: (data.serverConfig.utcDate | date: "mediumDate") }})
            </span>
          </p>
          <div>
            <small>{{ "thirdPartyServerMessage" | i18n: data.serverConfig.server?.name }}</small>
          </div>
        </ng-container>

        <p class="user-select" *ngIf="!data.serverConfig.server">
          {{ "serverVersion" | i18n }} <small>({{ "selfHostedServer" | i18n }})</small>:
          {{ data.serverConfig?.version }}
          <span *ngIf="!data.serverConfig.isValid()">
            ({{ "lastSeenOn" | i18n: (data.serverConfig.utcDate | date: "mediumDate") }})
          </span>
        </p>
      </ng-container>
    </ng-container>
  </div>
  <div bitDialogFooter>
    <button bitButton bitDialogClose buttonType="primary" type="button">
      {{ "close" | i18n }}
    </button>
  </div>
</bit-simple-dialog>
