func Pages.Downloads(tytd,ctx)
{
    var type = ctx.QueryParams.TryGetFirst("type");
    var q = ctx.QueryParams.TryGetFirst("q");
    var page = ctx.QueryParams.TryGetFirstInt("page");
    if(TypeOf(page) != "Long") page = 1;
    page--;
    
    if(TypeOf(q) != "String")
    {
        q = "";
    }
    if(TypeOf(type) != "String")
    {
        type = "videos";
    }
    var html ="";

    switch(type) {
        case "videos":
        {
          
            var res = tytd.GetVideos(q,page,20); 
             html = <null>
                <form hx-get="./downloads" hx-target="body" hx-push-url="true" class="s m">
                <div class="row">
                    <div class="max">
                        <div class="field label suffix border round fill">
                            <select name="type">
                                <option value="videos" selected>Videos</option>
                                <option value="playlists">Playlists</option>
                                <option value="channels">Channels</option>
                                <option value="personal">Personal List</option>
                            </select>
                            <label>Type</label>
                            <i>arrow_drop_down</i>
                        </div>
                    </div>
                    <div class="min">
                    <button>Change</button>
                    </div>
                </div>
              </form>
             <nav class="tabbed l">
    <a class="active" hx-get="./downloads?type=videos" hx-target="body" hx-push-url="true">
      <i>movie</i>
      <span>Videos</span>
    </a>
    <a hx-get="./downloads?type=playlists" hx-target="body" hx-push-url="true">
      <i>list</i>
      <span>Playlists</span>
    </a>
    <a hx-get="./downloads?type=channels" hx-target="body" hx-push-url="true">
      <i>person</i>
      <span>Channels</span>
    </a>
    <a hx-get="./downloads?type=personal" hx-target="body" hx-push-url="true">
      <i>edit_note</i>
      <span>Personal Lists</span>
    </a>
     

     
    </nav>
        <form hx-get="./downloads" hx-target="body" hx-push-url="true">
        <div class="field large prefix round fill active">
        <i class="front">search</i>
        <input name="q" value={q}>
        <input name="type" type="hidden" value="videos">
  
        </div>
        </form>
    
        <each(var item : res)>
            <raw(Components.DownloadedVideo(item))>
        </each>
        <footer class="row center-align">
           
                <button hx-get={$"./downloads?q={Net.Http.UrlEncode(q)}&type=videos&page={page}"} hx-target="body" hx-push-url="true" >Prev</button>{page+1}<button hx-get={$"./downloads?q={Net.Http.UrlEncode(q)}&type=videos&page={page+2}"} hx-target="body" hx-push-url="true" >Next</button>
            
        </footer>
        
    </null>;
        }
            break;
        case "playlists":
        {

            var res = tytd.GetPlaylists(q,page,20); 
             html = <null>
             <form hx-get="./downloads" hx-target="body" hx-push-url="true" class="s m">
                <div class="row">
                    <div class="max">
                        <div class="field label suffix border round fill">
                            <select name="type">
                                <option value="videos">Videos</option>
                                <option value="playlists" selected>Playlists</option>
                                <option value="channels">Channels</option>
                                <option value="personal">Personal List</option>
                               
                            </select>
                            <label>Type</label>
                            <i>arrow_drop_down</i>
                        </div>
                    </div>
                    <div class="min">
                    <button>Change</button>
                    </div>
                </div>
              </form>
             <nav class="tabbed l">
    <a hx-get="./downloads?type=videos" hx-target="body" hx-push-url="true">
      <i>movie</i>
      <span>Videos</span>
    </a>
    <a class="active" hx-get="./downloads?type=playlists" hx-target="body" hx-push-url="true">
      <i>list</i>
      <span>Playlists</span>
    </a>
    <a hx-get="./downloads?type=channels" hx-target="body" hx-push-url="true">
      <i>person</i>
      <span>Channels</span>
    </a>
    <a hx-get="./downloads?type=personal" hx-target="body" hx-push-url="true">
      <i>edit_note</i>
      <span>Personal Lists</span>
    </a>
   
    
    </nav>
        <form hx-get="./downloads" hx-target="body" hx-push-url="true">
        <div class="field large prefix round fill active">
        <i class="front">search</i>
        <input name="q" value={q}>
        <input name="type" type="hidden" value="playlists">
  
        </div>
        </form>
    
        <each(var item : res)>
            <raw(Components.DownloadedPlaylist(item))>
        </each>
        <footer class="row center-align">
           
                <button hx-get={$"./downloads?q={Net.Http.UrlEncode(q)}&type=playlists&page={page}"} hx-target="body" hx-push-url="true" >Prev</button>{page+1}<button hx-get={$"./downloads?q={Net.Http.UrlEncode(q)}&type=playlists&page={page+2}"} hx-target="body" hx-push-url="true" >Next</button>
            
        </footer>
        
    </null>;
        }
            break;
        case "channels":
        {

            var res = tytd.GetChannels(q,page,20); 
             html = <null>
             <form hx-get="./downloads" hx-target="body" hx-push-url="true" class="s m">
                <div class="row">
                    <div class="max">
                        <div class="field label suffix border round fill">
                            <select name="type">
                                <option value="videos">Videos</option>
                                <option value="playlists">Playlists</option>
                                <option value="channels" selected>Channels</option>
                                <option value="personal">Personal List</option>
                            </select>
                            <label>Type</label>
                            <i>arrow_drop_down</i>
                        </div>
                    </div>
                    <div class="min">
                    <button>Change</button>
                    </div>
                </div>
              </form>
             <nav class="tabbed l">
    <a hx-get="./downloads?type=videos" hx-target="body" hx-push-url="true">
      <i>movie</i>
      <span>Videos</span>
    </a>
    <a hx-get="./downloads?type=playlists" hx-target="body" hx-push-url="true">
      <i>list</i>
      <span>Playlists</span>
    </a>
    <a class="active" hx-get="./downloads?type=channels" hx-target="body" hx-push-url="true">
      <i>person</i>
      <span>Channels</span>
    </a>
    <a hx-get="./downloads?type=personal" hx-target="body" hx-push-url="true">
      <i>edit_note</i>
      <span>Personal Lists</span>
    </a>
    

    </nav>
        <form hx-get="./downloads" hx-target="body" hx-push-url="true">
        <div class="field large prefix round fill active">
        <i class="front">search</i>
        <input name="q" value={q}>
        <input name="type" type="hidden" value="channels">
  
        </div>
        </form>
    
        <each(var item : res)>
            <raw(Components.DownloadedChannel(item))>
        </each>
        <footer class="row center-align">
           
                <button hx-get={$"./downloads?q={Net.Http.UrlEncode(q)}&type=channels&page={page}"} hx-target="body" hx-push-url="true" >Prev</button>{page+1}<button hx-get={$"./downloads?q={Net.Http.UrlEncode(q)}&type=channels&page={page+2}"} hx-target="body" hx-push-url="true" >Next</button>
            
        </footer>
        
    </null>;
        }
        break;
        case "personal":
        {
            var res = tytd.GetPersonalLists(); 
             html = <null>
             <form hx-get="./downloads" hx-target="body" hx-push-url="true" class="s m">
                <div class="row">
                    <div class="max">
                        <div class="field label suffix border round fill">
                            <select name="type">
                                <option value="videos">Videos</option>
                                <option value="playlists">Playlists</option>
                                <option value="channels">Channels</option>
                                <option value="personal" selected>Personal List</option>
                            </select>
                            <label>Type</label>
                            <i>arrow_drop_down</i>
                        </div>
                    </div>
                    <div class="min">
                    <button>Change</button>
                    </div>
                </div>
              </form>
             <nav class="tabbed l">
    <a hx-get="./downloads?type=videos" hx-target="body" hx-push-url="true">
      <i>movie</i>
      <span>Videos</span>
    </a>
    <a hx-get="./downloads?type=playlists" hx-target="body" hx-push-url="true">
      <i>list</i>
      <span>Playlists</span>
    </a>
    <a hx-get="./downloads?type=channels" hx-target="body" hx-push-url="true">
      <i>person</i>
      <span>Channels</span>
    </a>
    <a class="active" hx-get="./downloads?type=personal" hx-target="body" hx-push-url="true">
      <i>edit_note</i>
      <span>Personal Lists</span>
    </a>
       

    </nav>
        
        
        <each(var item : res)>
            <if(TypeOf(item.firstVideo) == "String")>
            <true>
                <div class="row">
                        <div class="min">
                            <img src={$"./api/v1/video-thumbnail?v={Net.Http.UrlEncode(item.firstVideo)}"} width="144" width="120">
                        </div>
                        <div class="max">
                            <a href={$"./list?name={Net.Http.UrlEncode(item.name)}"}>{item.name}</a>
                        </div>
                    
                </div>
            </true>
            <false>
            <div><a href={$"./list?name={Net.Http.UrlEncode(item.name)}"}>{item.name}</a></div>
            </false>
            </if>
        </each>
       
        
    </null>;
        }
 
        
        break;
    }

   
    

    return Components.Shell($"Downloads {q}",html,1);
}