Footer

{% set bg_color = section.settings.bg_color | default("#111827") %}
{% set text_color = section.settings.text_color | default("#f9fafb") %}
{% set pad_y = section.settings.padding_y | default(60) %}

<footer id="jw-section-{{ section.id }}" style="background-color: {{ bg_color }}; color: {{ text_color }}; padding: {{ pad_y }}px 20px;">
    <div class="jw-container" data-id="{{ section.id }}">
        <div class="row">
            
            {# RENDER COLUMNS #}
            {% if section.blocks is defined and section.blocks|length > 0 %}
                {% for block in section.blocks %}
                    
                    {% switch block.type %}
                    {% case "columns" %}
                        <div class="col-lg-3 col-md-6 mb-4" {{ jw_attributes(block) }}>
                            <h4 class="fontStyle4 mb-4" style="color: {{ text_color }};">{{ block.settings.heading | default("Quick Links") }}</h4>
                            
                            {# RENDER NESTED BLOCKS (NAVIGATION OR OTHERS) #}
                            {% if block.blocks %}
                                {% for subblock in block.blocks %}
                                    
                                    {% if subblock.type == "navigation" %}
                                        <ul class="list-unstyled fontStyle7" {{ jw_attributes(subblock) }}>
                                            {% if subblock.settings.links %}
                                                {% for menu in subblock.settings.links %}
                                                    <li class="mb-2">
                                                        <a href="{{ menu.link | default('#') }}" target="{{ menu.target }}" style="color: {{ text_color }}; opacity: 0.8; text-decoration: none;">
                                                            {% if menu.icon != "" %}
                                                                <span class="me-2">{{ menu.icon | raw }}</span> {# Usually SVGs #}
                                                            {% endif %}
                                                            {{ menu.label | default("Menu Item") }}
                                                        </a>
                                                    </li>
                                                {% endfor %}
                                            {% else %}
                                                <li>[ Click to Edit Menu ]</li>
                                            {% endif %}
                                        </ul>
                                    {% else %}
                                        {{ render_block(subblock) }}
                                    {% endif %}
                                    
                                {% endfor %}
                            {% endif %}
                        </div>
                    
                    {% default %}
                        {{ render_block(block) }}
                    {% endswitch %}

                {% endfor %}
            {% endif %}

        </div>

        {# SOCIAL ICONS #}
        <div class="border-top mt-5 pt-4 d-flex justify-content-between align-items-center">
            <p class="mb-0 fontStyle9" style="opacity: 0.7;">&copy; {{ "now"|date("Y") }} Your Company. All rights reserved.</p>
            
            {% if section.settings.social_links %}
            <ul class="list-unstyled d-flex gap-3 mb-0">
                {% for item in section.settings.social_links %}
                <li>
                    <a href="{{ item.href }}" target="{{ item.target }}" style="color: {{ text_color }}; font-size: 20px;">
                        {{ item.icon | raw }}
                    </a>
                </li>
                {% endfor %}
            </ul>
            {% endif %}
        </div>
    </div>
</footer>

{% rules %}
{
  "name": "Premium Footer",
  "blocks": [
    {
      "type": "columns",
      "name": "Footer Column",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Column Heading",
          "default": "Resources"
        }
      ],
      "blocks": [
        { "type": "navigation", "name": "Column Menu" },
        { "type": "themes" },
        { "type": "apps" }
      ]
    },
    { "type": "themes" },
    { "type": "apps" }
  ],
  "settings": [
    {
      "type": "color_background",
      "id": "bg_color",
      "label": "Background Color",
      "default": "#111827"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text Color",
      "default": "#f9fafb"
    },
    {
      "type": "range",
      "id": "padding_y",
      "label": "Vertical Padding",
      "min": 20,
      "max": 150,
      "step": 10,
      "unit": "px",
      "default": 60
    },
    {
      "type": "socialicon",
      "id": "social_links",
      "label": "Social Media Links"
    }
  ],
  "presets": [
    {
      "blocks": [
        {
          "type": "columns",
          "settings": { "heading": "Company" },
          "blocks": [{ "type": "navigation" }]
        },
        {
          "type": "columns",
          "settings": { "heading": "Support" },
          "blocks": [{ "type": "navigation" }]
        }
      ]
    }
  ]
}
{% endrules %}