{% comment %}
  Breadcrumb Navigation Section
  Displays breadcrumb navigation for various page types
{% endcomment %}

{% if section.settings.enable_breadcrumbs_desktop or section.settings.enable_breadcrumbs_mobile %}
  <nav class="breadcrumb-navigation{% unless section.settings.enable_breadcrumbs_desktop %} hide-desktop{% endunless %}{% unless section.settings.enable_breadcrumbs_mobile %} hide-mobile{% endunless %}" aria-label="Breadcrumb">
    <div class="container">
      <ol class="breadcrumb-list">
        <!-- Home Link -->
        <li class="breadcrumb-item">
          <a href="{{ routes.root_url }}" class="breadcrumb-link">
            Home
          </a>
        </li>

        {% case template.name %}
          {% when 'product' %}
            <!-- Collection breadcrumb -->
            {% assign show_collection = false %}
            {% assign breadcrumb_collection = null %}
            
            <!-- Check if collection is passed in URL parameter -->
            {% if collection and collection.id %}
              {% assign show_collection = true %}
              {% assign breadcrumb_collection = collection %}
            {% elsif section.settings.always_show_collection and product.collections.size > 0 %}
              <!-- Fallback to product's first collection if setting is enabled -->
              {% assign show_collection = true %}
              {% assign breadcrumb_collection = product.collections.first %}
            {% endif %}
            
            {% if show_collection and breadcrumb_collection %}
              <li class="breadcrumb-item">
                <span class="breadcrumb-separator">{{ section.settings.separator }}</span>
                <a href="{{ breadcrumb_collection.url }}" class="breadcrumb-link">
                  {{ breadcrumb_collection.title }}
                </a>
              </li>
            {% endif %}
            
            <!-- Product title -->
            <li class="breadcrumb-item active">
              <span class="breadcrumb-separator">{{ section.settings.separator }}</span>
              <span class="breadcrumb-current">{{ product.title }}</span>
            </li>

          {% when 'collection' %}
            <!-- Collection title -->
            <li class="breadcrumb-item active">
              <span class="breadcrumb-separator">{{ section.settings.separator }}</span>
              <span class="breadcrumb-current">{{ collection.title }}</span>
            </li>

          {% when 'blog' %}
            <!-- Blog title -->
            <li class="breadcrumb-item active">
              <span class="breadcrumb-separator">{{ section.settings.separator }}</span>
              <span class="breadcrumb-current">{{ blog.title }}</span>
            </li>

          {% when 'article' %}
            <!-- Blog link -->
            <li class="breadcrumb-item">
              <span class="breadcrumb-separator">{{ section.settings.separator }}</span>
              <a href="{{ blog.url }}" class="breadcrumb-link">
                {{ blog.title }}
              </a>
            </li>
            
            <!-- Article title -->
            <li class="breadcrumb-item active">
              <span class="breadcrumb-separator">{{ section.settings.separator }}</span>
              <span class="breadcrumb-current">{{ article.title }}</span>
            </li>

          {% when 'page' %}
            <!-- Page title -->
            <li class="breadcrumb-item active">
              <span class="breadcrumb-separator">{{ section.settings.separator }}</span>
              <span class="breadcrumb-current">{{ page.title }}</span>
            </li>

          {% when 'search' %}
            <!-- Search results -->
            <li class="breadcrumb-item active">
              <span class="breadcrumb-separator">{{ section.settings.separator }}</span>
              <span class="breadcrumb-current">
                Search Results
                {% if search.terms %}
                  for "{{ search.terms }}"
                {% endif %}
              </span>
            </li>

          {% when '404' %}
            <!-- 404 page -->
            <li class="breadcrumb-item active">
              <span class="breadcrumb-separator">{{ section.settings.separator }}</span>
              <span class="breadcrumb-current">
                Page Not Found
              </span>
            </li>

          {% else %}
            <!-- Fallback for other templates -->
            {% if page_title and page_title != blank %}
              <li class="breadcrumb-item active">
                <span class="breadcrumb-separator">{{ section.settings.separator }}</span>
                <span class="breadcrumb-current">{{ page_title }}</span>
              </li>
            {% endif %}
        {% endcase %}
      </ol>
    </div>
  </nav>

  <style>
    .breadcrumb-navigation {
      background-color: {{ section.settings.bg_color }};
      padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;
      border-bottom: 1px solid {{ section.settings.border_color }};
    }

    .breadcrumb-navigation .container {
      max-width: {{ section.settings.container_width }}px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .breadcrumb-list {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      list-style: none;
      margin: 0;
      padding: 0;
      font-size: {{ section.settings.font_size }}px;
    }

    .breadcrumb-item {
      display: flex;
      align-items: center;
    }

    .breadcrumb-link {
      color: {{ section.settings.link_color }};
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .breadcrumb-link:hover {
      color: {{ section.settings.link_hover_color }};
      text-decoration: {{ section.settings.hover_underline | default: 'underline' }};
    }

    .breadcrumb-current {
      color: {{ section.settings.current_color }};
      font-weight: {{ section.settings.current_weight }};
    }

    .breadcrumb-separator {
      color: {{ section.settings.separator_color }};
      margin: 0 {{ section.settings.separator_spacing }}px;
      font-size: {{ section.settings.separator_size }}px;
    }

    @media screen and (max-width: 768px) {
      .breadcrumb-navigation {
        padding: {{ section.settings.mobile_padding_top }}px 0 {{ section.settings.mobile_padding_bottom }}px;
      }
      
      .breadcrumb-list {
        font-size: {{ section.settings.mobile_font_size }}px;
      }
      
      .breadcrumb-separator {
        margin: 0 {{ section.settings.mobile_separator_spacing }}px;
      }
      
      .breadcrumb-navigation.hide-mobile {
        display: none;
      }
    }

    @media screen and (min-width: 769px) {
      .breadcrumb-navigation.hide-desktop {
        display: none;
      }
    }
  </style>
{% endif %}

{% schema %}
{
  "name": "Breadcrumb navigation",
"disabled_on": {
  "groups": ["footer"],
  "templates": ["*"]
},
  "class": "section",
  "settings": [
    {
      "type": "header",
      "content": "General Settings"
    },
    {
      "type": "header",
      "content": "Visibility Settings"
    },
    {
      "type": "checkbox",
      "id": "enable_breadcrumbs_desktop",
      "label": "Show on desktop",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "enable_breadcrumbs_mobile",
      "label": "Show on mobile",
      "default": false
    },
    {
      "type": "text",
      "id": "separator",
      "label": "Breadcrumb separator",
      "default": "/"
    },
    {
      "type": "checkbox",
      "id": "always_show_collection",
      "label": "Always show collection on product pages",
      "info": "If enabled, will show the product's primary collection even when not coming from a collection page",
      "default": false
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "range",
      "id": "container_width",
      "min": 1000,
      "max": 1400,
      "step": 50,
      "unit": "px",
      "label": "Container width",
      "default": 1200
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 50,
      "step": 2,
      "unit": "px",
      "label": "Top padding",
      "default": 16
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 50,
      "step": 2,
      "unit": "px",
      "label": "Bottom padding",
      "default": 16
    },
    {
      "type": "header",
      "content": "Colors"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Background color",
      "default": "#f9f9f9"
    },
    {
      "type": "color",
      "id": "border_color",
      "label": "Border color",
      "default": "#e0e0e0"
    },
    {
      "type": "color",
      "id": "link_color",
      "label": "Link color",
      "default": "#666666"
    },
    {
      "type": "color",
      "id": "link_hover_color",
      "label": "Link hover color",
      "default": "#333333"
    },
    {
      "type": "color",
      "id": "current_color",
      "label": "Current page color",
      "default": "#333333"
    },
    {
      "type": "color",
      "id": "separator_color",
      "label": "Separator color",
      "default": "#999999"
    },
    {
      "type": "header",
      "content": "Typography"
    },
    {
      "type": "range",
      "id": "font_size",
      "min": 12,
      "max": 18,
      "step": 1,
      "unit": "px",
      "label": "Font size",
      "default": 14
    },
    {
      "type": "select",
      "id": "current_weight",
      "label": "Current page font weight",
      "options": [
        {
          "value": "normal",
          "label": "Normal"
        },
        {
          "value": "600",
          "label": "Semi-bold"
        },
        {
          "value": "bold",
          "label": "Bold"
        }
      ],
      "default": "normal"
    },
    {
      "type": "header",
      "content": "Separator Settings"
    },
    {
      "type": "range",
      "id": "separator_spacing",
      "min": 6,
      "max": 20,
      "step": 2,
      "unit": "px",
      "label": "Separator spacing",
      "default": 8
    },
    {
      "type": "range",
      "id": "separator_size",
      "min": 10,
      "max": 18,
      "step": 1,
      "unit": "px",
      "label": "Separator size",
      "default": 14
    },
    {
      "type": "header",
      "content": "Mobile Settings"
    },
    {
      "type": "range",
      "id": "mobile_padding_top",
      "min": 0,
      "max": 30,
      "step": 2,
      "unit": "px",
      "label": "Mobile top padding",
      "default": 10
    },
    {
      "type": "range",
      "id": "mobile_padding_bottom",
      "min": 0,
      "max": 30,
      "step": 2,
      "unit": "px",
      "label": "Mobile bottom padding",
      "default": 10
    },
    {
      "type": "range",
      "id": "mobile_font_size",
      "min": 10,
      "max": 16,
      "step": 1,
      "unit": "px",
      "label": "Mobile font size",
      "default": 12
    },
    {
      "type": "range",
      "id": "mobile_separator_spacing",
      "min": 4,
      "max": 16,
      "step": 2,
      "unit": "px",
      "label": "Mobile separator spacing",
      "default": 6
    }
  ],
  "presets": [
    {
      "name": "Breadcrumb navigation"
    }
  ]
}
{% endschema %}