{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.mobile_padding_top }}px;
    padding-bottom: {{ section.settings.mobile_padding_bottom }}px;
  }
  
  .horizontal-ticker-{{ section.id }} .horizontal-ticker__container {
    animation: horTicker {{ 150 | divided_by: section.settings.speed }}s linear infinite forwards;
    column-gap: {{ section.settings.mobile_spacing }}px;
  }

  .horizontal-ticker-{{ section.id }} {
    overflow-x: hidden;
    max-width: 100%;
    
    background: {{ section.settings.bg_color }}
  }
  .horizontal-ticker__inner {
      overflow: hidden;
  }
  .horizontal-ticker__container {
      display: flex;
      align-items: center;
      width: fit-content;
  }
  .horizontal-ticker__item {
      margin: 0;
      line-height: 1;
      white-space: nowrap;
  }
  .horizontal-ticker__item--italic {
      font-style: italic;
  }
  .horizontal-ticker__item--uppercase {
      text-transform: uppercase;
  }
  .horizontal-ticker__item--bold {
      font-weight: 700;
  }
  .horizontal-ticker__image {
      height: var(--image-height);
      width: auto;
  }

  .custom-color-text-{{section.id}} {
    color: {{ section.settings.text_color }};
  }
  @keyframes horTicker {
      to {
          transform: translateX(-50%);
      }
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.desktop_padding_top }}px;
      padding-bottom: {{ section.settings.desktop_padding_bottom }}px;
    }

    .horizontal-ticker-{{ section.id }} .horizontal-ticker__container {
      column-gap: {{ section.settings.desktop_spacing }}px;
    }
  }
{%- endstyle -%}

<div class="horizontal-ticker-{{ section.id }} color-{{ section.settings.color_scheme }} section-{{ section.id }}-padding {{ section.settings.visibility }}" style='--mobile-text-size: {{ section.settings.mobile_text_size | divided_by: 10.0 }}rem;--desktop-text-size: {{ section.settings.desktop_text_size | divided_by: 10.0 }}rem;--mobile-image-height: {{ section.settings.mobile_image_height | divided_by: 10.0 }}rem;--desktop-image-height: {{ section.settings.desktop_image_height | divided_by: 10.0 }}rem;'>
  <div class="horizontal-ticker__container">
    {% assign unique_blocks_total = section.blocks | size %}
    {% assign target_multiply = 20 | divided_by: unique_blocks_total | floor %}
    {% assign target_total = unique_blocks_total | times: target_multiply | times: 2 %}
    {% assign block_counter = 0 %}

    {%- for block in section.blocks -%}
      {%- assign block_counter = block_counter | plus: 1 -%}
      {% if block.type == 'text' %}
        <p class="custom-color-text-{{ section.id }} custom-font-size horizontal-ticker__item{% if section.settings.italic_text %} horizontal-ticker__item--italic{% endif %}{% if section.settings.uppercase_text %} horizontal-ticker__item--uppercase{% endif %}{% if section.settings.bold_text %} horizontal-ticker__item--bold{% endif %}">
          {{ block.settings.title }}
        </p>
      {% else %}
        <img
          src="{{ block.settings.image | image_url }}"
          {% if block.settings.image.alt != blank %}
            alt="{{ block.settings.image.alt | escape }}"
          {% else %}
            role="presentation"
          {% endif %}
          class='custom-image-height'
          height="auto"
          width="auto"
          loading="lazy"
        >
      {% endif %}
    {%- endfor -%}

    {%- if block_counter < target_total -%}
      {% for i in (1..15) %}
        {% for block in section.blocks %}
          {% if block.type == 'text' %}
            <p class="custom-color-text-{{ section.id }} custom-font-size horizontal-ticker__item{% if section.settings.italic_text %} horizontal-ticker__item--italic{% endif %}{% if section.settings.uppercase_text %} horizontal-ticker__item--uppercase{% endif %}{% if section.settings.bold_text %} horizontal-ticker__item--bold{% endif %}">
              {{ block.settings.title }}
            </p>
          {% else %}
            <img
              src="{{ block.settings.image | image_url }}"
              {% if block.settings.image.alt != blank %}
                alt="{{ block.settings.image.alt | escape }}"
              {% else %}
                role="presentation"
              {% endif %}
              class='custom-image-height'
              height="auto"
              width="auto"
              loading="lazy"
            >
          {% endif %}

          {% assign block_counter = block_counter | plus: 1 %}
          {% if block_counter >= target_total %}
            {% break %}
          {% endif %}
        {% endfor %}
        {% if block_counter >= target_total %}
          {% break %}
        {% endif %}
      {% endfor %}
    {%- endif -%}
  </div>
</div>

{% schema %}
{
  "name": "Barra de anuncios",
  "settings": [
    {
      "type": "select",
      "id": "visibility",
      "options": [
        {
          "value": "desktop-hidden",
          "label": "Solo móvil"
        },
        {
          "value": "mobile-hidden",
          "label": "Solo escritorio"
        },
        {
          "value": "always-display",
          "label": "Todos los dispositivos"
        }
      ],
      "label": "Mostrar en",
      "default": "always-display"
    },
    {
      "type": "header",
      "content": "Desplazador"
    },
    {
      "type": "range",
      "id": "speed",
      "label": "Velocidad del desplazador",
      "min": 1,
      "max": 5,
      "default": 3,
      "step": 0.5
    },
    {
      "type": "number",
      "id": "mobile_spacing",
      "label": "Espaciado móvil (px)",
      "default": 60
    },
    {
      "type": "number",
      "id": "desktop_spacing",
      "label": "Espaciado de escritorio (px)",
      "default": 100
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Color de fondo"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Color de texto"
    },
    {
      "type": "header",
      "content": "Texto"
    },
    {
      "type": "range",
      "id": "mobile_text_size",
      "min": 8,
      "max": 30,
      "step": 1,
      "unit": "px",
      "default": 16,
      "label": "Tamaño de texto móvil"
    },
    {
      "type": "range",
      "id": "desktop_text_size",
      "min": 10,
      "max": 40,
      "step": 1,
      "unit": "px",
      "default": 18,
      "label": "Tamaño de texto de escritorio"
    },
    {
      "type": "checkbox",
      "id": "italic_text",
      "label": "Texto en cursiva",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "uppercase_text",
      "label": "Texto en mayúsculas",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "bold_text",
      "label": "Texto en negrita",
      "default": false
    },
    {
      "type": "header",
      "content": "Imágenes"
    },
    {
      "type": "range",
      "id": "mobile_image_height",
      "min": 10,
      "max": 60,
      "step": 2,
      "unit": "px",
      "default": 26,
      "label": "Altura de imagen móvil"
    },
    {
      "type": "range",
      "id": "desktop_image_height",
      "min": 12,
      "max": 100,
      "step": 4,
      "unit": "px",
      "default": 40,
      "label": "Altura de imagen de escritorio"
    },
    {
      "type": "header",
      "content": "Relleno móvil"
    },
    {
      "type": "range",
      "id": "mobile_padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 12
    },
    {
      "type": "range",
      "id": "mobile_padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 12
    },
    {
      "type": "header",
      "content": "Relleno de escritorio"
    },
    {
      "type": "range",
      "id": "desktop_padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 16
    },
    {
      "type": "range",
      "id": "desktop_padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 16
    }
  ],
  "blocks": [
    {
      "type": "text",
      "name": "Texto",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "default": "Bienvenido a Escala 100K",
          "label": "Texto"
        }
      ]
    },
    {
      "type": "image",
      "name": "Imagen",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Imagen"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Barra de anuncios",
      "blocks": [
        {
          "type": "text"
        },
        {
          "type": "text"
        },
        {
          "type": "text"
        }
      ]
    }
  ]
}
{% endschema %}