{% comment %}
  Snippet: listicle-instagram-comments.liquid
  Renders up to 2 Instagram-style comment cards side by side (desktop) / stacked (mobile).
  If only 1 comment is active, it is centred at 50% max width on desktop.
{% endcomment %}

{%- assign ig_has_1 = false -%}
{%- assign ig_has_2 = false -%}
{%- if block.settings.comment_1_username != blank or block.settings.comment_1_text != blank -%}
  {%- assign ig_has_1 = true -%}
{%- endif -%}
{%- if block.settings.comment_2_username != blank or block.settings.comment_2_text != blank -%}
  {%- assign ig_has_2 = true -%}
{%- endif -%}

{%- assign ig_active_count = 0 -%}
{%- if ig_has_1 -%}{%- assign ig_active_count = ig_active_count | plus: 1 -%}{%- endif -%}
{%- if ig_has_2 -%}{%- assign ig_active_count = ig_active_count | plus: 1 -%}{%- endif -%}

<div class="listicle-ig-group-{{ block.id }}{% if ig_active_count == 1 %} listicle-ig-solo-{{ block.id }}{% endif %}"
     style="margin-top: {{ block.settings.group_margin_top }}px; margin-bottom: {{ block.settings.group_margin_bottom }}px;">

  {%- comment -%} ─── COMMENT 1 ─── {%- endcomment -%}
  {%- if ig_has_1 -%}
  <div class="listicle-ig-item">
    <div class="listicle-ig-card-{{ block.id }}">
      <div style="display:flex;gap:12px;align-items:flex-start;">

        {%- comment -%} Avatar {%- endcomment -%}
        {%- if block.settings.comment_1_image != blank -%}
          <div style="width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0;">
            <img src="{{ block.settings.comment_1_image | image_url: width: 80 }}" alt="{{ block.settings.comment_1_username | escape }}" width="32" height="32" loading="lazy" style="width:100%;height:100%;object-fit:cover;display:block;">
          </div>
        {%- else -%}
          <div style="width:32px;height:32px;border-radius:50%;background:#ddd;flex-shrink:0;"></div>
        {%- endif -%}

        <div style="flex:1;min-width:0;">
          {%- comment -%} Header row: username + timestamp + author heart {%- endcomment -%}
          <div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;flex-wrap:wrap;">
            <span class="listicle-ig-username-{{ block.id }}">{{ block.settings.comment_1_username }}</span>
            <span class="listicle-ig-timestamp-{{ block.id }}">{{ block.settings.comment_1_timestamp }}</span>
            {%- if block.settings.show_author_heart -%}
              <svg viewBox="0 0 32 32" style="width:16px;height:16px;fill:{{ block.settings.author_heart_color }};flex-shrink:0;">
                <path d="M26.996 12.898c-.064-2.207-1.084-4.021-2.527-5.13-1.856-1.428-4.415-1.69-6.542-.132-.702.516-1.359 1.23-1.927 2.168-.568-.938-1.224-1.652-1.927-2.167-2.127-1.559-4.685-1.297-6.542.132-1.444 1.109-2.463 2.923-2.527 5.13-.035 1.172.145 2.48.788 3.803 1.01 2.077 5.755 6.695 10.171 10.683l.035.038.002-.002.002.002.036-.038c4.415-3.987 9.159-8.605 10.17-10.683.644-1.323.822-2.632.788-3.804z"/>
              </svg>
              <span class="listicle-ig-author-label-{{ block.id }}">{{ block.settings.author_label_text }}</span>
            {%- endif -%}
          </div>

          {%- comment -%} Comment text {%- endcomment -%}
          <div class="listicle-ig-text-{{ block.id }}">{{ block.settings.comment_1_text }}</div>

          {%- comment -%} Actions row {%- endcomment -%}
          <div class="listicle-ig-actions-{{ block.id }}">
            <span class="listicle-ig-action-item">{{ block.settings.comment_1_like_count }}</span>
            <span class="listicle-ig-action-item">{{ block.settings.reply_text }}</span>
          </div>
        </div>

        {%- comment -%} Like heart {%- endcomment -%}
        {%- if block.settings.show_like_button -%}
          <div style="cursor:pointer;padding:4px;flex-shrink:0;">
            <svg viewBox="0 0 32 32" class="listicle-ig-heart-{{ block.id }}" style="width:16px;height:16px;fill:none;stroke:{{ block.settings.like_heart_color }};stroke-width:2;transition:stroke 0.2s ease;">
              <path d="M26.996 12.898c-.064-2.207-1.084-4.021-2.527-5.13-1.856-1.428-4.415-1.69-6.542-.132-.702.516-1.359 1.23-1.927 2.168-.568-.938-1.224-1.652-1.927-2.167-2.127-1.559-4.685-1.297-6.542.132-1.444 1.109-2.463 2.923-2.527 5.13-.035 1.172.145 2.48.788 3.803 1.01 2.077 5.755 6.695 10.171 10.683l.035.038.002-.002.002.002.036-.038c4.415-3.987 9.159-8.605 10.17-10.683.644-1.323.822-2.632.788-3.804z"/>
            </svg>
          </div>
        {%- endif -%}

      </div>
    </div>
  </div>
  {%- endif -%}

  {%- comment -%} ─── COMMENT 2 ─── {%- endcomment -%}
  {%- if ig_has_2 -%}
  <div class="listicle-ig-item">
    <div class="listicle-ig-card-{{ block.id }}">
      <div style="display:flex;gap:12px;align-items:flex-start;">

        {%- if block.settings.comment_2_image != blank -%}
          <div style="width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0;">
            <img src="{{ block.settings.comment_2_image | image_url: width: 80 }}" alt="{{ block.settings.comment_2_username | escape }}" width="32" height="32" loading="lazy" style="width:100%;height:100%;object-fit:cover;display:block;">
          </div>
        {%- else -%}
          <div style="width:32px;height:32px;border-radius:50%;background:#ddd;flex-shrink:0;"></div>
        {%- endif -%}

        <div style="flex:1;min-width:0;">
          <div style="display:flex;align-items:center;gap:6px;margin-bottom:2px;flex-wrap:wrap;">
            <span class="listicle-ig-username-{{ block.id }}">{{ block.settings.comment_2_username }}</span>
            <span class="listicle-ig-timestamp-{{ block.id }}">{{ block.settings.comment_2_timestamp }}</span>
            {%- if block.settings.show_author_heart -%}
              <svg viewBox="0 0 32 32" style="width:16px;height:16px;fill:{{ block.settings.author_heart_color }};flex-shrink:0;">
                <path d="M26.996 12.898c-.064-2.207-1.084-4.021-2.527-5.13-1.856-1.428-4.415-1.69-6.542-.132-.702.516-1.359 1.23-1.927 2.168-.568-.938-1.224-1.652-1.927-2.167-2.127-1.559-4.685-1.297-6.542.132-1.444 1.109-2.463 2.923-2.527 5.13-.035 1.172.145 2.48.788 3.803 1.01 2.077 5.755 6.695 10.171 10.683l.035.038.002-.002.002.002.036-.038c4.415-3.987 9.159-8.605 10.17-10.683.644-1.323.822-2.632.788-3.804z"/>
              </svg>
              <span class="listicle-ig-author-label-{{ block.id }}">{{ block.settings.author_label_text }}</span>
            {%- endif -%}
          </div>

          <div class="listicle-ig-text-{{ block.id }}">{{ block.settings.comment_2_text }}</div>

          <div class="listicle-ig-actions-{{ block.id }}">
            <span class="listicle-ig-action-item">{{ block.settings.comment_2_like_count }}</span>
            <span class="listicle-ig-action-item">{{ block.settings.reply_text }}</span>
          </div>
        </div>

        {%- if block.settings.show_like_button -%}
          <div style="cursor:pointer;padding:4px;flex-shrink:0;">
            <svg viewBox="0 0 32 32" class="listicle-ig-heart-{{ block.id }}" style="width:16px;height:16px;fill:none;stroke:{{ block.settings.like_heart_color }};stroke-width:2;transition:stroke 0.2s ease;">
              <path d="M26.996 12.898c-.064-2.207-1.084-4.021-2.527-5.13-1.856-1.428-4.415-1.69-6.542-.132-.702.516-1.359 1.23-1.927 2.168-.568-.938-1.224-1.652-1.927-2.167-2.127-1.559-4.685-1.297-6.542.132-1.444 1.109-2.463 2.923-2.527 5.13-.035 1.172.145 2.48.788 3.803 1.01 2.077 5.755 6.695 10.171 10.683l.035.038.002-.002.002.002.036-.038c4.415-3.987 9.159-8.605 10.17-10.683.644-1.323.822-2.632.788-3.804z"/>
            </svg>
          </div>
        {%- endif -%}

      </div>
    </div>
  </div>
  {%- endif -%}

</div>

<style>
  .listicle-ig-group-{{ block.id }} {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: {{ block.settings.column_gap }}px;
    align-items: start;
  }

  .listicle-ig-solo-{{ block.id }} {
    grid-template-columns: 1fr;
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
  }

  @media (max-width: 749px) {
    .listicle-ig-group-{{ block.id }} {
      grid-template-columns: 1fr;
      max-width: 100%;
    }
  }

  .listicle-ig-card-{{ block.id }} {
    background: {{ block.settings.background_color }};
    border-radius: {{ block.settings.border_radius }}px;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    padding: {{ block.settings.block_padding }}px;
    overflow: hidden;
  }

  .listicle-ig-username-{{ block.id }} {
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-body);
    font-size: {{ block.settings.username_font_size }}px;
    color: {{ block.settings.username_color }};
  }

  .listicle-ig-timestamp-{{ block.id }} {
    font-size: {{ block.settings.timestamp_font_size }}px;
    color: {{ block.settings.timestamp_color }};
  }

  .listicle-ig-author-label-{{ block.id }} {
    font-size: {{ block.settings.author_label_font_size }}px;
    color: {{ block.settings.author_label_color }};
    font-weight: 400;
  }

  .listicle-ig-text-{{ block.id }} {
    color: {{ block.settings.comment_text_color }};
    font-size: {{ block.settings.comment_text_font_size }}px;
    line-height: 1.4;
    margin-bottom: 8px;
    letter-spacing: var(--letter-spacing-body);
  }

  .listicle-ig-actions-{{ block.id }} {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: {{ block.settings.actions_font_size }}px;
    color: {{ block.settings.actions_color }};
  }

  .listicle-ig-action-item {
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
  }

  .listicle-ig-action-item:hover { color: #262626; }

  .listicle-ig-heart-{{ block.id }}:hover { stroke: #ed4956 !important; }
</style>