<footer class="pos-footer">
  <div class="footer-start">
    <div class="status-indicator" [ngClass]="connectionStatus()">
      <span class="status-dot"></span>
      @if (connectionStatus() === 'online') {
        <span>{{ 'POS.SYSTEM_ONLINE' | translate }}</span>
      } @else if (connectionStatus() === 'offline') {
        <span>{{ 'POS.SYSTEM_OFFLINE' | translate }}</span>
      } @else {
        <span>{{ 'POS.SYNCING' | translate }}</span>
      }
    </div>
    <div class="shift-time">
      <i class="pi pi-clock"></i>
      <span>{{ 'POS.SHIFT_STARTED' | translate }}: {{ getShiftStart() }}</span>
    </div>
  </div>
  <div class="footer-end">
    <span class="version-badge">v2.4.0</span>
    <span class="clock">{{ currentTime() }}</span>
  </div>
</footer>
