@if (dateTimeContext) {
  <div class="d-flex a-i-center l-h-tight form-control">
    <i
      class="m-r-4"
      [c8yIcon]="'schedule1'"
    ></i>
    <div class="d-col text-left fit-w min-width-0">
      <span
        class="text-10 l-h-1 text-muted"
        data-cy="global-date-context--Selected-interval"
      >
        {{ INTERVALS[dateTimeContext.interval] | translate }}
      </span>

      @if (mode === 'from') {
        <span
          class="text-12 text-medium text-truncate"
          title="{{ dateTimeContext.dateFrom | c8yDate: DATE_FORMAT }}"
        >
          {{ 'From`date`' | translate }} {{ dateTimeContext.dateFrom | c8yDate: DATE_FORMAT }}
        </span>
      }

      @if (mode === 'to') {
        <span
          class="text-12 l-h-1 text-medium text-truncate"
          title="{{ dateTimeContext.dateTo | c8yDate: DATE_FORMAT }}"
        >
          {{ 'To`date`' | translate }} {{ dateTimeContext.dateTo | c8yDate: DATE_FORMAT }}
        </span>
      }

      @if (mode === 'default') {
        <span
          class="text-12 l-h-1 text-medium text-truncate"
          title="{{ dateTimeContext.dateFrom | c8yDate: DATE_FORMAT }} — {{
            dateTimeContext.dateTo | c8yDate: DATE_FORMAT
          }}"
          data-cy="global-date-context--Selected-time-range"
        >
          {{ dateTimeContext.dateFrom | c8yDate: DATE_FORMAT }} —
          {{ dateTimeContext.dateTo | c8yDate: DATE_FORMAT }}
        </span>
      }
    </div>
  </div>
}