{%- liquid
  assign block_id = block.id | handle
-%}

<div
  class="replica-warning {{ block.settings.visibility }}"
  id="replica-warning-{{ block_id }}"
  {{ block.shopify_attributes }}
  data-use-date-title="{{ block.settings.use_date_title }}"
  data-warning-title="{{ block.settings.warning_title | escape }}"
  data-warning-title-with-date="{{ block.settings.warning_title_with_date | escape }}"
  data-date-format="{{ block.settings.date_format }}"
  data-month-labels="{{ block.settings.date_month_override | escape }}"
  data-day-labels="{{ block.settings.date_day_override | escape }}"
  data-show-year="{{ block.settings.date_show_year }}"
  style="
    background-color: {{ block.settings.background_color }} !important;
    color: {{ block.settings.text_color }} !important;
    border: {{ block.settings.border_width }}px {{ block.settings.border_style }} {{ block.settings.border_color }} !important;
    border-radius: {{ block.settings.border_radius }}px;
    padding: {{ block.settings.padding }}px;
    padding-left: {{ block.settings.padding | plus: 34 }}px;
    margin-top: {{ block.settings.margin_top }}px;
    margin-bottom: {{ block.settings.margin_bottom }}px;
    width: 100%;
    position: relative;
  "
>
  <div
    class="warning-icon"
    style="
      background-color: {{ block.settings.icon_background_color }} !important;
      color: {{ block.settings.icon_color }} !important;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      flex-shrink: 0;
      font-size: 10px;
      position: absolute;
      top: {{ block.settings.padding }}px;
      left: 14px;
    "
  >
    <svg
      fill="{{ block.settings.icon_color }}"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="{{ block.settings.icon_size | default: 16 }}px"
      height="{{ block.settings.icon_size | default: 16 }}px"
      viewBox="0 0 416.979 416.979"
    >
      <g>
        <path d="M356.004,61.156c-81.37-81.47-213.377-81.551-294.848-0.182c-81.47,81.371-81.552,213.379-0.181,294.85
          c81.369,81.47,213.378,81.551,294.849,0.181C437.293,274.636,437.375,142.626,356.004,61.156z M237.6,340.786
          c0,3.217-2.607,5.822-5.822,5.822h-46.576c-3.215,0-5.822-2.605-5.822-5.822V167.885c0-3.217,2.607-5.822,5.822-5.822h46.576
          c3.215,0,5.822,2.604,5.822,5.822V340.786z M208.49,137.901c-18.618,0-33.766-15.146-33.766-33.765
          c0-18.617,15.147-33.766,33.766-33.766c18.619,0,33.766,15.148,33.766,33.766C242.256,122.755,227.107,137.901,208.49,137.901z"/>
      </g>
    </svg>
  </div>
  <div class="warning-content">
    <div
      class="warning-title"
      style="font-size: {{ block.settings.title_font_size | minus: 6 }}px; color: {{ block.settings.text_color }} !important; font-weight: bold;"
    >
      {{ block.settings.warning_title }}
    </div>
    <div
      class="warning-text"
      style="
        font-size: {{ block.settings.text_font_size | minus: 2 }}px;
        letter-spacing: var(--letter-spacing-body);
        color: {{ block.settings.text_color }} !important;
      "
    >
      {{ block.settings.warning_text }}
    </div>
  </div>
</div>

<script>
  function getOrdinalSuffixRM(day) {
    if (day > 3 && day < 21) return 'th';
    switch (day % 10) {
      case 1: return 'st';
      case 2: return 'nd';
      case 3: return 'rd';
      default: return 'th';
    }
  }

  function initReplicaWarningDates(root) {
    var wrappers;
    if (root && root.id && root.id.indexOf('replica-warning-') === 0) {
      wrappers = [root];
    } else {
      var scope = root || document;
      wrappers = scope.querySelectorAll('[id^="replica-warning-"]');
    }

    wrappers.forEach(function(wrapper) {
      if (wrapper.getAttribute('data-use-date-title') !== 'true') return;

      var titleTemplate = wrapper.getAttribute('data-warning-title-with-date') || '';
      if (!titleTemplate) return;

      var monthLabelsRaw = wrapper.getAttribute('data-month-labels') || '';
      var dayLabelsRaw   = wrapper.getAttribute('data-day-labels') || '';
      var showYear       = wrapper.getAttribute('data-show-year') !== 'false';
      var dateFormat     = wrapper.getAttribute('data-date-format') || 'mm_dd';

      var monthLabels = monthLabelsRaw
        ? monthLabelsRaw.split(',').map(function(s) { return s.trim(); })
        : ['January','February','March','April','May','June','July','August','September','October','November','December'];

      var dayLabels = dayLabelsRaw
        ? dayLabelsRaw.split(',').map(function(s) { return s.trim(); })
        : ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];

      var now           = new Date();
      var day           = now.getDate();
      var dayOfWeek     = now.getDay();
      var month         = monthLabels[now.getMonth()];
      var dayName       = dayLabels[dayOfWeek];
      var year          = now.getFullYear();
      var dayWithSuffix = day + getOrdinalSuffixRM(day);

      var currentDate;
      switch (dateFormat) {
        case 'day_mm_dd':    currentDate = dayName + ', ' + month + ' ' + dayWithSuffix; break;
        case 'day_dd_mm':    currentDate = dayName + ', ' + day + '. ' + month; break;
        case 'mm_dd':        currentDate = month + ' ' + dayWithSuffix; break;
        case 'month_day':    currentDate = month + ' ' + day; break;
        case 'dd_mm':        currentDate = day + '. ' + month; break;
        case 'dd_mm_no_dot': currentDate = day + ' ' + month; break;
        default:             currentDate = month + ' ' + dayWithSuffix;
      }

      if (showYear) currentDate += ', ' + year;

      var resolvedTitle = titleTemplate.replace(/\[current_date\]/g, currentDate);
      var titleEl = wrapper.querySelector('.warning-title');
      if (titleEl) titleEl.textContent = resolvedTitle;
    });
  }

  document.addEventListener('DOMContentLoaded', function() {
    initReplicaWarningDates();
  });

  document.addEventListener('shopify:section:load', function(e) {
    initReplicaWarningDates(e.target);
  });

  document.addEventListener('shopify:block:select', function(e) {
    initReplicaWarningDates(e.target);
  });
</script>