<script lang='ts'>
  import { onMount } from 'svelte';
  import { goto } from '$app/navigation';
  import { userRegion, switchWatchList, screenWidth } from '$lib/store';
  import { formatDate, abbreviateNumber } from '$lib/utils';
  import InfoModal from '$lib/components/InfoModal.svelte';
  
  export let watchListId;

  const usRegion = ['cle1','iad1','pdx1','sfo1'];

let apiURL;
let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;


userRegion.subscribe(value => {
  if (usRegion.includes(value)) {
    apiURL = import.meta.env.VITE_USEAST_API_URL;
  } else {
    apiURL = import.meta.env.VITE_EU_API_URL;
  }
});




const sortTickersByName = (tickerList) => {
  return tickerList.sort(function(a, b) {
    if(order === 'highToLow')
    {
      return a?.symbol?.localeCompare(b?.symbol);
    }
    else {
      return b?.symbol?.localeCompare(a?.symbol);
    }
    
  });
};

const sortTickersByPrice = (tickerList) => {
  return tickerList.sort(function(a, b) {
    if(order === 'highToLow')
    {
      return b?.price - a?.price;
    }
    else {
      return a?.price - b?.price;
    }
     
    });
}

const sortTickersByEPS = (tickerList) => {
  return tickerList.sort(function(a, b) {
    if(order === 'highToLow')
    {
      return b?.eps - a?.eps;
    }
    else {
      return a?.eps - b?.eps;
    }
     
    });
};

const sortTickersByPE = (tickerList) => {
  return tickerList.sort(function(a, b) {
    if(order === 'highToLow')
    {
      return b?.pe - a?.pe;
    }
    else {
      return a?.pe - b?.pe;
    }
     
    });
};

const sortTickersByVolume = (tickerList) => {
  return tickerList.sort(function(a, b) {
    if(order === 'highToLow')
    {
      return b?.volume - a?.volume;
    }
    else {
      return a?.volume - b?.volume;
    }
     
    });
};

const sortTickersBySharesOutstanding = (tickerList) => {
  return tickerList.sort(function(a, b) {
    if(order === 'highToLow')
    {
      return b?.sharesOutstanding - a?.sharesOutstanding;
    }
    else {
      return a?.sharesOutstanding - b?.sharesOutstanding;
    }
     
    });
}

const sortTickersByMarketCap = (tickerList) => {
  return tickerList.sort(function(a, b) {
    if(order === 'highToLow')
    {
      return b?.marketCap - a?.marketCap;
    }
    else {
      return a?.marketCap - b?.marketCap;
    }
    });
}

const sortTickersByChange = (tickerList) => {
  return tickerList.sort(function(a, b) {
    if(order === 'highToLow')
    {
      return b?.changesPercentage - a?.changesPercentage;
    }
    else {
      return a?.changesPercentage - b?.changesPercentage;
    }
    });
}

  


  let isLoaded = false;
  
  let watchList: any[] = [];
  let news = [];

async function getWatchlistData()
{
  const postData = {'watchListId': watchListId}
  

  const response = await fetch(apiURL+'/get-watchlist', {
      method: 'POST',
      headers: {
      "Content-Type": "application/json","X-API-KEY": apiKey
      },
      body: JSON.stringify(postData)
  });

const output = await response.json();

try {
  watchList = sortTickersByChange(output[0]);
}
catch(e) {
  watchList = []
}

news = output[1];



}



let roundedMean = 0;
let sum = 0;



onMount( async () => {


  await getWatchlistData()
  isLoaded = true;



  });
  



let order = 'highToLow';

function selectSortingMethod(state:string) {
  
    order = 'highToLow';
    
    if(state === 'Change')
    {
      sortBy = state;
      watchList = sortTickersByChange(watchList);
    }

    else if (state === 'Market Cap')
    {
      sortBy = state;
      watchList = sortTickersByMarketCap(watchList);
    }

    else if (state === 'Price')
    {
      sortBy = state;
      watchList = sortTickersByPrice(watchList);
    }

    else if (state === 'EPS')
    {
      sortBy = state;
      watchList = sortTickersByEPS(watchList);
    }

    else if (state === 'PE Ratio')
    {
      sortBy = state;
      watchList = sortTickersByPE(watchList);
    }

    else if (state === 'Volume')
    {
      sortBy = state;
      watchList = sortTickersByVolume(watchList);
    }

   
    else if (state === 'Name: A-Z')
    {
      sortBy = state;
      watchList = sortTickersByName(watchList);
    }
}



function changeOrder(state:string) {
  if (state === 'highToLow')
  {
    order = 'lowToHigh';
  }
  else {
    order = 'highToLow';
  }
}

let sortBy = 'Change';
let charNumber = 20;

  
$: {
  if ($screenWidth < 640)
  {
    charNumber = 15;
  }
  else {
    charNumber = 20;
  }
}




$: {
  if(order)
  {
    if(sortBy === 'Change')
    {
      watchList = sortTickersByChange(watchList);
    }

    else if (sortBy === 'Market Cap')
    {
      watchList = sortTickersByMarketCap(watchList);
    }

    else if (sortBy === 'Price')
    {
      watchList = sortTickersByPrice(watchList);
    }
    
    else if (sortBy === 'EPS')
    {
      watchList = sortTickersByEPS(watchList);
    }

    else if (sortBy === 'PE Ratio')
    {
      watchList = sortTickersByPE(watchList);
    }

    else if (sortBy === 'Volume')
    {
      watchList = sortTickersByVolume(watchList);
    }


    else if (sortBy === 'Name: A-Z')
    {
      watchList = sortTickersByName(watchList);
    } 
  }
}

$: {
  if($switchWatchList && typeof window !== 'undefined')
  {
    isLoaded = false
    sum = 0;
    roundedMean = 0;
    getWatchlistData()

  
  
    isLoaded = true;
    $switchWatchList = false;
  }
}

$: {
if(watchList && isLoaded)
{
  sum = 0;
  for (let i = 0; i < watchList?.length; i++) {
    const change = parseFloat(watchList[i]?.changesPercentage);
    sum += change;
  }

  //const mean = sum / watchList?.length;
  const mean = sum;
  roundedMean = mean?.toFixed(2);
}
}



</script>
 




<section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-10 mb-40">



    {#if isLoaded}
      <!--Start Tickersinfo Length-->
      {#if watchList.length !== 0}


      <div class="flex flex-row  items-center mb-5">
        <div class="flex flex-row items-center">
          <label for="performanceInfo" class="ml-2 cursor-pointer text-xl font-bold text-gray-300">
            Performance
          </label>
          <InfoModal
            title={"Performance"}
            content={"The performance indicator displays the daily percentage change for all positions on your watchlist."}
            id={"performanceInfo"}
          />
          </div>

        <div class="flex flex-row items-center mr-3 ml-auto">
        {#if roundedMean >= 0}
            <svg class="inline-block w-5 h-5 mt-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
            <span class="text-[#10DB06] text-sm font-medium">+{roundedMean}%</span>
        {:else if roundedMean < 0}
            <svg class="inline-block w-5 h-5 mt-1 rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>    
            <span class="text-[#FF2F1F] text-sm font-medium">{roundedMean}%</span>
        {/if}
        </div>
      </div>




      <div class="flex justify-start items-center ml-3 mb-10">
        <label for="sortByModal" class="cursor-pointer bg-[#09090B] flex flex-row items-center">
          <span class="text-white text-sm sm:text-md mr-2">
            Sort By: 
          </span>
            <div class="flex flex-row items-center">
                <span class="text-sm sm:text-md m-auto font-medium text-white">
                  {sortBy}
                </span>
                <svg class="inline-block w-4 h-4 ml-1 mt-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                    <g transform="rotate(180 512 512)">
                        <path fill="#fff" d="m488.832 344.32l-339.84 356.672a32 32 0 0 0 0 44.16l.384.384a29.44 29.44 0 0 0 42.688 0l320-335.872l319.872 335.872a29.44 29.44 0 0 0 42.688 0l.384-.384a32 32 0 0 0 0-44.16L535.168 344.32a32 32 0 0 0-46.336 0z"/>
                    </g>
                </svg>
            </div>
          </label>

          <label on:click={() => changeOrder(order)} class="ml-auto flex flex-row items-center mr-3 cursor-pointer">
            <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15"><path fill="{order === 'highToLow' ? 'white' : 'gray'}" d="m7.5 1.5l.354-.354L7.5.793l-.354.353l.354.354Zm-.354.354l4 4l.708-.708l-4-4l-.708.708Zm0-.708l-4 4l.708.708l4-4l-.708-.708ZM7 1.5V14h1V1.5H7Z"/></svg>
            <svg class="w-5 h-5 -ml-1.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15"><g transform="rotate(180 7.5 7.5)"><path fill="{order === 'lowToHigh' ? 'white' : 'gray'}" d="m7.5 1.5l.354-.354L7.5.793l-.354.353l.354.354Zm-.354.354l4 4l.708-.708l-4-4l-.708.708Zm0-.708l-4 4l.708.708l4-4l-.708-.708ZM7 1.5V14h1V1.5H7Z"/></g></svg>
          </label>
  
      </div>


      <div class="w-screen sm:w-full rounded-lg">
        <table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto mt-4 ">
          <!-- head -->
          <thead>
            <tr class="">
              <th class="text-white hidden sm:table-cell font-medium text-sm ">Symbol</th>
              <th class="text-white font-medium text-sm ">Company</th>
              <th class="text-white font-medium text-center text-sm  {$screenWidth < 640 && sortBy !== 'EPS' ? 'hidden' : ''}">EPS</th>
              <th class="text-white font-medium text-center text-sm  {$screenWidth < 640 && sortBy !== 'PE Ratio' ? 'hidden' : ''}">PE Ratio</th>
              <th class="text-white font-medium text-center text-sm  {$screenWidth < 640 && sortBy !== 'Volume' ? 'hidden' : ''}">Volume</th>
              <th class="text-white font-medium text-center text-sm  {$screenWidth < 640 && (sortBy !== 'Market Cap' && sortBy !== 'Change' && sortBy !== 'Price' && sortBy !== 'Name: A-Z') ? 'hidden' : ''}">Market Cap</th>
              <th class="text-white font-medium text-end text-sm ">Price</th>
            </tr>
          </thead>
          <tbody class="p-0">
            {#each watchList as item, index}
            <!-- row -->
            <tr on:click={() => goto(`/${item?.type === 'stock' ? 'stocks' : item?.type === 'etf' ? 'etf' : 'crypto'}/${item?.symbol}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] cursor-pointer">
              

              <td class="hidden sm:table-cell text-blue-400 text-sm text-start border-b-[#09090B]">
                {item?.symbol}
              </td>

              <td class="text-white border-b-[#09090B]">
                <span class="hidden sm:block text-white">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
                <div class="sm:hidden flex flex-row">
                  <div class="flex flex-col">
                    <span class="text-blue-400 font-medium">{item?.symbol}</span>
                    <span class="text-white">{item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}</span>
                  </div>
                </div>
              </td>

              <td class="text-white text-sm text-center border-b-[#09090B] {$screenWidth < 640 && sortBy !== 'EPS' ? 'hidden' : ''}">
                {item?.eps !== null ? item?.eps?.toFixed(2) : '-'}
            </td>

            <td class="text-white text-sm text-center border-b-[#09090B] {$screenWidth < 640 && sortBy !== 'PE Ratio' ? 'hidden' : ''}">
                {item?.pe !== null ? item?.pe?.toFixed(2) : '-'}
            </td>

            <td class="text-white text-sm text-center border-b-[#09090B] {$screenWidth < 640 && sortBy !== 'Volume' ? 'hidden' : ''}">
              {new Intl.NumberFormat("en", {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            }).format(item?.volume)}
            </td>

            <td class="text-white text-sm text-center border-b-[#09090B] {$screenWidth < 640 && (sortBy !== 'Market Cap' && sortBy !== 'Change' && sortBy !== 'Price' && sortBy !== 'Name: A-Z') ? 'hidden' : ''}">
                {abbreviateNumber(item?.marketCap,true)}
            </td>


            <td class="border-b-[#09090B]">
              <div class="flex flex-row justify-end items-center">

                <div class="flex flex-col mt-3">
                  <span class="text-white text-md ml-auto">${item.price?.toFixed(2)}</span>
                  <div class="flex flex-row mt-1">
                    {#if item?.changesPercentage >=0}
                      <svg class="w-5 h-5 -mr-0.5 -mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
                      <span class="text-[#10DB06] text-xs font-medium">+{item?.changesPercentage?.toFixed(2)}%</span>
                    {:else}
                      <svg class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>    
                      <span class="text-[#FF2F1F] text-xs font-medium">{item?.changesPercentage?.toFixed(2)}% </span> 
                    {/if}
                  </div>
                </div>

                
            </div>
          </td>

            </tr>
            
         


            {/each}
          </tbody>
        </table>


            
            <div class="w-full m-auto border-b border-slate-800 mt-16 mb-16"></div>

            <h2 class="text-start text-white ml-2 text-xl font-bold text-black mb-3 ">Latest News</h2>
            <div class="relative text-gray-800 m-auto">
              <div class="flex flex-wrap md:flex-row">
                  {#each news as item}
                
                      <a href={item.url} target="_blank" class="cursor-pointer mb-10 w-full">
                        <div class="flex-shrink-0 float-left">
                          <img src={item?.image} class="float-left w-36 sm:w-40 rounded-xl ml-2 mr-4 mb-2" alt="news image" loading="lazy">
                          <div class="absolute w-36 sm:w-40 ml-2 mr-4 mb-2 h-6 bg-[#0C0F17] bg-opacity-80 flex justify-center items-center">
                            <p class="text-white italic text-xs">{(new URL(item?.url)).hostname.replace('www.','')}</p>
                          </div>
                        </div>
                        <div class="flex-grow">
                          <div class="text-sm text-white flex flex-row">
                        
                            <div class="rounded-full w-6 h-6 relative bg-gray-800 mr-1.5 mb-0.5">
                              <img class="rounded-full w-4 h-4 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2" src={`https://financialmodelingprep.com/image-stock/${item.symbol}.png`} loading="lazy"/>
                            </div>
                            {item?.symbol} &centerdot; {formatDate(item?.publishedDate)} ago
                          </div>
                          <h2 class="text-start text-sm sm:text-md font-medium mb-2 flex-shrink text-white">{item.title}</h2>
                          <p class="text-white text-sm sm:text-md p-2">
                            {item?.text?.length > 250 ? item?.text?.slice(0,250) + "..." : item?.text}
                          </p>
                        </div>
                      </a>
                    {/each}
               
              </div>
            </div>

            


      </div>
  
  {:else}
  <div class="flex flex-col justify-center items-center m-auto pt-5">
    <span class="text-white font-bold text-white text-xl sm:text-3xl">
      Empty Watchlist
  </span>

    
    <svg  class="w-36 mt-6 sm:w-56" viewBox="0 0 148 69" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect opacity="0.1" width="148" height="69" rx="14" fill="white"></rect><rect opacity="0.1" x="8" y="8" width="63" height="24" rx="8" fill="white"></rect><rect opacity="0.1" x="77" y="8" width="63" height="24" rx="8" fill="white"></rect><rect opacity="0.1" x="8" y="36.5" width="63" height="24" rx="8" fill="white"></rect><rect opacity="0.1" x="77" y="37" width="63" height="24" rx="8" fill="white"></rect><rect opacity="0.2" x="17" y="15" width="22" height="4" fill="white"></rect><rect opacity="0.5" x="55" y="15" width="7" height="4" rx="2" fill="#E64141"></rect><rect opacity="0.5" x="124" y="15" width="7" height="4" rx="2" fill="#2DC97E"></rect><rect opacity="0.2" x="86" y="15" width="22" height="4" fill="white"></rect><rect opacity="0.2" x="17" y="43" width="22" height="4" fill="white"></rect><rect opacity="0.5" x="55" y="43" width="7" height="4" rx="2" fill="#2DC97E"></rect><rect opacity="0.5" x="124" y="43" width="7" height="4" rx="2" fill="#E64141"></rect><rect opacity="0.2" x="86" y="43" width="22" height="4" fill="white"></rect><rect opacity="0.1" x="17" y="21" width="45" height="4" fill="white"></rect><rect opacity="0.1" x="86" y="21" width="45" height="4" fill="white"></rect><rect opacity="0.1" x="17" y="49.5" width="45" height="4" fill="white"></rect><rect opacity="0.1" x="86" y="50" width="45" height="4" fill="white"></rect><rect x="6" y="6" width="8" height="8" rx="4" fill="#2C85FD"></rect><rect x="6" y="35" width="8" height="8" rx="4" fill="#2C85FD"></rect><rect x="76" y="6" width="8" height="8" rx="4" fill="#2C85FD"></rect><rect x="76" y="35" width="8" height="8" rx="4" fill="#2C85FD"></rect>
    </svg>
    


    <span class="text-white text-sm sm:text-lg pt-5 m-auto p-4 text-center">
      Fill it up with your favorite stocks and get realtime data and the latest news in one place!
    </span>
  </div>
  {/if}
  <!--End Tickersinfo Length-->


  {:else}
  <div class="flex justify-center items-center h-80">
      <div class="relative">
      <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
          <span class="loading loading-spinner loading-md"></span>
      </label>
      </div>
  </div>


  {/if}


</section>







<!--Start Sort By Modal-->
<input type="checkbox" id="sortByModal" class="modal-toggle" />
    
<dialog id="sortByModal" class="modal modal-bottom sm:modal-middle ">


  <label id="sortByModal" for="sortByModal"  class="cursor-pointer modal-backdrop bg-[#09090B] bg-opacity-[0.5]"></label>
  
  
  <div class="modal-box w-full bg-[#09090B] sm:border sm:border-slate-800">



  <label for="sortByModal" class="cursor-pointer absolute right-5 top-2 bg-[#09090B] text-[1.8rem] text-white">
    ✕
  </label>

    <div class="text-white">
      
      <h3 class="font-medium text-lg sm:text-xl mb-10">
        Sort By
      </h3>
        

      <div class="flex flex-col items-center w-full max-w-3xl bg-[#09090B]">


        <label for="sortByModal" on:click={() => selectSortingMethod('Change')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">

            <div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {sortBy === 'Change' ? 'ring-2 ring-[#04E000]' : ''}">
              
              <span class="ml-1 text-white font-medium mr-auto">
                Daily Change in %
              </span>

              <div class="rounded-full w-8 h-8 relative border border-[#737373]">
                {#if sortBy === 'Change'}
                  <svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
                {/if}
              </div>

            </div>
           
        </label>


        <label for="sortByModal" on:click={() => selectSortingMethod('Price')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">

          <div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {sortBy === 'Price' ? 'ring-2 ring-[#04E000]' : ''}">
            
            <span class="ml-1 text-white font-medium mr-auto">
              Price in $
            </span>

            <div class="rounded-full w-8 h-8 relative border border-[#737373]">
              {#if sortBy === 'Price'}
              <svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
              {/if}
            </div>

          </div>
         
        </label>

    


        <label for="sortByModal" on:click={() => selectSortingMethod('Market Cap')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
          <div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {sortBy === 'Market Cap' ? 'ring-2 ring-[#04E000]' : ''}">
            <span class="ml-1 text-white font-medium mr-auto">
              Market Cap
            </span>
            <div class="rounded-full w-8 h-8 relative border border-[#737373]">
              {#if sortBy === 'Market Cap'}
                <svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
              {/if}
            </div>
          </div>
        </label>

        <label for="sortByModal" on:click={() => selectSortingMethod('EPS')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
          <div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {sortBy === 'EPS' ? 'ring-2 ring-[#04E000]' : ''}">
            <span class="ml-1 text-white font-medium mr-auto">
              Earnings per Share
            </span>
            <div class="rounded-full w-8 h-8 relative border border-[#737373]">
              {#if sortBy === 'EPS'}
                <svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
              {/if}
            </div>
          </div>
        </label>

        <label for="sortByModal" on:click={() => selectSortingMethod('PE Ratio')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
          <div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {sortBy === 'PE Ratio' ? 'ring-2 ring-[#04E000]' : ''}">
            <span class="ml-1 text-white font-medium mr-auto">
              PE Ratio
            </span>
            <div class="rounded-full w-8 h-8 relative border border-[#737373]">
              {#if sortBy === 'PE Ratio'}
                <svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
              {/if}
            </div>
          </div>
        </label>

        <label for="sortByModal" on:click={() => selectSortingMethod('Volume')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
          <div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {sortBy === 'Volume' ? 'ring-2 ring-[#04E000]' : ''}">
            <span class="ml-1 text-white font-medium mr-auto">
              Volume
            </span>
            <div class="rounded-full w-8 h-8 relative border border-[#737373]">
              {#if sortBy === 'Volume'}
                <svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
              {/if}
            </div>
          </div>
        </label>

    
        <label for="sortByModal" on:click={() => selectSortingMethod('Name: A-Z')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
          <div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {sortBy === 'Name: A-Z' ? 'ring-2 ring-[#04E000]' : ''}">
            <span class="ml-1 text-white font-medium mr-auto">
              Name: A-Z
            </span>
            <div class="rounded-full w-8 h-8 relative border border-[#737373]">
              {#if sortBy === 'Name: A-Z'}
              <svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
            {/if}
            </div>

          </div>
         
        </label>


      </div>
       
    </div>


        
      </div>
  </dialog>
<!--End Sort By Modal-->