<div class="np-training-session-info">

  <div class="np-training-session-time">
    <i class="fal fa-clock np-button-color np-training-session-icon"></i>
    <time>{{ training_session.time_period }} {{ training_session.time_zone }}</time>
  </div>

  {% if training_session.approved? and training_session.location %}
    <div class="np-training-session-location">
      <i class="fal fa-map-marker-alt np-button-color np-training-session-icon"></i>
      {{ training_session.location }}
    </div>
  {% endif %}

  {% if training_session.approved? and training_session.session_url %}
    <div class="np-training-session-location">
      <i class="fal fa-map-marker-alt np-button-color np-training-session-icon"></i>
      <a href="{{ training_session.session_url }}" class="np-button-color" target="_blank" >
        {{ training_session.session_url }}
      </a>
    </div>
  {% endif %}
</div>

<script src="https://cdn.jsdelivr.net/npm/luxon@3.3.0/build/global/luxon.min.js"></script>
<script>
const timeZones = {
  '-12': 'Etc/GMT+12',
  '-11': 'Pacific/Pago_Pago',
  '-10': 'Pacific/Honolulu',
  '-09': 'America/Anchorage',
  '-08': 'America/Los_Angeles',
  '-07': 'America/Denver',
  '-06': 'America/Chicago',
  '-05': 'America/New_York',
  '-04': 'America/Caracas',
  '-03': 'America/Argentina/Buenos_Aires',
  '-02': 'Atlantic/South_Georgia',
  '-01': 'Atlantic/Azores',
  '00': 'UTC',
  'CET': 'CET',
  '+01': 'Europe/Berlin',
  '+02': 'Europe/Athens',
  '+03': 'Europe/Moscow',
  '+04': 'Asia/Dubai',
  '+05': 'Asia/Karachi',
  '+06': 'Asia/Almaty',
  '+07': 'Asia/Bangkok',
  '+08': 'Asia/Singapore',
  '+09': 'Asia/Tokyo',
  '+10': 'Australia/Sydney',
  '+11': 'Pacific/Noumea',
  '+12': 'Pacific/Auckland',
  '+13': 'Pacific/Tongatapu',
  '+14': 'Pacific/Kiritimati'
};

  function formatTimeZone(offset) {
    offset = offset.trim();
    if (timeZones[offset]) {
      return timeZones[offset];
    }

    try {
      const zoneName = luxon.FixedOffsetZone.parseSpecifier(offset).name;
      return `UTC${zoneName}`;
    } catch {
      return `{{ training_session.time_zone }}`;
    }
  }

  const offset = '+08';
  const formattedZone = formatTimeZone(offset);
  console.log(`Offset ${offset} to: ${formattedZone}`);

  document.querySelectorAll('time').forEach((timeElement) => {
    const offset = timeElement.textContent.split(' ').pop(); 
    const formattedZone = formatTimeZone(offset);
    timeElement.textContent = timeElement.textContent.replace(offset, formattedZone);
  });
</script>