<!DOCTYPE html>
{% from 'style.html' import change_password_svg, notifications_network_offer_svg, notifications_bid_accepted_svg, notifications_unknow_event_svg, notifications_new_bid_on_offer_svg, notifications_close_svg, swap_in_progress_mobile_svg, wallet_svg, page_back_svg, order_book_svg, new_offer_svg, settings_svg, asettings_svg, cog_svg, rpc_svg, debug_svg, explorer_svg, tor_svg, smsg_svg, outputs_svg, automation_svg, shutdown_svg, notifications_svg, debug_nerd_svg, wallet_locked_svg, mobile_menu_svg, wallet_unlocked_svg, tor_purple_svg, sun_svg, moon_svg, swap_in_progress_svg, swap_in_progress_green_svg, available_bids_svg, your_offers_svg, bids_received_svg, bids_sent_svg, header_arrow_down_svg, love_svg %}
<html lang="en">
<head>
  <meta charset="UTF-8">
  {% if refresh %}
  <meta http-equiv="refresh" content="{{ refresh }}">
  {% endif %}
  <script src="/static/js/libs/chart.js"></script>
  <script src="/static/js/libs/chartjs-adapter-date-fns.bundle.min.js"></script>
  <link type="text/css" media="all" href="/static/css/libs/flowbite.min.css" rel="stylesheet" />
  <link type="text/css" media="all" href="/static/css/libs/tailwind.min.css" rel="stylesheet">
  <link type="text/css" media="all" href="/static/css/style.css" rel="stylesheet">
  <script src="/static/js/main.js"></script>
  <script src="/static/js/libs/flowbite.js"></script>

<script>
  const isDarkMode =
    localStorage.getItem('color-theme') === 'dark' ||
    (!localStorage.getItem('color-theme') &&
      window.matchMedia('(prefers-color-scheme: dark)').matches);

  if (!localStorage.getItem('color-theme')) {
    localStorage.setItem('color-theme', 'dark');
  }

  document.documentElement.classList.toggle('dark', isDarkMode);
</script>

  <script>
  window.Components = {
  customSelect(options) {
    return {
      init() {
        this.$refs.listbox.focus()
        this.optionCount = this.$refs.listbox.children.length
        this.$watch('selected', value => {
          if (!this.open) return

          if (this.selected === null) {
            this.activeDescendant = ''
            return
          }

          this.activeDescendant = this.$refs.listbox.children[this.selected - 1].id
        })
      },
      activeDescendant: null,
      optionCount: null,
      open: false,
      selected: null,
      value: 1,
      choose(option) {
        this.value = option
        this.open = false
      },
      onButtonClick() {
        if (this.open) return
        this.selected = this.value
        this.open = true
        this.$nextTick(() => {
          this.$refs.listbox.focus()
          this.$refs.listbox.children[this.selected - 1].scrollIntoView({ block: 'nearest' })
        })
      },
      onOptionSelect() {
        if (this.selected !== null) {
          this.value = this.selected
        }
        this.open = false
        this.$refs.button.focus()
      },
      onEscape() {
        this.open = false
        this.$refs.button.focus()
      },
      onArrowUp() {
        this.selected = this.selected - 1 < 1 ? this.optionCount : this.selected - 1
        this.$refs.listbox.children[this.selected - 1].scrollIntoView({ block: 'nearest' })
      },
      onArrowDown() {
        this.selected = this.selected + 1 > this.optionCount ? 1 : this.selected + 1
        this.$refs.listbox.children[this.selected - 1].scrollIntoView({ block: 'nearest' })
      },
      ...options,
    }
  },
}
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const shutdownButtons = document.querySelectorAll('.shutdown-button');
    const shutdownModal = document.getElementById('shutdownModal');
    const closeModalButton = document.getElementById('closeShutdownModal');
    const confirmShutdownButton = document.getElementById('confirmShutdown');
    const shutdownWarning = document.getElementById('shutdownWarning');

    function updateShutdownButtons() {
        const activeSwaps = parseInt(shutdownButtons[0].getAttribute('data-active-swaps') || '0');

        shutdownButtons.forEach(button => {
            if (activeSwaps > 0) {
                button.classList.add('shutdown-disabled');
                button.setAttribute('data-disabled', 'true');
                button.setAttribute('title', 'Caution: Swaps in progress');
            } else {
                button.classList.remove('shutdown-disabled');
                button.removeAttribute('data-disabled');
                button.removeAttribute('title');
            }
        });
    }

    function showShutdownModal() {
        const activeSwaps = parseInt(shutdownButtons[0].getAttribute('data-active-swaps') || '0');
        if (activeSwaps > 0) {
            shutdownWarning.classList.remove('hidden');
            confirmShutdownButton.textContent = 'Yes, Shut Down Anyway';
        } else {
            shutdownWarning.classList.add('hidden');
            confirmShutdownButton.textContent = 'Yes, Shut Down';
        }
        shutdownModal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    function hideShutdownModal() {
        shutdownModal.classList.add('hidden');
        document.body.style.overflow = '';
    }

    shutdownButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            showShutdownModal();
        });
    });

    closeModalButton.addEventListener('click', hideShutdownModal);

    confirmShutdownButton.addEventListener('click', function() {
        const shutdownToken = document.querySelector('.shutdown-button').getAttribute('href').split('/').pop();
        window.location.href = '/shutdown/' + shutdownToken;
    });

    shutdownModal.addEventListener('click', function(e) {
        if (e.target === this) {
            hideShutdownModal();
        }
    });

    updateShutdownButtons();
});
</script>

  <link rel=icon sizes="32x32" type="image/png" href="/static/images/favicon/favicon-32.png">
  <title>(BSX) BasicSwap - v{{ version }}</title>
</head>
<body class="dark:bg-gray-700">
  <section>
    <nav class="relative bg-gray-700">

      <div class="p-6 container flex flex-wrap items-center justify-between items-center mx-auto">
        <a class="flex-shrink-0 mr-12 text-2xl text-white font-semibold" href="/"> <img class="h-10" src="/static/images/logos/basicswap-logo.svg" alt="" width="auto"></a>
        <ul class="hidden xl:flex">
          <li>
            <a class="flex mr-10 items-center py-3 text-gray-50 hover:text-gray-100 text-sm" href="/wallets">
              {{ wallet_svg | safe }}
               <span>Wallets</span>
             </a>
          </li>

          <li>
            <a class="flex mr-10 items-center py-2.5 text-gray-50 hover:text-gray-100 text-sm" href="/offers">
              {{ order_book_svg | safe }}<span>Show Order Book</span>
              <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_network_offers }}</span>
            </a>
          </li>
          <li>
            <a class="flex rounded-full flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-green-600 hover:border-green-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" href="/newoffer">
              {{ new_offer_svg | safe }}
              <span>Place new Offer</span>
            </a>
          </li>
        </ul>
        <ul class="mr-10 hidden xl:flex lg:justify-end lg:items-center lg:space-x-6 ml-auto">
          <div id="dropdownNavbarLink" data-dropdown-toggle="dropdownNavbar" class="flex justify-between items-center py-2 pr-4 pl-3 w-full text-gray-50 text-sm  md:border-0 md:p-0 md:w-auto text-gray-50 hover:text-gray-100">
            {{ settings_svg | safe }} Settings & Tools
            {{ header_arrow_down_svg| safe }}
          </div>
        </ul>
        <!-- dropdown settings & tools -->
        <div id="dropdownNavbar" class="hidden z-50 w-50 font-normal bg-white shadow divide-y divide-gray-100 dark:bg-gray-500 dark:divide-gray-400 dark:text-white">
          <ul class="py-0 text-sm text-gray-700" aria-labelledby="dropdownLargeButton">
            <li>
              <a href="/settings" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Settings</span>
            {{ cog_svg | safe }} Settings</a>
            </li>
              <li>
              <a href="/changepassword" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Change/Set Password</span>
            {{ change_password_svg | safe }} Change/Set Password</a>
            </li>
            {% if debug_mode == true %}
            <li>
              <a href="/rpc" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">RPC</span>
                {{ rpc_svg | safe }} RPC Console </a>
            </li>
            {% endif %}
            {% if debug_mode == true %}
            <li>
            <a href="/debug" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Debug</span>
            {{ debug_svg | safe }}  Debug</a>
            </li>
            {% endif %}
            {% if debug_mode == true %}
            <li>
              <a href="/explorers" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Explorers</span>
            {{ explorer_svg | safe }}  Explorers </a>
            </li>
            {% endif %}
            {% if use_tor_proxy == true %}
            <li>
              <a href="/tor" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Tor</span>
            {{ tor_svg | safe }} Tor </a>
            </li>
            {% endif %}
            <li>
              <a href="/smsgaddresses" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Settings</span>
            {{ smsg_svg | safe }}  SMSG Addresses</a>
            </li>
            <li>
            <a href="/watched" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Automation Strategies</span>
            {{ outputs_svg | safe }}  Watch Outputs
            <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_watched_outputs }}</span>
            </a>
            </li>
            {% if debug_mode == true %}
            <li>
              <a href="/automation" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Automation Strategies</span>
            {{ automation_svg | safe }} Automation Strategies</a>
            </li>
          {% endif %}
        </ul>
<div class="text-sm text-gray-700">
<a href="/shutdown/{{ shutdown_token }}"
   class="shutdown-button flex items-center block py-4 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
   data-active-swaps="{{ summary.num_swapping }}">
    {{ shutdown_svg | safe }}
    <span class="ml-2">Shutdown</span>
</a>
</div>
</div>

<div id="shutdownModal" tabindex="-1" class="hidden fixed inset-0 z-50 overflow-y-auto overflow-x-hidden">
    <div class="fixed inset-0 bg-black bg-opacity-60 transition-opacity"></div>
    <div class="flex items-center justify-center min-h-screen p-4 relative z-10">
        <div class="bg-white dark:bg-gray-500 rounded-lg shadow-xl max-w-md w-full">
            <div class="p-6 text-center">
                <svg class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
                </svg>
                <h3 class="mb-5 text-lg font-normal text-gray-700 dark:text-gray-300">Are you sure you want to shut down?</h3>
                <p id="shutdownWarning" class="mb-5 text-sm text-red-500 font-bold hidden">Warning: Swaps are in progress. Please wait for swaps to complete before shutting down.</p>
                <p class="mb-5 text-sm text-gray-500 dark:text-gray-300">This action will shut down the application. Are you sure you want to proceed?</p>
                <button id="confirmShutdown" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-0 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2">
                    Yes, Shut Down
                </button>
                <button id="closeShutdownModal" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-0 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>
        <!-- dropdown settings & tools -->

        <!-- notifications -->
        <button id="dropdownNotificationButton" data-dropdown-toggle="dropdownNotification" class="inline-flex items-center text-sm font-medium text-center text-gray-500 focus:outline-none " type="button">
          {{ notifications_svg | safe }}
          <div class="flex relative">
            <!-- Todo -->
            <!-- <div class="inline-flex relative -top-2 right-2 w-3 h-3 bg-green-500 rounded-full border-2 border-gray-800"></div> -->
            <!-- Red <div class="inline-flex relative -top-2 right-3 w-3 h-3 bg-red-500 rounded-full border-2 border-white"></div>  -->
            <!-- Todo -->
          </div>
        </button>

        <!-- Dropdown menu -->
        <div id="dropdownNotification" class="hidden z-50 w-full max-w-sm bg-white shadow rounded divide-y divide-gray-100 drop-shadow dark:bg-gray-500 dark:divide-gray-400 dark:text-white" aria-labelledby="dropdownNotificationButton">
          <div class="block py-2 px-4 font-semibold text-center text-gray-700 bg-gray-50 drop-shadow dark:text-white dark:bg-gray-500">Notifications History</div>
          <div class="divide-y divide-gray-100 dark:divide-gray-400">
            {% for entry in notifications %} {% if entry[1] == 1 %}
            <div class="flex py-3 px-4 hover:bg-gray-100 dark:hover:bg-gray-700">
              <div class="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 bg-blue-500 rounded-lg">
                {{ notifications_network_offer_svg | safe }}
              </div>
              <div class="pl-3 w-full">
                <div class="text-gray-500 text-sm mb-1.5"> <span class="font-semibold text-gray-900 dark:text-white">
                    NEW NETWORK <a class="underline text-blue-500" href="/offer/{{ entry[2].offer_id }}">OFFER</a></span>
                  <br/> <span class="mt-2 inline-flex text-xs font-small monospace text-center dark:text-gray-300">
                  <a href="/offer/{{ entry[2].offer_id }}">{{ entry[2].offer_id|truncate(42, True) }}</a>
                  </span></div>
                <div class="text-xs text-gray-600 bold dark:text-gray-300">{{ entry[0] }}</div>
              </div>
            </div>
            {% elif entry[1] == 2 %}
            <div class="flex py-3 px-4 hover:bg-gray-100 dark:hover:bg-gray-700">
              <div class="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 bg-blue-500 rounded-lg">
                {{ notifications_new_bid_on_offer_svg | safe }}
              </div>
              <div class="pl-3 w-full">
                <div class="text-gray-500 dark:text-white text-sm mb-1.5"> <span class="font-semibold text-gray-900 dark:text-white">
                    <a class="underline text-blue-500" href="/bid/{{ entry[2].bid_id }}">NEW BID</a> ON <a class="underline text-blue-500" href="/offer/{{ entry[2].offer_id }}">OFFER</a></span>
                  <br/> <span class="mt-2 inline-flex text-xs font-small monospace text-center dark:text-gray-300">
                      <a href="/offer/{{ entry[2].offer_id }}">{{ entry[2].offer_id|truncate(42, True) }}</a>
                    </span></div>
                <div class="text-xs text-gray-600 bold dark:text-gray-300">{{ entry[0] }}</div>
              </div>
            </div>
            {% elif entry[1] == 3 %}
            <div class="flex py-3 px-4 hover:bg-gray-100 dark:hover:bg-gray-700">
              <div class="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 bg-violet-500 rounded-lg">
                {{ notifications_bid_accepted_svg | safe }}
              </div>
              <div class="pl-3 w-full">
                <div class="text-gray-500 text-sm mb-1.5 dark:text-white"> <span class="font-semibold text-gray-900 dark:text-white">
                    <a class="underline text-blue-500" href="/bid/{{ entry[2].bid_id }}">BID</a> ACCEPTED</span>
                  <br/> <span class="mt-2 inline-flex text-xs font-small monospace text-center dark:text-gray-300">
                  <a href="/bid/{{ entry[2].bid_id }}">{{ entry[2].bid_id|truncate(42, True) }}</a>
                  </span></div>
                <div class="text-xs text-gray-600 bold dark:text-gray-300">{{ entry[0] }}</div>
              </div>
            </div>
            {% else %}
            <div class="flex py-3 px-4 hover:bg-gray-100 dark:hover:bg-gray-700">
              <div class="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 bg-blue-500 rounded-lg">
                {{ notifications_unknow_event_svg | safe }}
              </div>
              <div class="pl-3 w-full">
                <div class="text-gray-500 text-sm mb-1.5 dark:text-white"> <span class="font-semibold text-gray-900 dark:text-white">
                    UNKNOWN EVENT</span>
                  <br/> <span class="mt-2 inline-flex text-xs font-small monospace text-center dark:text-gray-300">
                  {{ entry[1] }}
                  <div class="text-xs text-gray-600 bold dark:text-gray-300 dark:text-gray-300">{{ entry[0] }}</div>
                </div>
              </div>
               {% endif %}
               {% endfor %}
            </div>
          </div>
<!-- notifications -->

<div class="flex mr-2 items-center text-gray-50 hover:text-gray-100 text-sm ml-5">
  <div class="flex-shrink-0 w-px h-10 bg-gray-400 dark:bg-gray-400 ml-4 mr-5"></div>
              {% if debug_mode == true %}
              <!-- dev mode icons on/off -->
              <ul class="xl:flex">
              <li>
                <div data-tooltip-target="tooltip-DEV" class="ml-5 flex items-center text-gray-50 hover:text-gray-100 text-sm">
                  {{ debug_nerd_svg | safe }}
                 </div>
                <div id="tooltip-DEV" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-blue-500 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
                  <p><b>Debug mode:</b> Active</p>
                  {% if debug_ui_mode == true %}
                  <p><b>Debug UI mode:</b> Active</p>
                  {% endif %}
                </div>
                </li>
                </ul>
                <!-- dev mode icons on/off -->
                {% endif %}

                {% if encrypted == true %}
                <ul class="xl:flex"><li>
                {% if locked == true %}
                <div data-tooltip-target="tooltip-locked-wallets" class="ml-5 flex items-center text-gray-50 hover:text-gray-100 text-sm">
                  {{ wallet_locked_svg | safe }}</div>
                <div id="tooltip-locked-wallets" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-blue-500 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
                  <p><b>Wallets:</b> Locked </p>
                </div>
                {% else %}
                <a href='/lock'>
                <div data-tooltip-target="tooltip-unlocked-wallets" class="ml-5 flex items-center text-gray-50 hover:text-gray-100 text-sm">
                {{ wallet_unlocked_svg | safe }}
                 </div>
                <div id="tooltip-unlocked-wallets" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-blue-500 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
                  <p><b>Wallets:</b> Unlocked </p>
                </div>
                </a>
                {% endif %}
                </li></ul>
                {% endif %}
                {% if use_tor_proxy == true %}
                <!-- tor -->
                <ul class="xl:flex ml-5">
                  <li>
                    <a href="/tor">
                      <div data-tooltip-target="tooltip-tor" class="flex items-center text-gray-50 hover:text-gray-100 text-sm">
                        {{ tor_purple_svg | safe }}
                    </a></div>
                    <div id="tooltip-tor" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-blue-500 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip"><b>Tor mode:</b> Active
                      {% if tor_established == true %}
                      <br><b>Tor:</b> Connected
                      {% endif %}
                    </div>
                  </li>
                </ul>
                <!-- tor -->
              {% endif %}
              <button data-tooltip-target="tooltip-darkmode" id="theme-toggle" type="button" class="text-gray-500 dark:text-gray-400 focus:outline-none rounded-lg text-sm ml-5">
                {{ sun_svg | safe }}
                {{ moon_svg | safe }}
                  <div id="tooltip-darkmode" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-blue-500 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">Dark mode</div>
              </button>
            </div>

              <div class="hidden xl:block"></div>

              <!-- mobile menu -->
              <div class="ml-auto flex xl:hidden">
                <button class="navbar-burger flex items-center rounded focus:outline-none">
                  {{ mobile_menu_svg | safe }}
                </button>
              </div>

            </div>
            <div class="hidden xl:block py-5 px-6 bg-coolGray-100 border-gray-100 dark:border-gray-500 dark:bg-body border-b dark:border-b-2">
              <div class="flex items-center container flex flex-wrap items-center justify-between items-center mx-auto">
                <ul class="flex items-center">

                  <li>
                    <a class="flex mr-5 items-center text-sm text-gray-400 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-100" href="/active">
                      <div id="swapContainer" class="inline-flex center-spin ml-7 mr-2" {% if summary.num_swapping != 0 %}style="animation: spin 2s linear infinite;"{% endif %}>
                        {% if summary.num_swapping != 0 %}
                        {{ swap_in_progress_green_svg | safe }}
                        {% else %}
                        {{ swap_in_progress_svg | safe }}
                        {% endif %}
                      </div>
                      <span>Swaps in Progress</span>
                      <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full num-swap">{{ summary.num_swapping }}</span>
                    </a>
                  </li>

                  <div class="flex-shrink-0 w-px h-10 bg-gray-200 dark:bg-gray-400 mr-10"></div>

                  <li>
                    <a data-tooltip-target="tooltip-your-offers" class="flex mr-5 items-center text-sm text-gray-400 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-100" href="/sentoffers">
                      {{ your_offers_svg | safe }}
                      <span>Your Offers</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_sent_active_offers }}</span></a>

                <div id="tooltip-your-offers" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-blue-500 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
                  <p><b>Total:</b> {{ summary.num_sent_offers }}</p>
                <div class="tooltip-arrow" data-popper-arrow></div>
                </div>

                  </li>
                  <div class="flex-shrink-0 w-px h-10 bg-gray-200 dark:bg-gray-400 mr-10"></div>
                  <li>
                    <a class="flex mr-10 items-center text-sm text-gray-400 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-100" href="/availablebids">{{ available_bids_svg | safe }}
                      <span>Available Bids</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_available_bids }}</span></a>
                  </li>
                  <li>
                    <a data-tooltip-target="tooltip-bids-received" class="flex mr-10 items-center text-sm text-gray-400 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-100" href="/receivedbids">
                      {{ bids_received_svg | safe }}
                      <span>Bids Received</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_recv_active_bids }}</span></a>
                  </li>

                <div id="tooltip-bids-received" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-blue-500 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
                  <p><b>Total:</b>  {{ summary.num_recv_bids }}</p>
                  <div class="tooltip-arrow" data-popper-arrow></div>
                </div>
                  <li>
                    <a data-tooltip-target="tooltip-bids-sent" class="flex mr-10 items-center text-sm text-gray-400 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-100" href="/sentbids">
                      {{ bids_sent_svg| safe }}
                      <span>Bids Sent</span><span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_sent_active_bids }}</span></a>
                <div id="tooltip-bids-sent" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-blue-500 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
                  <p><b>Total:</b>  {{ summary.num_sent_bids }}</p>
                <div class="tooltip-arrow" data-popper-arrow></div>
                </div>

                  </li>
                </ul>
              </div>
            </div>
    </nav>
    <!-- mobile sidebar TODO/WIP  -->
    <div class="hidden navbar-menu fixed top-0 left-0 bottom-0 w-3/4 lg:w-80 sm:max-w-xs z-50">
      <div class="navbar-backdrop fixed inset-0 bg-gray-700 dark:bg-gray-600 opacity-10"></div>
      <nav class="relative flex flex-col pt-6 pb-8 h-full w-full bg-gray-700 dark:bg-gray-600 overflow-y-auto">
        <div class="flex w-full items-center px-6 pb-6 mb-6 lg:border-b border-gray-700">
          <a class="text-xl text-white font-semibold" href="/"> <img class="h-8" src="/static/images/logos/basicswap-logo.svg" alt="" width="auto"></a>
        </div>
        <div class="px-4 pb-6">
          <h3 class="mb-2 text-xs uppercase text-gray-300 font-medium dark:text-gray-300">Wallet</h3>
          <ul class="mb-8 text-sm font-medium">
            <li>
              <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/wallets"> <span class="inline-block mr-3">
                {{ wallet_svg | safe }}
                </span><span>Wallets</span>
                <span class="inline-block ml-auto"></span></a>
            </li>
          </ul>
          <h3 class="mb-2 text-xs uppercase text-gray-300 font-medium dark:text-gray-300">Exchange</h3>
          <ul class="text-sm font-medium">
            <li>
              <a class="flex items-center pl-3 py-3 pr-2 text-gray-50 hover:bg-gray-900 rounded" href="/newoffer"> <span class="inline-block mr-3">
                {{ new_offer_svg | safe }}
                </span><span>Place new Offer</span></a>
            </li>
            <li>
              <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/active"> <span class="inline-block mr-3">
                {{ swap_in_progress_mobile_svg | safe }}
              </span><span>Swaps in Progress</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_swapping }}</span></a>
            </li>
            <li>
              <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/offers"> <span class="inline-block mr-3">
                {{ order_book_svg | safe }}
                </span><span>Show Order Book</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_network_offers }}</span></a>
            </li>
            <li>
              <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="sentoffers"> <span class="inline-block mr-3">
                {{ your_offers_svg | safe }}
              </span><span>Your Offers</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_sent_offers }}</span></a>
            </li>
            <li>
              <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/availablebids"> <span class="inline-block mr-3">
                {{ available_bids_svg | safe }}
                </span><span>Available Bids</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_available_bids }}</span></a>
            </li>
            <li>
              <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/receivedbids"> <span class="inline-block mr-3">
                {{ bids_received_svg | safe }}
                </span><span>Bids Received</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_recv_bids }}</span></a>
            </li>
            <li>
              <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/sentbids"> <span class="inline-block mr-3">
                {{ bids_sent_svg | safe }}
                </span><span>Bids Sent</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_sent_bids }}</span></a>
            </li>
          </ul>
          <h3 class="mb-2 text-xs uppercase text-gray-300 font-medium dark:text-gray-300 mt-5">Settings</h3>
          <ul class="text-sm font-medium">
            <li>
              <a class="flex items-center pl-3 py-3 pr-2 text-gray-50 hover:bg-gray-900 rounded" href="/settings"> <span class="inline-block mr-3">
                  {{ settings_svg | safe }}
                  </span><span>Settings</span></a>
            </li>
           <li>
              <a class="flex items-center pl-3 py-3 pr-2 text-gray-50 hover:bg-gray-900 rounded" href="/changepassword"> <span class="inline-block mr-3">
                  {{ change_password_svg | safe }}
                  </span><span>Change/Set Password</span></a>
            </li>
            {% if debug_mode == true %}
            <li>
              <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/rpc"> <span class="inline-block mr-3">
                {{ rpc_svg | safe }}
                </span><span>RPC Console</span></a>
            </li>
            {% endif %}
            {% if debug_mode == true %}
            <li>
              <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/debug"> <span class="inline-block mr-3">
              {{ debug_svg | safe }}
            </span> <span>Debug</span> </a>
            </li>
            {% endif %}
            {% if debug_mode == true %}
            <li>
              <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/explorers"> <span class="inline-block mr-3">
            {{ explorer_svg | safe }}
                </span><span>Explorers</span></a>
            </li>
            {% endif %}
            <li>
              <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/smsgaddresses"> <span class="inline-block mr-3">
              {{ smsg_svg | safe }}
                </span><span>SMSG Addresses</span></a>
            </li>
            <li>
              <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/watched"> <span class="inline-block mr-3">
                {{ outputs_svg| safe }}
                </span><span>Watched Outputs</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_watched_outputs }}</span></a>
            </li>
            {% if debug_mode == true %}
            <li>
              <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/automation"> <span class="inline-block mr-3">
              {{ automation_svg | safe }}
                </span><span>Automation Strategies</span></a>
            </li>
            {% endif %}
            {% if use_tor_proxy == true %}
            <li>
              <a class="flex items-center pl-3 py-3 pr-2 text-gray-50 hover:bg-gray-900 rounded" href="/tor"> <span class="inline-block mr-3">
              {{ tor_svg | safe }} <!-- change color -->
              </span><span>Tor</span></a>
            </li>
          {% endif %}
        </ul>
          <div class="pt-8 text-sm font-medium">
<a href="/shutdown/{{ shutdown_token }}"
   class="shutdown-button flex items-center block py-4 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
   data-active-swaps="{{ summary.num_swapping }}">
    {{ shutdown_svg | safe }}
    <span class="ml-2">Shutdown</span>
</a>
          </div>
        </div>
      </nav>
    </div>
  <!-- mobile sidebar -->

  </section>
  {% if ws_port %}
  <script>
// Configuration object
const notificationConfig = {
    showNewOffers: false,
    showNewBids: true,
    showBidAccepted: true
};

var ws = new WebSocket("ws://" + window.location.hostname + ":{{ ws_port }}"),
    floating_div = document.createElement('div');
floating_div.classList.add('floatright');
messages = document.createElement('ul');
messages.setAttribute('id', 'ul_updates');

floating_div.appendChild(messages);

ws.onmessage = function(event) {
    let json = JSON.parse(event.data);
    let event_message = 'Unknown event';
    let should_display = false;

    if (json['event'] == 'new_offer' && notificationConfig.showNewOffers) {
        event_message = '<div id="hide"><div id="toast-success" class="flex items-center p-4 mb-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow" role="alert"><div class="inline-flex flex-shrink-0 justify-center items-center w-10 h-10 bg-blue-500 rounded-lg"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round"><circle cx="5" cy="5" r="4"></circle> <circle cx="19" cy="19" r="4"></circle> <polyline data-cap="butt" points="13,5 21,5 21,11 " stroke="#ffffff"></polyline> <polyline data-cap="butt" points="11,19 3,19 3,13 " stroke="#ffffff"></polyline> <polyline points=" 16,2 13,5 16,8 " stroke="#ffffff"></polyline> <polyline points=" 8,16 11,19 8,22 " stroke="#ffffff"></polyline></g></svg></div><div class="uppercase w-40 ml-3 text-sm font-semibold text-gray-900">New network <a class="underline" href=/offer/' + json['offer_id'] + '>offer</a></div><button type="button" onclick="closeAlert(event)" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-0 focus:outline-none focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8" data-dismiss="#toast-success" aria-label="Close"><span class="sr-only">Close</span><svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button></div></div>';
        should_display = true;
    }
    else if (json['event'] == 'new_bid' && notificationConfig.showNewBids) {
        event_message = '<div id="hide"><div id="toast-success" class="flex items-center p-4 mb-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow" role="alert"><div class="inline-flex flex-shrink-0 justify-center items-center w-10 h-10 bg-violet-500 rounded-lg"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round"><rect x="9.843" y="5.379" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -0.7635 13.1569)" width="11.314" height="4.243"></rect> <polyline points="3,23 3,19 15,19 15,23 "></polyline> <line x1="4" y1="15" x2="1" y2="15" stroke="#ffffff"></line> <line x1="5.757" y1="10.757" x2="3.636" y2="8.636" stroke="#ffffff"></line> <line x1="1" y1="23" x2="17" y2="23"></line> <line x1="17" y1="9" x2="23" y2="15"></line></g></svg></div><div class="uppercase w-40 ml-3 text-sm font-normal"><span class="mb-1 text-sm font-semibold text-gray-900"><a class="underline" href=/bid/' + json['bid_id'] + '>New bid</a> on <a class="underline" href=/offer/' + json['offer_id'] + '>offer</a></span></div><button type="button" onclick="closeAlert(event)" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-0 focus:outline-nonefocus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8" data-dismiss="#toast-success" aria-label="Close"><svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button></div></div>';
        should_display = true;
    }
    else if (json['event'] == 'bid_accepted' && notificationConfig.showBidAccepted) {
        event_message = '<div id="hide"><div id="toast-success" class="flex items-center p-4 mb-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow" role="alert"><div class="inline-flex flex-shrink-0 justify-center items-center w-10 h-10 bg-violet-500 rounded-lg"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"><g fill="#ffffff"><path d="M8.5,20a1.5,1.5,0,0,1-1.061-.439L.379,12.5,2.5,10.379l6,6,13-13L23.621,5.5,9.561,19.561A1.5,1.5,0,0,1,8.5,20Z" fill="#ffffff"></path></g></svg></div><div class="uppercase w-40 ml-3 text-sm font-semibold text-gray-900"><a class="underline" href=/bid/' + json['bid_id'] + '>Bid</a> accepted</div><button type="button" onclick="closeAlert(event)" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-0 focus:outline-none focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8" data-dismiss="#toast-success" aria-label="Close"><span class="sr-only">Close</span><svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button></div></div>';
        should_display = true;
    }

    if (should_display) {
        let messages = document.getElementById('ul_updates'),
            message = document.createElement('li');
        message.innerHTML = event_message;
        messages.appendChild(message);
    }
};

document.body.appendChild(floating_div);

function closeAlert(event){
    let element = event.target;
    while(element.nodeName !== "BUTTON"){
        element = element.parentNode;
    }
    element.parentNode.parentNode.removeChild(element.parentNode);
}
  </script>
  {% endif %}
