<div class="about-container">
  <div class="modal-header">
    <button type="button"
            class="btn-close float-end"
            aria-label="Close"
            (click)="activeModal.close()">
    </button>
  </div>
  <div class="modal-body">
    <img src="assets/Ceph_Ceph_Logo_with_text_red_white.svg"
         class="ceph-logo"
         alt="{{ projectConstants.organization }}">
    <h3>
      <strong>{{ projectConstants.projectName }}</strong>
    </h3>
    <div class="product-versions">
      <strong>Version</strong>
      <br>
      {{ versionNumber }}
      {{ versionHash }}
      <br>
      {{ versionName }}
    </div>
    <br>
    <dl>
      <dt>Ceph Manager</dt>
      <dd>{{ hostAddr }}</dd>
      <dt>User</dt>
      <dd>{{ modalVariables.user }}</dd>
      <dt>User Role</dt>
      <dd>{{ modalVariables.role }}</dd>
      <dt>Browser</dt>
      <dd>{{ modalVariables.browserName }}</dd>
      <dt>Browser Version</dt>
      <dd>{{ modalVariables.browserVersion }}</dd>
      <dt>Browser OS</dt>
      <dd>{{ modalVariables.browserOS }}</dd>
    </dl>
  </div>
  <div class="modal-footer">
    <div class="text-left">
      {{ projectConstants.copyright }}
      {{ projectConstants.license }}
    </div>
  </div>
</div>
