<%
  add_gem_component_stylesheet("layout-header")
  add_gem_component_stylesheet("layout-super-navigation-header")

  logo_link ||= "https://www.gov.uk/"
  logo_link_title ||= t("components.layout_super_navigation_header.logo_link_title")
  logo_text = t("components.layout_super_navigation_header.logo_text")

  hide_logo_text ||= false
  hide_button_left_border ||= false
  blue_background ||= false
  large_navbar ||= false

  navigation_links_columns = t("components.layout_super_navigation_header.navigation_links_columns")
  navigation_menu_heading = t("components.layout_super_navigation_header.navigation_menu_heading")
  navigation_search_heading = t("components.layout_super_navigation_header.navigation_search_heading")
  navigation_search_subheading = t("components.layout_super_navigation_header.navigation_search_subheading")
  popular_links = t("components.layout_super_navigation_header.popular_links")
  popular_links_heading = t("components.layout_super_navigation_header.popular_links_heading")
  search_text = t("components.layout_super_navigation_header.search_text")

  hide_search_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.hide", :label => "search")
  show_search_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.show", :label => "search")
  hide_navigation_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.hide", :label => "navigation")
  show_navigation_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.show", :label => "navigation")

  top_toggle_button_classes = %w(gem-c-layout-super-navigation-header__navigation-top-toggle-button
  )
  top_toggle_button_classes << "gem-c-layout-super-navigation-header__navigation-top-toggle-button--blue-background" if blue_background
  top_toggle_button_classes << "gem-c-layout-super-navigation-header__navigation-top-toggle-button--large-navbar" if large_navbar

  top_toggle_button_inner_classes = %w(gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner)
  top_toggle_button_inner_classes << "gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner--no-left-border" if hide_button_left_border
  top_toggle_button_inner_classes << "gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner--blue-background" if blue_background

  search_toggle_button_classes = %w(gem-c-layout-super-navigation-header__search-toggle-button)
  search_toggle_button_classes << "gem-c-layout-super-navigation-header__search-toggle-button--blue-background" if blue_background
  search_toggle_button_classes << "gem-c-layout-super-navigation-header__search-toggle-button--large-navbar" if large_navbar

  layout_super_navigation_header_classes = %w(gem-c-layout-super-navigation-header)
  layout_super_navigation_header_classes << "gem-c-layout-super-navigation-header--blue-background" if blue_background

  item_link_classes = %w(gem-c-layout-super-navigation-header__navigation-item-link)
  item_link_classes << "gem-c-layout-super-navigation-header__navigation-item-link--blue-background" if blue_background
  item_link_classes << "gem-c-layout-super-navigation-header__navigation-item-link--large-navbar" if large_navbar

  item_link_inner_classes = %w(
    gem-c-layout-super-navigation-header__navigation-item-link-inner
  )
  item_link_inner_classes << "gem-c-layout-super-navigation-header__navigation-item-link-inner--blue-background" if blue_background

  search_item_link_classes = %w(gem-c-layout-super-navigation-header__search-item-link)
  search_item_link_classes << "gem-c-layout-super-navigation-header__search-item-link--blue-background" if blue_background
  search_item_link_classes << "gem-c-layout-super-navigation-header__search-item-link--large-navbar" if large_navbar

  header_logo_classes = %w(gem-c-layout-super-navigation-header__header-logo)
  header_logo_classes << "gem-c-layout-super-navigation-header__header-logo--large-navbar" if large_navbar

  logotype_classes = %w(govuk-header__logotype-crown gem-c-layout-super-navigation-header__logotype-crown)
  logotype_classes << "gem-c-layout-super-navigation-header__logotype-crown--large-navbar" if large_navbar

  header_link_classes = %w(govuk-header__link govuk-header__link--homepage)
  header_link_classes << "gem-c-header__link--large-navbar" if large_navbar

  button_container_classes = %w(gem-c-layout-super-navigation-header__button-container)
  button_container_classes << "gem-c-layout-super-navigation-header__button-container--large-navbar" if large_navbar


%>
<%= content_tag("header",
  {
    role: "banner",
    class: layout_super_navigation_header_classes,
    data: {
      module: "gem-track-click ga4-event-tracker ga4-link-tracker",
      "track-links-only": '',
      "ga4-expandable": '',
    }
}) do %>
  <div class="gem-c-layout-super-navigation-header__container govuk-clearfix">
    <div class="govuk-width-container">
      <%= content_tag(:div, {
        class: header_logo_classes
      }) do %>
        <%= link_to logo_link, {
          class: header_link_classes,
          data: {
            "track-action": "logoLink",
            "track-category": "headerClicked",
            "track-label": logo_link,
            "track-dimension": logo_text,
            "track-dimension-index": "29",
            "ga4-link": {
              "event_name": "navigation",
              "type": "header menu bar",
              "external": "false",
              "text": "GOV.UK",
              "section": "Logo",
              "index": {
                "index_link": 1,
                "index_section": 0,
                "index_section_count": 2,
              },
              "index_total": 1
            }.to_json
          },
          id: "logo",
          aria: {
            label: logo_link_title,
          }
        } do %>
          <span class="govuk-header__logotype">
            <!--[if gt IE 8]><!-->
            <%= content_tag(:svg, {
              aria: {
                hidden: true,
              },
              class: logotype_classes,
              height: "30",
              width: "36",    
              focusable: "false",
              viewBox: "0 0 132 97",
              xmlns: "http://www.w3.org/2000/svg",
            }) do %>
              <path
                d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"
                fill="currentColor"
                fill-rule="evenodd"
              >
              </path>
            <% end %>
            <!--<![endif]-->
            <!--[if IE 8]>
            <img src="<%= asset_path('govuk-logotype-crown.png') %>" alt="" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
            <![endif]-->
            <% unless hide_logo_text %>
              <span class="govuk-header__logotype-text">
                <%= logo_text %>
              </span>
            <% end %>
          </span>
        <% end %>
      <% end %>
    </div>
    <nav
      aria-labelledby="super-navigation-menu-heading"
      class="gem-c-layout-super-navigation-header__content"
      data-module="super-navigation-mega-menu"
    >
      <h2 id="super-navigation-menu-heading" class="govuk-visually-hidden">
        <%= navigation_menu_heading %>
      </h2>

      <%
        link = t("components.layout_super_navigation_header.navigation_link")
        unique_id = SecureRandom.hex(4)
        show_menu_text = show_navigation_menu_text
        hide_menu_text = hide_navigation_menu_text
        tracking_label = link[:label].downcase.gsub(/\s+/, "")
      %>

      <div class="govuk-width-container gem-c-layout-super-navigation-header__button-width-container">
        <%= content_tag(:div, {
          class: button_container_classes
        }) do %>
          <div class="gem-c-layout-super-navigation-header__navigation-item">
            <%= link_to link[:href], {
              class: item_link_classes,
              data: {
                track_action: "#{tracking_label}Link",
                track_category: "headerClicked",
                track_label: link[:href],
                track_dimension: link[:label],
                track_dimension_index: "29",
              }
            } do %>
              <% content_tag(:span, {
                class: item_link_inner_classes
              }) do %>
                <%= link[:label] %>
              <% end %>
            <% end %>

            <%= content_tag(:button, {
              aria: {
                controls: "super-navigation-menu-#{unique_id}",
                expanded: false,
                label: show_menu_text,
              },
              class: top_toggle_button_classes,
              data: {
                text_for_hide: hide_menu_text,
                text_for_show: show_menu_text,
                toggle_desktop_group: "top",
                toggle_mobile_group: "top",
                tracking_key: tracking_label,
                ga4_event: {
                  event_name: "select_content",
                  type: "header menu bar",
                  text: link[:label],
                  index: {
                    index_section: 1,
                    index_section_count: 2,
                  },
                  section: link[:label]
                }
              },
              hidden: true,
              id: "super-navigation-menu-#{unique_id}-toggle",
              type: "button",
            }) do %>
              <%= tag.span link[:label], class: top_toggle_button_inner_classes %>
            <% end %>
          </div>

          <div class="gem-c-layout-super-navigation-header__search-item">
            <%= content_tag(:button, {
              id: "super-search-menu-toggle",
              class: search_toggle_button_classes,
              aria: {
                controls: "super-search-menu",
                expanded: "true",
                label: hide_search_menu_text,
              },
              data: {
                "text-for-hide": hide_search_menu_text,
                "text-for-show": show_search_menu_text,
                "toggle-mobile-group": "top",
                "toggle-desktop-group": "top",
                "tracking-key": "search",
                "ga4-event": "#{{
                  "event_name": "select_content",
                  "type": "header menu bar",
                  "text": "Search",
                  "index": {
                    "index_section": 2,
                    "index_section_count": 2,
                  },
                  "section": "Search"
                  }.to_json
                }"
              },
              hidden: true,
              type: "button",
            }) do %>
              <span class="govuk-visually-hidden">
                <%= search_text %>
              </span>
              <%=
                render "govuk_publishing_components/components/search/search_icon", {
                  classes: %w[gem-c-layout-super-navigation-header__search-toggle-button-link-icon],
                }
              %>
              <span
                aria-hidden="true"
                class="gem-c-layout-super-navigation-header__navigation-top-toggle-close-icon"
                focusable="false"
              >
                &times;
              </span>
            <% end %>

            <%= link_to "/search", {
              class: search_item_link_classes
            } do %>
              <span class="govuk-visually-hidden">
                <%= search_text %>
              </span>
              <%=
                render "govuk_publishing_components/components/search/search_icon", {
                  classes: %w[gem-c-layout-super-navigation-header__search-item-link-icon],
                }
              %>
            <% end %>
          </div>
        <% end %>
      </div>

      <div
        id="super-navigation-menu-<%= unique_id %>" hidden
        class="gem-c-layout-super-navigation-header__navigation-dropdown-menu"
      >
        <div class="govuk-width-container">
          <div class="govuk-grid-row gem-c-layout-super-navigation-header__navigation-items">

            <% navigation_links_columns.each_with_index do | column, column_index | %>
              <%
                case column[:size]
                when 2
                  width_class = "govuk-grid-column-two-thirds-from-desktop"
                when 3
                  width_class = "govuk-grid-column-full-from-desktop"
                else
                  width_class = "govuk-grid-column-one-third-from-desktop"
                end
              %>

              <div class="<%= width_class %> gem-c-layout-super-navigation-header__column--<%= column[:label].downcase.gsub(" ", "-") %>">
                <h3 class="govuk-heading-m gem-c-layout-super-navigation-header__column-header">
                  <%= column[:label] %>
                </h3>
                <ul class="gem-c-layout-super-navigation-header__navigation-second-items gem-c-layout-super-navigation-header__navigation-second-items--<%= column[:label].downcase.gsub(" ", "-") %>">
                  <% index_total = column[:menu_contents].length %>
                  <% column[:menu_contents].each_with_index do | item, index | %>
                      <%
                        has_description = item[:description].present?
                        link_classes = %w[govuk-link gem-c-layout-super-navigation-header__navigation-second-item-link]
                        link_classes << "gem-c-layout-super-navigation-header__navigation-second-item-link--with-description" if has_description
                        tracking_label = column[:label].downcase.gsub(/\s+/, "")
                      %>
                      <li class="gem-c-layout-super-navigation-header__dropdown-list-item">
                        <%= link_to item[:label], item[:href], {
                          class: link_classes,
                          data: {
                            track_action: "#{tracking_label}Link",
                            track_category: "headerClicked",
                            track_label: item[:href],
                            track_dimension: item[:label],
                            track_dimension_index: "29",
                            ga4_link: {
                              "event_name": "navigation",
                              "type": "header menu bar",
                              "index": {
                                "index_section": column_index + 1,
                                "index_link": index + 1,
                                "index_section_count": 4,
                              },
                              "index_total": index_total,
                              "section": column[:label],
                            }
                          }
                        } %>
                        <%= tag.p item[:description], class: "gem-c-layout-super-navigation-header__navigation-second-item-description" if has_description %>
                      </li>
                  <% end %>
                </ul>
              </div>
            <% end %>
          </div>
        </div>
      </div>

      <div id="super-search-menu" hidden class="gem-c-layout-super-navigation-header__navigation-dropdown-menu">
        <div class="govuk-width-container gem-c-layout-super-navigation-header__search-container gem-c-layout-super-navigation-header__search-items">
          <h3 class="govuk-visually-hidden">
            <%= navigation_search_subheading %>
          </h3>
          <div class="govuk-grid-row">
            <div class="govuk-grid-column-full">
              <form
                class="gem-c-layout-super-navigation-header__search-form"
                id="search"
                data-module="ga4-form-tracker"
                data-ga4-form='{ "event_name": "search", "type": "header menu bar", "section": "Search GOV.UK", "action": "search", "url": "/search/all" }'
                data-ga4-form-include-text
                action="/search"
                method="get"
                role="search"
                aria-label="Site-wide"
              >
                <%= render "govuk_publishing_components/components/search", {
                  inline_label: false,
                  label_size: "m",
                  label_text: search_text,
                  size: "large",
                  data_attributes: {
                    track_category: "headerClicked",
                    track_action: "searchSubmitted",
                    track_label: "/search/all",
                    track_dimension: t("components.search_box.label"),
                    track_dimension_index: 29,
                  },
                } %>
              </form>
            </div>
          </div>
          <div class="govuk-grid-row">
            <div class="govuk-grid-column-full">
              <h3 class="govuk-heading-m"><%= popular_links_heading %></h3>
              <ul class="govuk-list">
                <% index_total = popular_links.length %>
                <% popular_links.each_with_index do | popular_link, index | %>
                  <li class="gem-c-layout-super-navigation-header__popular-item">
                    <%= link_to popular_link[:label], popular_link[:href], {
                      class: [
                        "govuk-link",
                        "gem-c-layout-super-navigation-header__popular-link",
                      ],
                      data: {
                        track_action: "popularLink",
                        track_category: "headerClicked",
                        track_label: popular_link[:href],
                        track_dimension: popular_link[:label],
                        track_dimension_index: "29",
                        ga4_link: {
                          "event_name": "navigation",
                          "type": "header menu bar",
                          "index": {
                            "index_section": 4,
                            "index_link": index + 1,
                            "index_section_count": 4,
                          },
                          "index_total": index_total,
                          "section": popular_links_heading,
                        }
                      }
                    } %>
                  </li>
                <% end %>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </nav>
  </div>
<% end %>