{% comment %}
  Snippet: listicle-facebook-comments.liquid
  Renders up to 2 Facebook-style comment bubbles side by side (desktop) / stacked (mobile).
  If only 1 comment is active, it is centered and full-width at 50% max on desktop.
{% endcomment %}

{% if block.settings.use_facebook_font %}
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap" rel="stylesheet">
{% endif %}

{%- assign fb_has_1 = false -%}
{%- assign fb_has_2 = false -%}
{%- if block.settings.comment_1_author != blank or block.settings.comment_1_text != blank -%}
  {%- assign fb_has_1 = true -%}
{%- endif -%}
{%- if block.settings.comment_2_author != blank or block.settings.comment_2_text != blank -%}
  {%- assign fb_has_2 = true -%}
{%- endif -%}

{%- assign fb_active_count = 0 -%}
{%- if fb_has_1 -%}{%- assign fb_active_count = fb_active_count | plus: 1 -%}{%- endif -%}
{%- if fb_has_2 -%}{%- assign fb_active_count = fb_active_count | plus: 1 -%}{%- endif -%}

<div class="listicle-fb-group-{{ block.id }} {% if fb_active_count == 1 %}listicle-fb-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 fb_has_1 -%}
  <div class="listicle-fb-item">
    <div class="listicle-fb-card-{{ block.id }}">
      <div style="display:flex;gap:8px;align-items:flex-start;">
        {%- 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_author | 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:{{ block.settings.comment_1_profile_color }};flex-shrink:0;"></div>
        {%- endif -%}
        <div style="flex:1;min-width:0;">
          <div class="listicle-fb-bubble-{{ block.id }}">
            <div class="listicle-fb-author-{{ block.id }}">{{ block.settings.comment_1_author }}</div>
            <div class="listicle-fb-text-{{ block.id }}">{{ block.settings.comment_1_text }}</div>
            <div class="listicle-fb-reactions-{{ block.id }}">
              <div style="display:flex;">{% render 'listicle-fb-icons', bid: block.id, slot: '1a' %}</div>
              <span class="listicle-fb-rcount-{{ block.id }}">{{ block.settings.comment_1_reaction_count }}</span>
            </div>
          </div>
          <div class="listicle-fb-meta-{{ block.id }}">
            <span class="listicle-fb-action-{{ block.id }}">{{ block.settings.like_text }}</span>
            <span class="listicle-fb-action-{{ block.id }}">{{ block.settings.reply_text }}</span>
            <span>{{ block.settings.comment_1_timestamp }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  {%- endif -%}

  {%- comment -%} ─── COMMENT 2 ─── {%- endcomment -%}
  {%- if fb_has_2 -%}
  <div class="listicle-fb-item">
    <div class="listicle-fb-card-{{ block.id }}">
      <div style="display:flex;gap:8px;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_author | 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:{{ block.settings.comment_2_profile_color }};flex-shrink:0;"></div>
        {%- endif -%}
        <div style="flex:1;min-width:0;">
          <div class="listicle-fb-bubble-{{ block.id }}">
            <div class="listicle-fb-author-{{ block.id }}">{{ block.settings.comment_2_author }}</div>
            <div class="listicle-fb-text-{{ block.id }}">{{ block.settings.comment_2_text }}</div>
            <div class="listicle-fb-reactions-{{ block.id }}">
              <div style="display:flex;">{% render 'listicle-fb-icons', bid: block.id, slot: '2a' %}</div>
              <span class="listicle-fb-rcount-{{ block.id }}">{{ block.settings.comment_2_reaction_count }}</span>
            </div>
          </div>
          <div class="listicle-fb-meta-{{ block.id }}">
            <span class="listicle-fb-action-{{ block.id }}">{{ block.settings.like_text }}</span>
            <span class="listicle-fb-action-{{ block.id }}">{{ block.settings.reply_text }}</span>
            <span>{{ block.settings.comment_2_timestamp }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  {%- endif -%}

</div>

<style>
  /* Two comments: side by side on desktop */
  .listicle-fb-group-{{ block.id }} {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: {{ block.settings.column_gap }}px;
    align-items: start;
  }

  /* One comment: centred, max half width on desktop */
  .listicle-fb-solo-{{ block.id }} {
    grid-template-columns: 1fr;
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Mobile: always single column, full width */
  @media (max-width: 749px) {
    .listicle-fb-group-{{ block.id }} {
      grid-template-columns: 1fr;
      max-width: 100%;
    }
  }

  .listicle-fb-card-{{ block.id }} {
    padding: {{ block.settings.block_padding }}px;
    font-family: {% if block.settings.use_facebook_font %}Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif{% else %}-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif{% endif %};
    line-height: 1.34;
  }

  .listicle-fb-bubble-{{ block.id }} {
    background: #f0f2f5;
    border-radius: 18px;
    padding: 8px 12px;
    margin-bottom: 4px;
    position: relative;
  }

  .listicle-fb-author-{{ block.id }} {
    font-weight: var(--font-weight-bold);
    font-size: {{ block.settings.author_name_font_size }}px;
    letter-spacing: var(--letter-spacing-body);
    color: #050505;
    margin-bottom: 2px;
  }

  .listicle-fb-text-{{ block.id }} {
    color: #050505;
    font-size: {{ block.settings.comment_text_font_size }}px;
    letter-spacing: var(--letter-spacing-body);
    line-height: 1.3;
  }

  .listicle-fb-reactions-{{ block.id }} {
    position: absolute;
    bottom: -10px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border-radius: 12px;
    padding: 2px 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    border: 1px solid #e4e6ea;
  }

  .listicle-fb-rcount-{{ block.id }} {
    color: #65676b;
    font-size: 13px;
    font-weight: 400;
  }

  .listicle-fb-meta-{{ block.id }} {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 12px;
    margin-top: 6px;
    margin-bottom: 12px;
    font-size: {{ block.settings.meta_font_size }}px;
    color: #65676b;
    letter-spacing: var(--letter-spacing-body);
  }

  .listicle-fb-action-{{ block.id }} {
    cursor: pointer;
    font-weight: 600;
  }

  .listicle-fb-action-{{ block.id }}:hover { text-decoration: underline; }
</style>