{"content": "\n
\n \n

Template source: cms/content_page.html

\n
\n
\n
\n 
{% extends \"cms/base.html\" %}\n{% load wagtailcore_tags readux_extras %}\n\n<!-- Breadcrumb -->\n{% block breadcrumb %}\n  <ul class=\"breadcrumb uk-margin-small-top\">\n    <li>\n      <a href={% url \"wagtail_serve\" \"\" %}>Home</a>\n    </li>\n    {# For breadcrumbs, display the parent, if it is not a home page #}\n    {% with page.get_parent as p %}\n      {% if not p.page_type_display_name == \"Home page\" %}\n        <li>\n          {# Display siblings of this page #}\n          {% if p.get_children|length %}\n            <a href=\"#\">{{ p.title }}<span class=\"icon-chevron-down\" uk-icon=\"icon: chevron-down; ratio: 0.5\"></span></a>\n            <div class=\"uk-navbar-dropdown uk-padding-remove\" uk-dropdown=\"mode: click; pos: bottom-left;\">\n              <ul class=\"uk-nav uk-navbar-dropdown-nav\">\n                {% for subpage in p.get_children %}\n                  <li>\n                    <a href=\"{{ subpage.url }}\">{{ subpage.title }}</a>\n                  </li>\n                {% endfor %}\n              </ul>\n            </div>\n          {% else %}\n            <a href=\"{{ p.url }}\">{{ p.title }}</a>\n          {% endif %}\n        </li>\n      {% endif %}\n    {% endwith %}\n    <li>{{ page.page_title|default:page.title }}</li>\n  </ul>\n{% endblock breadcrumb %}\n<!-- End -->\n\n{% block content %}\n\n  <div class=\"uk-grid-collapse uk-child-width-expand content-wrapper\" uk-grid>\n    <!-- Left Column: Navigation -->\n    {% if page.body|get_headers|length %}\n        {# NOTE: requires the use of header blocks for entries to appear #}\n        <div class=\"uk-width-1-4@m navigation-wrapper\" >\n            <nav class=\"navigation sidebar-sticky\" uk-sticky=\"offset: 20; media: @m;\">\n                <ul class=\"uk-nav uk-nav-default\">\n                    {% for block in page.body|get_headers %}\n                        <li class=\"indent-{{block.value.size}}\"><a href=\"#{{ block.id }}\" data-section=\"{{ block.id }}\">{{ block|striptags }}</a></li>\n                    {% endfor %}\n                </ul>\n            </nav>\n        </div>\n    {% endif %}\n\n    <!-- Right Column: Content -->\n    <div class=\"uk-width-expand@m content uk-padding-remove-top\">\n      {% for block in page.body %}\n        {% if block.block_type == 'heading_block' %}\n          {% include_block block with block_id=block.id %}\n        {% else %}\n          {% include_block block %}\n        {% endif %}\n      {% endfor %}\n    </div>\n  </div>\n  {% if page.tagline %}<p class=\"lead\">{{ page.tagline }}</p>{% endif %}\n\n{% endblock content %}\n\n{% block extra_javascript %}\n\n  <script>\n      document.addEventListener('DOMContentLoaded', function() {\n          const navLinks = document.querySelectorAll('.navigation a');\n          const sections = document.querySelectorAll('.section');\n\n          // Function to remove the 'active' class from all navigation links\n          function removeActiveClass() {\n              navLinks.forEach(link => link.classList.remove('active'));\n          }\n\n          // Function to add 'active' class to the corresponding navigation link\n          function setActiveLink(sectionId) {\n              removeActiveClass();\n              const activeLink = document.querySelector(`.navigation a[data-section=\"${sectionId}\"]`);\n              if (activeLink) {\n                  activeLink.classList.add('active');\n              }\n          }\n\n          // Smooth scroll to the corresponding section when a navigation link is clicked\n          navLinks.forEach(link => {\n              link.addEventListener('click', function(e) {\n                  e.preventDefault();\n                  const targetId = this.getAttribute('href').substring(1);\n                  const targetSection = document.getElementById(targetId);\n\n                  // Scroll to the target section\n                  targetSection.scrollIntoView({\n                      behavior: 'smooth'\n                  });\n\n                  // Set the active link manually since we're not scrolling naturally\n                  setActiveLink(targetId);\n              });\n          });\n\n          // Add scroll event listener to highlight the current section in view\n          window.addEventListener('scroll', function() {\n              let currentSection = '';\n              sections.forEach(section => {\n                  const sectionTop = section.offsetTop - 50; // Offset for sticky navigation\n                  const sectionHeight = section.clientHeight;\n                  if (window.scrollY >= sectionTop && window.scrollY < sectionTop + sectionHeight) {\n                      currentSection = section.getAttribute('id');\n                  }\n              });\n\n              if (currentSection) {\n                  setActiveLink(currentSection);\n              }\n          });\n\n          // Conditional padding-left for the content area\n          const contentWrapper = document.querySelector('.content-wrapper');\n          const sidebar = contentWrapper.querySelector('.uk-width-1-4\\\\@m');\n          const content = contentWrapper.querySelector('.uk-width-expand\\\\@m');\n\n          // Check if the sidebar exists; if it doesn't, remove the padding-left on content\n          if (!sidebar) {\n              content.style.paddingLeft = '0';\n          }\n      });\n  </script>\n\n{% endblock extra_javascript %}\n
\n\n
\n
\n"}