{%- style -%}
  #shopify-section-{{ section.id }} > div {
    padding-block-start: calc(var(--section-spacing-unit-size) * {{ section.settings.spacing_top }});
    padding-block-end: calc(var(--section-spacing-unit-size) * {{ section.settings.spacing_bottom }});
  }
  #shopify-section-{{ section.id }} > div > div.gradient {
    padding: calc(var(--spacing-unit-size) * {{ section.settings.spacing_inner }});
    border-radius: var(--card-corner-radius);
  }
{%- endstyle -%}

<div class="app-embeds{% if section.settings.section_layout == 'boxed' %} container {{ section.settings.section_width }}{% else %} color-{{ section.settings.color_scheme }} gradient{% endif %}">
  <div class="{% if section.settings.section_layout == 'normal' %}container {{ section.settings.section_width }}{% else %}color-{{ section.settings.color_scheme }} gradient{% endif %}">
    {%- for block in section.blocks -%}
      {% render block %}
    {%- endfor -%}
  </div>
</div>

{% schema %}
{
  "name": "t:sections.apps.name",
  "tag": "section",
  "settings": [
    {
      "type": "select",
      "id": "section_layout",
      "label": "t:sections.global.section.layout.label",
      "options": [
        {
          "value": "normal",
          "label": "t:sections.global.section.layout.options.normal.label"
        },
        {
          "value": "boxed",
          "label": "t:sections.global.section.layout.options.boxed.label"
        }
      ],
      "default": "normal"
    },
    {
      "type": "select",
      "id": "spacing_inner",
      "label": "t:sections.global.spacing.inner.label",
      "options": [
        {
          "value": "0",
          "label": "t:sections.global.spacing.options.none.label"
        },
        {
          "value": "1",
          "label": "S"
        },
        {
          "value": "2",
          "label": "M"
        },
        {
          "value": "4",
          "label": "L"
        },
        {
          "value": "6",
          "label": "XL"
        }
      ],
      "default": "2"
    },
    {
      "type": "header",
      "content": "t:sections.global.header.settings.content",
      "info": "t:sections.global.header.settings.info"
    },
    {
      "type": "select",
      "id": "section_width",
      "label": "t:sections.global.section_width.label",
      "options": [
        {
          "value": "max-w-page",
          "label": "t:sections.global.section_width.options.page.label"
        },
        {
          "value": "max-w-fluid",
          "label": "t:sections.global.section_width.options.fluid.label"
        },
        {
          "value": "max-w-full",
          "label": "t:sections.global.section_width.options.full.label"
        }
      ],
      "default": "max-w-page"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.global.color_scheme.label",
      "default": "scheme-1"
    },
    {
      "type": "select",
      "id": "spacing_top",
      "label": "t:sections.global.spacing.spacing_top.label",
      "options": [
        {
          "value": "0",
          "label": "t:sections.global.spacing.options.none.label"
        },
        {
          "value": "1",
          "label": "S"
        },
        {
          "value": "2",
          "label": "M"
        },
        {
          "value": "4",
          "label": "L"
        },
        {
          "value": "6",
          "label": "XL"
        }
      ],
      "default": "2"
    },
    {
      "type": "select",
      "id": "spacing_bottom",
      "label": "t:sections.global.spacing.spacing_bottom.label",
      "options": [
        {
          "value": "0",
          "label": "t:sections.global.spacing.options.none.label"
        },
        {
          "value": "1",
          "label": "S"
        },
        {
          "value": "2",
          "label": "M"
        },
        {
          "value": "4",
          "label": "L"
        },
        {
          "value": "6",
          "label": "XL"
        }
      ],
      "default": "2"
    }
  ],
  "blocks": [
    {
      "type": "@app"
    }
  ],
  "presets": [
    {
      "name": "t:sections.apps.name"
    }
  ]
}
{% endschema %}