{%- comment -%}
  Section to embed a TikTok user's profile feed using an iframe.
  - No title.
  - No padding applied by this section's code.
  - Embed container is full width within the section.
{%- endcomment -%}

{%- if section.settings.tiktok_username != blank -%}
  <div class="tiktok-profile-embed-section-fullwidth" style="background-color: {{ section.settings.background_color }};">
    <div class="tiktok-profile-embed-container" style="width: 100%; margin: 0;">
      <iframe
        title="TikTok Profile Embed for @{{ section.settings.tiktok_username }}"
        name="__tt_embed_profile_{{ section.id }}"
        sandbox="allow-popups allow-popups-to-escape-sandbox allow-scripts allow-top-navigation allow-same-origin"
        src="https://www.tiktok.com/embed/@{{ section.settings.tiktok_username }}?lang={{ section.settings.lang }}"
        style="width: 100%; height: {{ section.settings.iframe_height }}px; display: block; visibility: unset; border: none; max-height: {{ section.settings.iframe_max_height }}px;"
        scrolling="{{ section.settings.scrolling_mode }}"
        allowfullscreen
      ></iframe>
    </div>
  </div>
{%- endif -%}

{% schema %}
{
  "name": "TikTok Full Width Feed", // CORRECTED: Shortened name
  "tag": "section",
  "class": "tiktok-profile-embed-wrapper-fullwidth",
  "settings": [
    {
      "type": "text",
      "id": "tiktok_username",
      "label": "TikTok Username",
      "info": "Enter your TikTok username (e.g., decorcedar.com, without the '@')",
      "default": "decorcedar.com"
    },
    {
      "type": "select",
      "id": "lang",
      "label": "Language",
      "options": [
        { "value": "en-US", "label": "English (US)" },
        { "value": "en-GB", "label": "English (UK)" },
        { "value": "es", "label": "Spanish" },
        { "value": "fr", "label": "French" },
        { "value": "de", "label": "German" },
        { "value": "ja", "label": "Japanese" }
      ],
      "default": "en-US"
    },
    {
      "type": "range",
      "id": "iframe_height",
      "min": 300,
      "max": 1200,
      "step": 10,
      "unit": "px",
      "label": "Embed Height",
      "default": 600
    },
    {
      "type": "range",
      "id": "iframe_max_height",
      "min": 300,
      "max": 1500,
      "step": 12,
      "unit": "px",
      "label": "Embed Max Height (CSS)",
      "default": 696
    },
    {
      "type": "select",
      "id": "scrolling_mode",
      "label": "Iframe Scrolling Attribute",
      "options": [
        { "value": "auto", "label": "Auto" },
        { "value": "yes", "label": "Yes" },
        { "value": "no", "label": "No" }
      ],
      "default": "auto",
      "info": "TikTok's embed typically handles its own scrolling. 'Auto' is recommended."
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Section Background Color",
      "default": "#FFFFFF"
    }
  ],
  "presets": [
    {
      "name": "TikTok Full Width Feed" // CORRECTED: Shortened name
    }
  ]
}
{% endschema %}