{% liquid
  assign show_slider = false
  if block.settings.enable_slider
    assign items_count = 0
    if block.settings.reviewtext != blank
      assign items_count = items_count | plus: 1
    endif
    if block.settings.reviewtext_2 != blank
      assign items_count = items_count | plus: 1
    endif
    if block.settings.reviewtext_3 != blank
      assign items_count = items_count | plus: 1
    endif
    if items_count > 1
      assign show_slider = true
    endif
  endif

  if block.settings.display_arrows
    assign arrows_class = 'under'
  else
    assign arrows_class = 'hidden'
  endif
  if block.settings.display_dots
    assign dots_class = 'under'
  else
    assign dots_class = 'hidden'
  endif

  assign img_size = block.settings.image_size | default: 80
  assign img_radius = block.settings.image_border_radius | default: 50
%}

<div
  class="{{ block.settings.visibility }}"
  {{ block.shopify_attributes }}
  style="
    --margin-top: {{ block.settings.margin_top | divided_by: 10.0 }}rem;
    --margin-bottom: {{ block.settings.margin_bottom | divided_by: 10.0 }}rem;
    --review-img-size: {{ img_size }}px;
    --review-img-radius: {{ img_radius }}%;
    --star-color: {{ block.settings.star_color | default: '#ffd200' }};
  "
>

  {%- if show_slider -%}

    {%- liquid
      assign gap = '20'
      assign side_padding = '0'
    -%}
    <splide-component
      data-type='{{ block.settings.slider_type }}'
      data-autoplay='{{ block.settings.autoplay }}'
      data-autoplay-speed='{{ block.settings.autoplay_speed }}'
      data-gap-desktop="{{ gap }}"
      data-gap-mobile="{{ gap }}"
      data-side-padding-desktop="{{ side_padding }}"
      data-side-padding-mobile="{{ side_padding }}"
      data-slides-desktop="1"
      data-slides-mobile="1"
      data-desktop-adaptive-height="true"
      data-mobile-adaptive-height="true"
      style="--columns-desktop:1;--columns-mobile:1;--gap-desktop:{{ gap }}px;--gap-mobile:{{ gap }}px;--padding-desktop:{{ side_padding }}px;--padding-mobile:{{ side_padding }}px;"
    >
      <div class='splide splide--precalc-width splide--precalc-padding splide--small-pagination splide--desktop-dots-{{ dots_class }} splide--mobile-dots-{{ dots_class }} splide--desktop-arrows-{{ arrows_class }} splide--mobile-arrows-{{ arrows_class }}' data-desktop-adaptive-height="true" data-mobile-adaptive-height="true">
        <div class='splide__track'>
          <ul class="splide__list">

            {% for i in (1..3) %}
              {%- liquid
                if i == 1
                  assign r_image     = block.settings.reviewimage
                  assign r_text      = block.settings.reviewtext
                  assign r_name      = block.settings.reviewname
                  assign r_checkmark = block.settings.reviewcheckmark
                  assign r_verified  = block.settings.verifiedtext
                elsif i == 2
                  assign r_image     = block.settings.reviewimage_2
                  assign r_text      = block.settings.reviewtext_2
                  assign r_name      = block.settings.reviewname_2
                  assign r_checkmark = block.settings.reviewcheckmark_2
                  assign r_verified  = block.settings.verifiedtext_2
                else
                  assign r_image     = block.settings.reviewimage_3
                  assign r_text      = block.settings.reviewtext_3
                  assign r_name      = block.settings.reviewname_3
                  assign r_checkmark = block.settings.reviewcheckmark_3
                  assign r_verified  = block.settings.verifiedtext_3
                endif
              -%}
              {%- if r_text != blank -%}
                <li class="splide__slide">
                  <div
                    {% if block.settings.enable_box_styles %}
                      style="
                        background-color: {{ block.settings.bg_color }};
                        border: 1px {{ block.settings.border_style }} {{ block.settings.border_color }};
                        border-radius: {{ block.settings.border_radius }}px;
                        color: {{ block.settings.text_color }};
                        padding: 15px;
                        display: flex;
                        align-items: center;
                        gap: 15px;
                      "
                    {% else %}
                      style="padding: 15px; display: flex; align-items: center; gap: 15px;"
                    {% endif %}
                  >
                    {%- if block.settings.style == 'style1' -%}
                      <div class="img_box" style="width: var(--review-img-size); height: var(--review-img-size); border-radius: var(--review-img-radius); overflow: hidden; flex-shrink: 0;">
                        <img src="{{ r_image | img_url: 'master' }}" alt="Review Image" style="width: 100%; height: 100%; object-fit: cover;">
                      </div>
                      <div class="content_box rte" style="margin-left: 20px;">
                        <p style="font-size: 13px; text-align: left;" class="prod__description">
                          {{ r_text }}
                          <i class="fa-solid fa-star" style="color:var(--star-color);"></i>
                          <i class="fa-solid fa-star" style="color:var(--star-color);"></i>
                          <i class="fa-solid fa-star" style="color:var(--star-color);"></i>
                          <i class="fa-solid fa-star" style="color:var(--star-color);"></i>
                          <i class="fa-solid fa-star" style="color:var(--star-color);"></i>
                          <br>
                          <strong>– <i class="fa-solid fa-circle-check" style="color: {{ r_checkmark }};"></i> <i>{{ r_name }}</i></strong>
                        </p>
                      </div>
                    {%- endif -%}

                    {%- if block.settings.style == 'style2' -%}
                      <div class="img_box" style="width: var(--review-img-size); height: var(--review-img-size); border-radius: var(--review-img-radius); overflow: hidden; flex-shrink: 0;">
                        <img src="{{ r_image | img_url: 'master' }}" alt="Review Image" style="width: 100%; height: 100%; object-fit: cover;">
                      </div>
                      <div class="content_box rte" style="margin-left: 20px;">
                        <p style="font-size: 13px; text-align: left; line-height: 1.3;" class="prod__description">
                          {{ r_text }}
                          <br>
                          <i class="fa-solid fa-star" style="color:#ffd200; margin-top: 5px; margin-bottom: 5px;"></i>
                          <i class="fa-solid fa-star" style="color:var(--star-color);"></i>
                          <i class="fa-solid fa-star" style="color:var(--star-color);"></i>
                          <i class="fa-solid fa-star" style="color:var(--star-color);"></i>
                          <i class="fa-solid fa-star" style="color:var(--star-color);"></i>
                          <br>
                          <i class="fa-solid fa-circle-check" style="color: {{ r_checkmark }};"></i>&nbsp;
                          <i>{{ r_verified }}</i>
                          <span style="float: right;"><span>- {{ r_name }}</span></span>
                        </p>
                      </div>
                    {%- endif -%}

                    {%- if block.settings.style == 'style3' -%}
                      <div class="img_box" style="width: var(--review-img-size); height: var(--review-img-size); border-radius: var(--review-img-radius); overflow: hidden; flex-shrink: 0;">
                        <img src="{{ r_image | img_url: 'master' }}" alt="Review Image" style="width: 100%; height: 100%; object-fit: cover;">
                      </div>
                      <div class="content_box rte" style="flex: 1;">
                        <p style="margin: 0; font-weight: bold; font-size: 14px;">
                          {{ r_name }}
                          <i class="fa-solid fa-circle-check" style="color: {{ r_checkmark }}; margin-left: 5px;"></i>
                          <span style="margin-left: 8px;">
                            <i class="fa-solid fa-star" style="color:var(--star-color);"></i>
                            <i class="fa-solid fa-star" style="color:var(--star-color);"></i>
                            <i class="fa-solid fa-star" style="color:var(--star-color);"></i>
                            <i class="fa-solid fa-star" style="color:var(--star-color);"></i>
                            <i class="fa-solid fa-star" style="color:var(--star-color);"></i>
                          </span>
                        </p>
                        <p style="font-size: 13px; line-height: 1.4; margin-top: 6px;">{{ r_text }}</p>
                      </div>
                    {%- endif -%}
                  </div>
                </li>
              {%- endif -%}
            {% endfor %}

          </ul>
        </div>
        <div class='splide__dots-and-arrows'>
          <ul class="splide__pagination"></ul>
          <div class="splide__arrows"></div>
        </div>
      </div>
    </splide-component>

  {%- else -%}

    <li
      {% if block.settings.enable_box_styles %}
        style="
          background-color: {{ block.settings.bg_color }};
          border: 1px {{ block.settings.border_style }} {{ block.settings.border_color }};
          border-radius: {{ block.settings.border_radius }}px;
          color: {{ block.settings.text_color }};
          padding: 15px;
          display: flex;
          align-items: center;
          gap: 15px;
        "
      {% else %}
        style="padding: 15px; display: flex; align-items: center; gap: 15px;"
      {% endif %}
    >
      {% if block.settings.style == 'style1' %}
        <div class="img_box" style="width: var(--review-img-size); height: var(--review-img-size); border-radius: var(--review-img-radius); overflow: hidden; flex-shrink: 0;">
          <img src="{{ block.settings.reviewimage | img_url: 'master' }}" alt="Review Image" style="width: 100%; height: 100%; object-fit: cover;">
        </div>
        <div class="content_box rte" style="margin-left: 20px;">
          <p style="font-size: 13px; text-align: left;" class="prod__description">
            {{ block.settings.reviewtext }}
            <i class="fa-solid fa-star" style="color:var(--star-color);"></i>
            <i class="fa-solid fa-star" style="color:var(--star-color);"></i>
            <i class="fa-solid fa-star" style="color:var(--star-color);"></i>
            <i class="fa-solid fa-star" style="color:var(--star-color);"></i>
            <i class="fa-solid fa-star" style="color:var(--star-color);"></i>
            <br>
            <strong>– <i class="fa-solid fa-circle-check" style="color: {{ block.settings.reviewcheckmark }};"></i> <i>{{ block.settings.reviewname }}</i></strong>
          </p>
        </div>
      {% endif %}

      {% if block.settings.style == 'style2' %}
        <div class="img_box" style="width: var(--review-img-size); height: var(--review-img-size); border-radius: var(--review-img-radius); overflow: hidden; flex-shrink: 0;">
          <img src="{{ block.settings.reviewimage | img_url: 'master' }}" alt="Review Image" style="width: 100%; height: 100%; object-fit: cover;">
        </div>
        <div class="content_box rte" style="margin-left: 20px;">
          <p style="font-size: 13px; text-align: left; line-height: 1.3;" class="prod__description">
            {{ block.settings.reviewtext }}
            <br>
            <i class="fa-solid fa-star" style="color:#ffd200; margin-top: 5px; margin-bottom: 5px;"></i>
            <i class="fa-solid fa-star" style="color:var(--star-color);"></i>
            <i class="fa-solid fa-star" style="color:var(--star-color);"></i>
            <i class="fa-solid fa-star" style="color:var(--star-color);"></i>
            <i class="fa-solid fa-star" style="color:var(--star-color);"></i>
            <br>
            <i class="fa-solid fa-circle-check" style="color: {{ block.settings.reviewcheckmark }};"></i>&nbsp;
            <i>{{ block.settings.verifiedtext }}</i>
            <span style="float: right;"><span>- {{ block.settings.reviewname }}</span></span>
          </p>
        </div>
      {% endif %}

      {% if block.settings.style == 'style3' %}
        <div class="img_box" style="width: var(--review-img-size); height: var(--review-img-size); border-radius: var(--review-img-radius); overflow: hidden; flex-shrink: 0;">
          <img src="{{ block.settings.reviewimage | img_url: 'master' }}" alt="Review Image" style="width: 100%; height: 100%; object-fit: cover;">
        </div>
        <div class="content_box rte" style="flex: 1;">
          <p style="margin: 0; font-weight: bold; font-size: 14px;">
            {{ block.settings.reviewname }}
            <i class="fa-solid fa-circle-check" style="color: {{ block.settings.reviewcheckmark }}; margin-left: 5px;"></i>
            <span style="margin-left: 8px;">
              <i class="fa-solid fa-star" style="color:var(--star-color);"></i>
              <i class="fa-solid fa-star" style="color:var(--star-color);"></i>
              <i class="fa-solid fa-star" style="color:var(--star-color);"></i>
              <i class="fa-solid fa-star" style="color:var(--star-color);"></i>
              <i class="fa-solid fa-star" style="color:var(--star-color);"></i>
            </span>
          </p>
          <p style="font-size: 13px; line-height: 1.4; margin-top: 6px;">{{ block.settings.reviewtext }}</p>
        </div>
      {% endif %}
    </li>

  {%- endif -%}
</div>