{% from 'style.html' import love_svg, github_svg %}
<section class="overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap lg:items-center pt-24 pb-12 -mx-4">
      <div class="w-full md:w-3/4 px-4">
        <a class="block mb-8 max-w-max" href="/">
          <img src="/static/images/logos/basicswap-logo.svg" class="h-8 imageshow dark-image">
          <img src="/static/images/logos/basicswap-logo-dark.svg" class="h-8 imageshow light-image">
        </a>
        <div class="mb-12 md:mb-0 flex flex-wrap -mx-3 md:-mx-6">
          <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-500 dark:text-gray-300 font-medium" href="https://academy.particl.io/en/latest/basicswap-dex/basicswap_explained.html" target="_blank">BasicSwap Explained</a></div>
          <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-500 dark:text-gray-300 font-medium" href="https://academy.particl.io/en/latest/basicswap-guides/basicswapguides_installation.html" target="_blank">Tutorials and Guides</a></div>
          <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-500 dark:text-gray-300 font-medium" href="https://academy.particl.io/en/latest/faq/get_support.html" target="_blank">Get Support</a></div>
        </div>
      </div>
      <div class="w-full md:w-1/4 px-4"> </div>
    </div>
  </div>
  <div class="border-b border-gray-100 dark:border-gray-500 dark:bg-body dark:border-b-2"></div>
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center py-12 md:pb-32">
      <div class="w-full md:w-1/2 mb-6 md:mb-0">
        <div class="flex items-center">
          <div class="flex items-center">
            <p class="text-sm text-gray-90 dark:text-white font-medium">© 2024~ (BSX) BasicSwap</p> <span class="w-1 h-1 mx-1.5 bg-gray-500 dark:bg-white rounded-full"></span>
            <p class="text-sm text-coolGray-400  font-medium">BSX: v{{ version }}</p> <span class="w-1 h-1 mx-1.5 bg-gray-500 dark:bg-white rounded-full"></span>
            <p class="text-sm text-coolGray-400  font-medium">GUI: v3.0.0</p> <span class="w-1 h-1 mx-1.5 bg-gray-500 dark:bg-white rounded-full"></span>
            <p class="mr-2 text-sm font-bold dark:text-white text-gray-90 ">Made with </p>
            {{ love_svg | safe }}
        <span class="ml-2 text-sm font-bold dark:text-white text-gray-90 ">by TV and CRZ</span></div>
        </div>
      </div>
      <div class="w-full md:w-1/2">
        <div class="flex flex-wrap md:justify-end -mx-5">
          <div class="px-5">
            <a class="inline-block text-coolGray-300 hover:text-coolGray-400" href="https://github.com/basicswap/basicswap" target="_blank">
            {{ github_svg | safe }}
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<script>
  (function() {
    var toggleImages = function() {
      var html = document.querySelector('html');
      var darkImages = document.querySelectorAll('.dark-image');
      var lightImages = document.querySelectorAll('.light-image');

      if (html && html.classList.contains('dark')) {
        toggleImageDisplay(darkImages, 'block');
        toggleImageDisplay(lightImages, 'none');
      } else {
        toggleImageDisplay(darkImages, 'none');
        toggleImageDisplay(lightImages, 'block');
      }
    }

    var toggleImageDisplay = function(images, display) {
      images.forEach(function(img) {
        img.style.display = display;
      });
    }

    document.addEventListener('DOMContentLoaded', function() {
      var themeToggle = document.getElementById('theme-toggle');

      if (themeToggle) {
        themeToggle.addEventListener('click', function() {
          toggleImages();
        });
      }

      toggleImages();
    });
  })();
</script>
<script>
      var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
      var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');

      if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
          themeToggleLightIcon.classList.remove('hidden');
      } else {
          themeToggleDarkIcon.classList.remove('hidden');
      }

      function setTheme(theme) {
        if (theme === 'light') {
          document.documentElement.classList.remove('dark');
          localStorage.setItem('color-theme', 'light');
        } else {
          document.documentElement.classList.add('dark');
          localStorage.setItem('color-theme', 'dark');
        }
      }

      document.getElementById('theme-toggle').addEventListener('click', () => {
        if (localStorage.getItem('color-theme') === 'dark') {
          setTheme('light');
        } else {
          setTheme('dark');
        }
        themeToggleDarkIcon.classList.toggle('hidden');
        themeToggleLightIcon.classList.toggle('hidden');
        toggleImages();
      });

</script>