basicswap_miserver/basicswap/templates/header.html

{% from 'style.html' import 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, available_bids_svg, your_offers_svg, bids_received_svg, bids_sent_svg, header_arrow_down_svg %}
<!DOCTYPE html>
<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>
  <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', isDarkMode ? 'dark' : 'light');
  }

  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>
  <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>
            {% 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-10 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="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Shutdown</span>
            {{ shutdown_svg | safe }}  Shutdown </a>
          </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-debug" class="ml-5 flex items-center text-gray-50 hover:text-gray-100 text-sm">
                  {{ debug_nerd_svg | safe }}
                  <span data-tooltip-target="tooltip-DEV" ></span> </div>
                <div id="tooltip-debug" 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 }}
                  <span data-tooltip-target="tooltip-locked-wallets" ></span> </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 }}
                  <span data-tooltip-target="tooltip-unlocked-wallets" ></span> </div>
                <div class="tooltip-arrow" data-popper-arrow></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> <span data-tooltip-target="tooltip-tor"></span></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 }}
               <span data-tooltip-target="tooltip-darkmode"></span>
                  <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 %}>
                        {{ swap_in_progress_svg | safe }}
                      </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>
            {% 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 class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/shutdown/{{ shutdown_token }}"> <span class="inline-block mr-3">
              {{ shutdown_svg | safe }}
              </span><span>Shutdown</span></a>
          </div>
        </div>
      </nav>
    </div>
  <!-- mobile sidebar -->

  </section>
  {% if ws_url %}
  <script>
    var ws = new WebSocket("{{ ws_url }}"),
    floating_div = document.createElement('div');
    floating_div.classList.add('floatright');
    messages = document.createElement('ul');
    messages.setAttribute('id', 'ul_updates');
    ws.onmessage = function(event) {
      let json = JSON.parse(event.data);
      let event_message = 'Unknown event';
      if (json['event'] == 'new_offer') {
        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>';
      }
      else
      if (json['event'] == 'new_bid') {
        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>';
      }
      else
      if (json['event'] == 'bid_accepted') {
        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>';
      }
      let messages = document.getElementById('ul_updates'),
        message = document.createElement('li');
      message.innerHTML = event_message;
      messages.appendChild(message);
    };
    floating_div.appendChild(messages);
    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 %}