<script lang='ts'>
  import { goto } from '$app/navigation';
  import { userRegion, numberOfUnreadNotification, etfTicker, stockTicker, isOpen } from '$lib/store';
  import notifySound from '$lib/audio/options-flow-reader.mp3';
  import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
  import { abbreviateNumber } from '$lib/utils.js';
  import { onMount, onDestroy } from 'svelte';
  import toast from 'svelte-french-toast';

  
  export let data;
  
  let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
  
  
  const usRegion = ['cle1','iad1','pdx1','sfo1'];
  let wsURL;
  
  userRegion?.subscribe(value => {
  if (usRegion?.includes(value)) {
    wsURL = import.meta.env.VITE_USEAST_WS_URL;
  } else {
    wsURL = import.meta.env.VITE_EU_WS_URL;
  }
  });
  
  let optionList = []
  let rawData = [];
  
  let flowSentiment;
  let putCallRatio;
  let displayCallVolume;
  let displayPutVolume;
  let callPercentage;
  let putPercentage;
  let mostFrequentTicker;
  let highestVolumeTicker;
  let highestPremiumTicker;
  let highestOpenInterestTicker;
  
  let audio;
  let muted = true;
  let socket;
  let filterQuery = '';
  let previousCallVolume = 0; //This is needed to play the sound only if it changes.
  let notFound = false;
  let isLoaded = false;
  let mode = $isOpen === true ? true : false;
  let showMore = false;
  
  function toggleMode()
  {
      if ($isOpen) {
        mode = !mode;
      }
      else {
        toast.error(`Market is closed`, {
            style: 'border-radius: 200px; background: #333; color: #fff;'
        });

      }
     
  }
  
  
  
  async function websocketRealtimeData() {
  
  try {
  socket = new WebSocket(wsURL+"/options-flow-reader");
  
  
  socket.addEventListener('message', (event) => {
      const newData = event.data;
      previousCallVolume = displayCallVolume ?? 0;
      if(mode === true) {
      try {
          rawData = [...JSON?.parse(newData)];
          
          if (filterQuery?.length !== 0) {
              const newData = [...rawData?.filter(item => item?.ticker === filterQuery?.toUpperCase())];
              if (newData?.length !== 0) {
              notFound = false;
              rawData = [...newData]
              optionList = rawData?.slice(0,20); //newData?.slice(0,20) //[...newData];
              }
              else {
                  optionList = rawData?.slice(0,20);
                  notFound = true;
                  
              }
          } else {
              notFound = false;
              optionList = rawData?.slice(0,20);
          }
  
          calculateStats(rawData);
          if(previousCallVolume !== displayCallVolume && !muted) {
          audio?.play()
          }
      }
      catch(e) {
          console.log(e)
      }
      }
  
  });
  
  
  socket.addEventListener('close', (event) => {
      console.log('WebSocket connection closed:', event.reason);
      // Handle disconnection, you might want to attempt to reconnect here
    });
  } catch (error) {
    console.error('WebSocket connection error:', error);
    // Handle connection errors here
  }
  }
  
  
  
  onMount(async () => {
  
    audio = new Audio(notifySound)
    rawData = data?.getOptionsFlowFeed;
    optionList = rawData?.slice(0,20);
    calculateStats(rawData);
    isLoaded = true;
  
    if ($isOpen) //&& currentDateTime > startTime && currentDateTime < endTime
    {
      await websocketRealtimeData()
    }
  
    if(data?.user?.tier === 'Pro') {
      window.addEventListener('scroll', handleScroll);
      return () => {
          window.removeEventListener('scroll', handleScroll);
      };
    }
  
  
  })
  
  onDestroy(async() => {
    if (typeof window !== 'undefined') 
    {
      socket?.close()
    }
    if (audio) {
      audio.pause();
      audio = null;
    }
  
  })
  
  async function handleScroll() {
      const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
      const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
      if (isBottom && optionList?.length !== rawData?.length) {
          const nextIndex = optionList?.length;
          const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 25);
          optionList = [...optionList, ...filteredNewResults];
      }
  }
    
    async function assetSelector(symbol, assetType)
      {    
        if(assetType === 'etf')
        {
          etfTicker.update(value => symbol);
          goto(`/etf/${symbol}`)
        }
        else if(assetType === 'stock') {
          stockTicker.update(value => symbol);
          goto(`/stocks/${symbol}`)
        }
        
    }
    
  
  
  function reformatDate(dateString) {
      return dateString.substring(5, 7) + '/' + dateString.substring(8) + '/' + dateString.substring(2, 4);
  }
  
  
  
function calculateStats(optionList) {
    const { callVolumeSum, putVolumeSum, bullishCount, bearishCount } = optionList?.reduce((acc, item) => {
      const volume = parseInt(item?.volume);
  
      if (item?.put_call === "Calls") {
        acc.callVolumeSum += volume;
      } else if (item?.put_call === "Puts") {
        acc.putVolumeSum += volume;
      }

      if (item?.sentiment === "Bullish") {
        acc.bullishCount += 1;
      } else if (item?.sentiment === "Bearish") {
        acc.bearishCount += 1;
      }
  
        return acc;
      }, { callVolumeSum: 0, putVolumeSum: 0, bullishCount: 0, bearishCount: 0 });

      if(bullishCount > bearishCount) {
        flowSentiment = 'Bullish'
      }
      else if (bullishCount < bearishCount) {
        flowSentiment = 'Bearish'
      } else {
        flowSentiment = 'Neutral';
      }


      putCallRatio = (putVolumeSum/callVolumeSum);
  
      callPercentage = Math.floor((callVolumeSum)/(callVolumeSum+putVolumeSum)*100);
      putPercentage = (100-callPercentage);
  
      displayCallVolume = callVolumeSum;
      displayPutVolume = putVolumeSum;

      mostFrequentTicker = findMostFrequentTicker(rawData);
      highestVolumeTicker = findHighestVolume(rawData);
      highestPremiumTicker = findHighestCostBasis(rawData);
      highestOpenInterestTicker = findHighestOpenInterest(rawData);

  }
  
  function findMostFrequentTicker(data) {
    const tickerCountMap = new Map();
    // Iterate through the data and update the count for each ticker
    data?.forEach(item => {
      const ticker = item?.ticker;
      if (tickerCountMap?.has(ticker)) {
        tickerCountMap?.set(ticker, tickerCountMap?.get(ticker) + 1);
      } else {
        tickerCountMap?.set(ticker, 1);
      }
    });
  
    let maxTicker;
    let maxCount = -1;
  
    // Find the ticker with the highest count
    tickerCountMap?.forEach((count, ticker) => {
      if (count > maxCount) {
        maxCount = count;
        maxTicker = ticker;
      }
    });
  
    return { ticker: maxTicker, count: maxCount };
  }
  
  function findHighestVolume(data) {
    let maxVolume = -1;
    let maxVolumeTicker = null;
  
    // Iterate through the data and find the ticker with the highest volume
    data?.forEach(item => {
      const volume = parseInt(item?.volume); // Assuming volume is a string, parse it to an integer
      if (volume > maxVolume) {
        maxVolume = volume;
        maxVolumeTicker = item?.ticker;
      }
    });
  
    return { ticker: maxVolumeTicker, volume: maxVolume };
  }
  
  function findHighestCostBasis(data) {
    let maxCostBasis = -1;
    let maxCostBasisTicker = null;
  
    // Iterate through the data and find the ticker with the highest cost basis
    data?.forEach(item => {
      if (item?.cost_basis > maxCostBasis) {
        maxCostBasis = item?.cost_basis;
        maxCostBasisTicker = item?.ticker;
      }
    });
  
    return { ticker: maxCostBasisTicker, costBasis: maxCostBasis };
  }
  
  function findHighestOpenInterest(data) {
    let maxOpenInterest = -1;
    let maxOpenInterestTicker = null;
  
    // Iterate through the data and find the ticker with the highest open interest
    data?.forEach(item => {
      const openInterest = parseInt(item?.open_interest); // Assuming open interest is a string, parse it to an integer
      if (openInterest > maxOpenInterest) {
        maxOpenInterest = openInterest;
        maxOpenInterestTicker = item?.ticker;
      }
    });
  
    return { ticker: maxOpenInterestTicker, openInterest: maxOpenInterest };
  }
  
  
  function handleInput(event) {
    filterQuery = event.target.value;
    let newData = [];
    setTimeout(() => {
        if (filterQuery?.length !== 0) {
            newData = [...rawData?.filter(item => item?.ticker === filterQuery?.toUpperCase())];
            if (newData?.length !== 0) {
                rawData = newData;
                optionList = rawData?.slice(0, 20);
                notFound = false;
                console.log('test');
            } else {
                notFound = true;
                rawData = data?.getOptionsFlowFeed;
                optionList = rawData?.slice(0, 20);
            }
        } else {
            notFound = false;
            rawData = data?.getOptionsFlowFeed;
            optionList = rawData?.slice(0, 20);
        }
    }, 200);
}

function debounce(fn, delay) {
    let timeoutId;
    return function(...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
            fn.apply(this, args);
        }, delay);
    };
}

const debouncedHandleInput = debounce(handleInput, 200);
  </script>
         
    
  
  
  <svelte:head>
  
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">
  
  <title>
    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Options Flow Feed · stocknear
  </title>
  <meta name="description" content={`Explore unusual options from big institutional traders and hedge funds.`} />
  
  <!-- Other meta tags -->
  <meta property="og:title" content={`Options Flow Feed · stocknear`}/>
  <meta property="og:description" content={`Explore unusual options from big institutional traders and hedge funds.`} />
  <meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
  <meta property="og:type" content="website"/>
  <!-- Add more Open Graph meta tags as needed -->
  
  <!-- Twitter specific meta tags -->
  <meta name="twitter:card" content="summary_large_image"/>
  <meta name="twitter:title" content={`Options Flow Feed · stocknear`}/>
  <meta name="twitter:description" content={`Explore unusual options from big institutional traders and hedge funds.`} />
  <meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
  <!-- Add more Twitter meta tags as needed -->
  
  </svelte:head>
    
  <section class="w-full max-w-5xl overflow-hidden m-auto min-h-screen pt-5 pb-40 bg-[#0F0F0F]">
      
  
  
     <div class="w-full max-w-5xl m-auto sm:bg-[#202020] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
                      <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
                    
                        <!-- Start Column -->
                        <div>
                          <div class="flex flex-row justify-center items-center">
                            <h1 class="text-3xl sm:text-4xl text-white text-center font-bold mb-5">
                              Options Flow
                            </h1>
                          </div>
                
                          <span class="text-white text-md font-medium text-center flex justify-center items-center ">
                              The most recent unusual options activity from large institutional traders and hedge funds.
                          </span>
                
            
                
                        </div>
                        <!-- End Column -->
                    
                        <!-- Start Column -->
                        <div class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0">
                          <svg class="w-40 -my-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                            <defs>
                              <filter id="glow">
                                <feGaussianBlur stdDeviation="5" result="glow"/>
                                <feMerge>
                                  <feMergeNode in="glow"/>
                                  <feMergeNode in="SourceGraphic"/>
                                </feMerge>
                              </filter>
                            </defs>
                            <path fill="#1E40AF" d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z" transform="translate(100 100)" filter="url(#glow)" />
                          </svg>
                          
                          
                          <div class="z-1 absolute top-1 right-10">
                            <img class="w-24 h-fit mr-1" src={cloudFrontUrl+'/assets/options_logo.png'} alt="logo" loading="lazy">
                          </div>
                        </div>
                        <!-- End Column -->
                      </div>
                
                     
            
                    </div>
                    
  
  
      <div class="w-full m-auto mb-10 bg-[#0F0F0F] pl-3 pr-3">
          <div class="flex flex-col sm:flex-row items-center w-full">
            {#if !$isOpen}
              <span class="text-white text-sm italic mt-5 text-center sm:text-start w-full ml-2 mb-5">
                Live flow of {new Date(optionList?.at(0)?.date ?? null)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
              </span>
            {/if}
  
        
  
              <div class="flex flex-row items-center justify-center sm:justify-end mt-6 pb-5 w-full">
  
                <label on:click={() => muted = !muted} class="flex flex-col items-center mr-6 cursor-pointer">
                  {#if !muted}
                  <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#20C997" d="M9 2.5a.5.5 0 0 0-.849-.358l-2.927 2.85H3.5a1.5 1.5 0 0 0-1.5 1.5v2.99a1.5 1.5 0 0 0 1.5 1.5h1.723l2.927 2.875A.5.5 0 0 0 9 13.5zm1.111 2.689a.5.5 0 0 1 .703-.08l.002.001l.002.002l.005.004l.015.013l.046.04c.036.034.085.08.142.142c.113.123.26.302.405.54c.291.48.573 1.193.573 2.148c0 .954-.282 1.668-.573 2.148a3.394 3.394 0 0 1-.405.541a2.495 2.495 0 0 1-.202.196l-.008.007h-.001s-.447.243-.703-.078a.5.5 0 0 1 .075-.7l.002-.002l-.001.001l.002-.001h-.001l.018-.016c.018-.017.048-.045.085-.085a2.4 2.4 0 0 0 .284-.382c.21-.345.428-.882.428-1.63c0-.747-.218-1.283-.428-1.627a2.382 2.382 0 0 0-.368-.465a.5.5 0 0 1-.096-.717m1.702-2.08a.5.5 0 1 0-.623.782l.011.01l.052.045c.047.042.116.107.201.195c.17.177.4.443.63.794c.46.701.92 1.733.92 3.069a5.522 5.522 0 0 1-.92 3.065c-.23.35-.46.614-.63.79a3.922 3.922 0 0 1-.252.24l-.011.01h-.001a.5.5 0 0 0 .623.782l.033-.027l.075-.065c.063-.057.15-.138.253-.245a6.44 6.44 0 0 0 .746-.936a6.522 6.522 0 0 0 1.083-3.614a6.542 6.542 0 0 0-1.083-3.618a6.517 6.517 0 0 0-.745-.938a4.935 4.935 0 0 0-.328-.311l-.023-.019l-.007-.006l-.002-.002zM10.19 5.89l-.002-.001Z"/></svg>
                  <span class="text-[#20C997] text-xs">
                    Sounds on
                  </span>
                  {:else}
                  <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#EE5365" d="M3.28 2.22a.75.75 0 1 0-1.06 1.06L6.438 7.5H4.25A2.25 2.25 0 0 0 2 9.749v4.497a2.25 2.25 0 0 0 2.25 2.25h3.68a.75.75 0 0 1 .498.19l4.491 3.994c.806.716 2.081.144 2.081-.934V16.06l5.72 5.72a.75.75 0 0 0 1.06-1.061zm13.861 11.74l1.138 1.137A6.974 6.974 0 0 0 19 12a6.973 6.973 0 0 0-.84-3.328a.75.75 0 0 0-1.32.714c.42.777.66 1.666.66 2.614c0 .691-.127 1.351-.359 1.96m2.247 2.246l1.093 1.094A9.956 9.956 0 0 0 22 12a9.959 9.959 0 0 0-1.96-5.946a.75.75 0 0 0-1.205.892A8.459 8.459 0 0 1 20.5 12a8.458 8.458 0 0 1-1.112 4.206M9.52 6.338l5.48 5.48V4.25c0-1.079-1.274-1.65-2.08-.934z"/></svg>
                    <span class="text-[#EE5365] text-xs">
                      Sounds off
                  </span>
                    {/if}
                </label>
  
  
              <span class="text-xs sm:text-sm {!mode ? 'text-white' : 'text-gray-400'} mr-3">
                  Paused
              </span>
              
              <label class="inline-flex cursor-pointer relative focus-none">
                <input on:click={toggleMode} type="checkbox" class="toggle toggle-success" checked={mode} value={mode} disabled={!$isOpen ? true : false} />
              </label>

  
            
              <div class="ml-3 flex flex-col items-start">
                  <span class="text-xs sm:text-sm {mode ? 'text-white' : 'text-gray-400'}">
                     Live Flow
                  </span>
              </div>
  
    
  
            
          </div>
              
          </div>
  
          
    

  
          {#if isLoaded }
  
          <div class="w-full mt-5 mb-10 m-auto flex justify-center items-center">
            <div class="w-full grid grid-cols-2 lg:grid-cols-4 gap-y-3 gap-x-3 ">
              <!--Start Flow Sentiment-->  
              <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-2xl h-20">
                  <div class="flex flex-col items-start">
                      <span class="font-medium text-gray-200 text-sm ">Flow Sentiment</span>
                      <span class="text-start text-[1rem] font-medium {flowSentiment === 'Bullish' ? 'text-[#00FC50]' : 'text-[#FC2120]'}">{flowSentiment}</span>
                  </div>
                  
              </div>
              <!--End Flow Sentiment-->
               <!--Start Put/Call-->  
               <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-2xl h-20">
                <div class="flex flex-col items-start">
                    <span class="font-medium text-gray-200 text-sm ">Put/Call</span>
                    <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
                      {putCallRatio?.toFixed(3)}
                    </span>
                </div>
                <!-- Circular Progress -->
                  <div class="relative size-14 ml-auto">
                    <svg class="size-full w-14 h-14" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
                      <!-- Background Circle -->
                      <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#3E3E3E]" stroke-width="3"></circle>
                      <!-- Progress Circle inside a group with rotation -->
                      <g class="origin-center -rotate-90 transform">
                        <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-blue-500" stroke-width="3" stroke-dasharray="100" stroke-dashoffset={100-(putCallRatio*100)?.toFixed(2)}></circle>
                      </g>
                    </svg>
                    <!-- Percentage Text -->
                    <div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
                      <span class="text-center text-white text-sm">{putCallRatio?.toFixed(2)}</span>
                    </div>
                  </div>
                <!-- End Circular Progress -->

            </div>
            <!--End Put/Call-->
             <!--Start Call Flow-->  
             <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-2xl h-20">
              <div class="flex flex-col items-start">
                  <span class="font-medium text-gray-200 text-sm ">Call Flow</span>
                  <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
                    {new Intl.NumberFormat("en", {
                      minimumFractionDigits: 0,
                      maximumFractionDigits: 0
                  }).format(displayCallVolume)}
                  </span>
              </div>
               <!-- Circular Progress -->
               <div class="relative size-14 ml-auto">
                <svg class="size-full w-14 h-14" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
                  <!-- Background Circle -->
                  <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#3E3E3E]" stroke-width="3"></circle>
                  <!-- Progress Circle inside a group with rotation -->
                  <g class="origin-center -rotate-90 transform">
                    <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#00FC50]" stroke-width="3" stroke-dasharray="100" stroke-dashoffset={100-callPercentage?.toFixed(2)}></circle>
                  </g>
                </svg>
                <!-- Percentage Text -->
                <div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
                  <span class="text-center text-white text-sm">{callPercentage}%</span>
                </div>
              </div>
              <!-- End Circular Progress -->
            </div>
            <!--End Call Flow-->
            <!--Start Put Flow-->  
            <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-2xl h-20">
              <div class="flex flex-col items-start">
                  <span class="font-medium text-gray-200 text-sm ">Put Flow</span>
                  <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
                    {new Intl.NumberFormat("en", {
                      minimumFractionDigits: 0,
                      maximumFractionDigits: 0
                  }).format(displayPutVolume)}
                  </span>
              </div>
               <!-- Circular Progress -->
               <div class="relative size-14 ml-auto">
                <svg class="size-full w-14 h-14" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
                  <!-- Background Circle -->
                  <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#3E3E3E]" stroke-width="3"></circle>
                  <!-- Progress Circle inside a group with rotation -->
                  <g class="origin-center -rotate-90 transform">
                    <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#EE5365]" stroke-width="3" stroke-dasharray="100" stroke-dashoffset={100-putPercentage?.toFixed(2)}></circle>
                  </g>
                </svg>
                <!-- Percentage Text -->
                <div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
                  <span class="text-center text-white text-sm">{putPercentage}%</span>
                </div>
              </div>
              <!-- End Circular Progress -->
            </div>
            <!--End Put Flow-->
  
            {#if showMore}
             <!--Start Most Traded-->  
             <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-2xl h-20">
              <div class="flex flex-col items-start">
                  <span class="font-medium text-gray-200 text-sm ">Most Traded Option</span>
                  <span class="text-start text-sm sm:text-[1rem] font-medium text-white mt-0.5">
                    <span class="text-blue-400 ">
                      {mostFrequentTicker?.ticker}
                    </span>
                    {new Intl.NumberFormat("en", {
                      minimumFractionDigits: 0,
                      maximumFractionDigits: 0
                  }).format(mostFrequentTicker?.count)}
                  </span>
              </div>
            </div>
            <!--End Most Traded-->
  
             <!--Start Highest Premium-->  
             <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-2xl h-20">
              <div class="flex flex-col items-start">
                  <span class="font-medium text-gray-200 text-sm ">Highest Premium</span>
                  <span class="text-start text-sm sm:text-[1rem] font-medium text-white mt-0.5">
                    <span class="text-blue-400 ">
                      {highestPremiumTicker?.ticker}
                    </span>
                    ${new Intl.NumberFormat("en", {
                      minimumFractionDigits: 0,
                      maximumFractionDigits: 0
                  }).format(highestPremiumTicker?.costBasis)}
                  </span>
              </div>
            </div>
            <!--End Highest Premium-->
  
            <!--Start Highest Volume-->  
            <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-2xl h-20">
              <div class="flex flex-col items-start">
                  <span class="font-medium text-gray-200 text-sm ">Highest Volume</span>
                  <span class="text-start text-sm sm:text-[1rem] font-medium text-white mt-0.5">
                    <span class="text-blue-400 ">
                      {highestVolumeTicker?.ticker}
                    </span>
                    {new Intl.NumberFormat("en", {
                      minimumFractionDigits: 0,
                      maximumFractionDigits: 0
                  }).format(highestVolumeTicker?.volume)}
                  </span>
              </div>
            </div>
            <!--End Highest Volume-->
  
             <!--Start Highest Open Interest-->  
             <div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-2xl h-20">
              <div class="flex flex-col items-start">
                  <span class="font-medium text-gray-200 text-sm ">Highest Open Interest</span>
                  <span class="text-start text-sm sm:text-[1rem] font-medium text-white mt-0.5">
                    <span class="text-blue-400 ">
                      {highestOpenInterestTicker?.ticker}
                    </span>
                    {new Intl.NumberFormat("en", {
                      minimumFractionDigits: 0,
                      maximumFractionDigits: 0
                  }).format(highestOpenInterestTicker?.openInterest)}
                  </span>
              </div>
            </div>
            <!--End Highest Open Interest-->
  
            {/if}
  
            </div>
          </div>
          
          <!--Start Expand-->
          <label on:click={() => showMore=!showMore} class="cursor-pointer w-full flex justify-center items-center -mt-5 transition duration-150 ease-in-out group">
            <div class="tracking-normal group-hover:translate-y-0.5 transition-transform duration-150 ease-in-out">
              <svg class="w-10 h-10 {showMore ? 'rotate-180' : ''}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 14.373q-.162 0-.298-.053q-.137-.053-.267-.183L7.046 9.748q-.14-.14-.15-.344q-.01-.204.15-.364t.354-.16t.354.16L12 13.287l4.246-4.247q.14-.14.344-.15q.204-.01.364.15t.16.354q0 .194-.16.354l-4.389 4.389q-.13.13-.267.183q-.136.053-.298.053"/></svg>
            </div>
          </label>
          <!--End Expand-->
  
          <!--Start Filter-->
          <div class="w-full pb-3 mt-10 sm:mt-0">
            <div class="relative right-0 bg-[#0F0F0F]">
              <ul class="relative grid grid-cols-2 sm:grid-cols-4 gap-y-3 gap-x-3 flex flex-wrap p-1 list-none rounded-[3px]">
                <li class="pl-3 py-1.5 flex-auto text-center bg-[#2E3238] rounded-[3px]">
          <label class="flex flex-row items-center">
            <input 
            id="modal-search"
              type="search" 
              class="text-white sm:ml-2 text-sm sm:text-[1rem] placeholder-gray-400 border-transparent focus:border-transparent focus:ring-0 flex items-center justify-center w-full px-0 py-1 bg-inherit"
              placeholder="Find by Symbol"
              bind:value={filterQuery}
              on:input={debouncedHandleInput}
              autocomplete="off"
            />
            <svg class="ml-auto h-7 w-7 sm:h-8 sm:w-8 inline-block mr-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="m19.485 20.154l-6.262-6.262q-.75.639-1.725.989t-1.96.35q-2.402 0-4.066-1.663T3.808 9.503T5.47 5.436t4.064-1.667t4.068 1.664T15.268 9.5q0 1.042-.369 2.017t-.97 1.668l6.262 6.261zM9.539 14.23q1.99 0 3.36-1.37t1.37-3.361t-1.37-3.36t-3.36-1.37t-3.361 1.37t-1.37 3.36t1.37 3.36t3.36 1.37"/></svg>
          </label>
          {#if notFound === true}
          <span class="label-text text-error text-[0.65rem] mt-1">
              No Results Found
          </span>
          {/if}
          </li>
          </ul>
        </div>
      </div>
          <!--End Filter-->
  
  
  
          <!-- Page wrapper -->
          <div class="flex justify-center w-full max-w-5xl m-auto h-full overflow-hidden mt-3">
      
        
              <!-- Content area -->
              <div class="mt-4 w-full overflow-x-auto">     
                <table class="table table-pin-cols table-sm table-compact">
                    <thead>
                      <tr class="">
                        <td class="text-slate-200 font-semibold text-sm text-start">Time</td>
                        <th class="bg-[#0F0F0F] font-semibold text-slate-200 text-sm text-start">Symbol</th>
                        <td class="text-slate-200 font-semibold text-sm text-start">Expiry</td>
                        <td class="text-slate-200 font-semibold text-sm text-start">Strike</td>
                        <td class="text-slate-200 font-semibold text-sm text-start">C/P</td>
                        <td class="text-slate-200 font-semibold text-sm text-start">Sent.</td>
                        <td class="text-slate-200 font-semibold text-sm text-start">Spot</td>
                        <td class="text-slate-200 font-semibold text-sm text-start">Price</td>
                        <td class="text-slate-200 font-semibold text-sm text-start">Prem.</td>
                        <td class="text-slate-200 font-semibold text-sm text-start">Type</td>
                        <td class="text-slate-200 font-semibold text-sm text-end">Vol.</td>
                        <td class="text-slate-200 font-semibold text-sm text-end">OI</td>
                      </tr>
                    </thead>
                    <tbody>
                      {#each optionList as item,index}
                      <!-- row -->
                      <tr on:click={() => assetSelector(item?.ticker, item?.assetType)} class="w-full odd:bg-[#202020] cursor-pointer {index+1 === optionList?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
                        
                        <td class="text-white pb-3 text-xs sm:text-sm text-start">
                          {item?.time}
                        </td>
    
                        <th class="{index % 2 ? 'bg-[#0F0F0F]' : 'bg-[#202020]'} text-blue-400 text-start font-normal">
                          {item?.ticker}
                        </th>
  
                        <td class="text-white text-start">
                          {reformatDate(item?.date_expiration)}
                        </td>
  
                      <td class="text-white text-start">
                        {item?.strike_price}
                      </td>
  
                      <td class="{item?.put_call === 'Calls' ? 'text-[#00FC50]' : 'text-[#FC2120]'} text-start">
                        {item?.put_call}
                      </td>

                      <td class="{item?.sentiment === 'Bullish' ? 'text-[#00FC50]' : item?.sentiment === 'Bearish' ? 'text-[#FC2120]' : 'text-[#C6A755]'} text-start">
                        {item?.sentiment}
                      </td>
    
                        <td class="text-sm text-start text-white">
                          {item?.underlying_price}
                        </td>
                      
                      <td class="text-sm text-start text-white">
                        {item?.price}
                      </td>
                      
                      <td class="text-sm text-start font-medium {item?.put_call === 'Puts' ? 'text-[#CB281C]' : 'text-[#0FB307]'} ">
                        {abbreviateNumber(item?.cost_basis)}
                      </td>
  
                      <td class="text-sm text-start {item?.type === 'Sweep' ? 'text-[#C6A755]' : 'text-[#976DB7]'}">
                        {item?.type}
                      </td>
      
        
      
                      <td class="text-white text-end">
                          {new Intl.NumberFormat("en", {
                              minimumFractionDigits: 0,
                              maximumFractionDigits: 0
                          }).format(item?.volume)}
                      </td>
      
                      <td class="text-white text-end">
                        {new Intl.NumberFormat("en", {
                          minimumFractionDigits: 0,
                          maximumFractionDigits: 0
                      }).format(item?.open_interest)}
                      </td>
  
                
        
        
                      </tr>
                      
                  
                      {/each}
                    </tbody>
                  </table>
      
                  <!--<InfiniteLoading on:infinite={infiniteHandler} />-->    
    
          </div>
      
          </div>

          <UpgradeToPro data={data} title="Get the recent Options Flow Data from Hedge Funds and major institutional traders to never miss out"/>

  
          {:else}
          <div class="flex justify-center items-center m-auto w-full max-w-6xl">
              <div class="loader">Loading...</div>
          </div>
  
          {/if}
      </div>        
      
      </section>
      
    
      