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

<div class="{{ block.settings.visibility }}"
  id="replica-warning-2-{{ 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="--margin-top: {{ block.settings.margin_top | divided_by: 10.0 }}rem;--margin-bottom: {{ block.settings.margin_bottom | divided_by: 10.0 }}rem;"
>
  {% if block.settings.warning_style == 'dashed' %}
    <div class="replica-warning replica-warning--dashed"
         style="
           border: 2px dashed {{ block.settings.border_color }};
           border-left: 4px solid {{ block.settings.border_color }};
           background-color: {{ block.settings.background_color }};
           border-radius: {{ block.settings.border_radius }}px;
           text-align: {{ block.settings.text_align }};
         ">
      <div class="replica-warning__header">
        <div class="replica-warning__icon"
             style="background-color: {{ block.settings.icon_background_color }}; color: {{ block.settings.icon_text_color }};">
          {{ block.settings.warning_icon }}
        </div>
        <h3 class="replica-warning__title"
            style="color: {{ block.settings.title_color }}; font-size: {{ block.settings.title_font_size }}px;">
          {{ block.settings.warning_title }}
        </h3>
      </div>
      <p class="replica-warning__text"
         style="color: {{ block.settings.text_color }}; font-size: {{ block.settings.text_font_size }}px;">
        {{ block.settings.warning_text }}
      </p>
      {% if block.settings.show_badge %}
        <span class="replica-warning__badge"
              style="
                background-color: {{ block.settings.badge_background_color }};
                color: {{ block.settings.badge_text_color }};
                border-radius: {{ block.settings.badge_border_radius }}px;
              ">
          {{ block.settings.badge_icon }} {{ block.settings.badge_text }}
        </span>
      {% endif %}
    </div>
  {% else %}
    <div class="replica-warning replica-warning--minimalist"
         style="
           border-left: 4px solid {{ block.settings.border_color }};
           background-color: {{ block.settings.background_color }};
           border-radius: {{ block.settings.border_radius }}px;
           text-align: {{ block.settings.text_align }};
           box-shadow: 0 2px 10px rgba(0,0,0,0.1);
         ">
      <div class="replica-warning__header">
        <div class="replica-warning__icon"
             style="background-color: {{ block.settings.icon_background_color }}; color: {{ block.settings.icon_text_color }};">
          {{ block.settings.warning_icon }}
        </div>
        <h3 class="replica-warning__title"
            style="color: {{ block.settings.title_color }}; font-size: {{ block.settings.title_font_size }}px;">
          {{ block.settings.warning_title }}
        </h3>
      </div>
      <p class="replica-warning__text"
         style="color: {{ block.settings.text_color }}; font-size: {{ block.settings.text_font_size }}px;">
        {{ block.settings.warning_text }}
      </p>
    </div>
  {% endif %}
</div>

<style>
  .replica-warning {
    padding: 20px;
    margin-top: var(--margin-top);
    margin-bottom: var(--margin-bottom);
  }

  .replica-warning--minimalist {
    padding: 12px 16px;
  }

  .replica-warning__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
  }

  .replica-warning__icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    flex-shrink: 0;
  }

  .replica-warning__title {
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
  }

  .replica-warning__text {
    margin: 0;
    line-height: 1.4;
  }

  .replica-warning__badge {
    display: inline-block;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 10px;
  }

  @media (max-width: 768px) {
    .replica-warning {
      padding: 16px;
    }

    .replica-warning--minimalist {
      padding: 6px 10px;
    }

    .replica-warning__header {
      gap: 8px;
    }

    .replica-warning__icon {
      width: 20px;
      height: 20px;
      font-size: 12px;
    }
  }
</style>

<script>
  function getOrdinalSuffixRM2(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 initReplicaWarning2Dates(root) {
    var wrappers;
    if (root && root.id && root.id.indexOf('replica-warning-2-') === 0) {
      wrappers = [root];
    } else {
      var scope = root || document;
      wrappers = scope.querySelectorAll('[id^="replica-warning-2-"]');
    }

    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 + getOrdinalSuffixRM2(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('.replica-warning__title');
      if (titleEl) titleEl.textContent = resolvedTitle;
    });
  }

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

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

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