<div class="about-container">
  <div class="modal-header">
    <button type="button"
            class="close float-right"
            aria-label="Close"
            (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <img src="assets/Ceph_Logo_Standard_RGB_Reversed_120411_fa.png"
         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">
      {{ copyright }}
      {{ projectConstants.license }}
    </div>
  </div>
</div>
