{% extends "templates/base.html" %}

{% block meta_copydoc %}
  https://drive.google.com/drive/folders/1XqlPwl4su8nwIjbnhbfTpG5vJOl8JLxI
{% endblock meta_copydoc %}

{% block body_class %}
  is-paper
{% endblock body_class %}

{% block outer_content %}
  {% if show_cred_maintenance_alert and cred_maintenance_start and cred_maintenance_end %}
    <div class="p-notification--information" style="margin:1rem">
      <div class="p-notification__content">
        <h5 class="p-notification__title">Maintenance Scheduled</h5>
        <p class="p-notification__message" id="cred-maintenance-message"></p>
      </div>
    </div>
    <script>
      const dateTimeFormatter = (dateTime, locale = 'default') => {
        const date = new Date(dateTime);
        const options = {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          hour12: true,
          timeZoneName: 'short',
        };

        let formattedDate = date.toLocaleString(locale, {
          ...options,
          timeZoneName: undefined
        });
        formattedDate = formattedDate.replace(/am|pm/, match => match.toUpperCase());
        const timeZone = date.toLocaleString(locale, {
          timeZoneName: 'short'
        }).split(' ').pop();
        return `${formattedDate} (${timeZone})`;
      }

      const handleFormatMaintenanceMessage = () => {
        const showBanner = '{{ show_cred_maintenance_alert }}';
        if (showBanner !== 'True') return;
        let maintenanceStart = '{{ cred_maintenance_start }}';
        let maintenanceEnd = '{{ cred_maintenance_end }}';
        if (maintenanceStart === 'None' || maintenanceEnd === 'None') {
          return;
        }
        maintenanceStart = maintenanceStart ? new Date(maintenanceStart) : null;
        maintenanceEnd = maintenanceEnd ? new Date(maintenanceEnd) : null;
        const maintenanceStartFormatted = dateTimeFormatter(maintenanceStart, navigator.language);
        const maintenanceEndFormatted = dateTimeFormatter(maintenanceEnd, navigator.language);
        const elem = document.getElementById("cred-maintenance-message");
        if (elem) {
          elem.innerHTML = `Our system will be under maintenance starting from <strong>${maintenanceStartFormatted}</strong> to <strong>${maintenanceEndFormatted}</strong>`;
        }
      }

      document.addEventListener('DOMContentLoaded', handleFormatMaintenanceMessage);
    </script>
  {% endif %}

  {% block content %}{% endblock %}
{% endblock %}