func Pages.Packages(ctx)
{
    var q = ctx.QueryParams.TryGetFirst("q");
    var account = ctx.QueryParams.TryGetFirst("account");
    var page = ParseLong(ctx.QueryParams.TryGetFirst("page"));
    q = TypeOf(q) != "String" ? "" : q;
    page = TypeOf(page) != "Long" ? 1 : page;
    var cur = (page - 1) % 3;
    var firstPage = (page-1) - cur;


    var path = $"./packages?q={Net.Http.UrlEncode(q)}";

    if(TypeOf(account) == "String")
    {
        path += $"&account={Net.Http.UrlEncode(account)}";
    }
    


    if(TypeOf(q) != "String") q = "";
    var pages = [
            {
                active = true,
                route = "/packages",
                text = "Packages"
            },
            {
                active =  false,
                route = "/upload",
                text = "Upload"
            },
            DB.LoginButton(ctx,false)
        ];
        var html = <article><form action={"./packages"} method={"get"}><div class={"container text-center"}><div class={"row"}><div class={"col"}>
                    
                  </div>
                  <div class={"col-6"}>
                    <div class={"input-group mb-3"}>
                        <input type={"search"} name={"q"} class={"form-control"} placeholder={"Search for packages..."} aria-label={"Search for packages..."} aria-describedby={"button-search"} value={q}>
                        
                        <button class={"btn btn-outline-secondary"} type={"submit"} id={"button-search"}>Search</button>
                        <if(TypeOf(account) == "String")>
                            <true>
                                <input type="hidden" name="account" value={account}>
                            </true>
                        </if>
                    </div> 
                  </div>
                  <div class={"col"}>
                    
                  </div>
                </div>
              </div>
        </form>   
    </article>
    +
    <ul>
        <each(var item : DB.QueryPackages(q,(page-1)*20,20,account))>
            <raw(Components.Package(item.packageName,item.version,item.accountName,new DateTime(item.uploadTime).ToString("%Y/%m/%d"),item.description))>
        </each>
    </ul>
    +
    <nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <if(page == 1)>
            <true>
    <li class="page-item disabled">
      <a class="page-link">Previous</a>
    </li>
    </true>
    <false>
    <li class="page-item">
    <a class="page-link" href={$"{path}&page={page-1}"}>Previous</a>
  </li>
    </false>
    </if>
    <for(var i = 1; i <= 3; i++)>

        <li class={i == cur + 1 ? "page-item active" : "page-item"}><a class="page-link" href={$"{path}&page={i+firstPage}"}>{i+firstPage}</a></li>
    </for>
    <li class="page-item">
      <a class="page-link" href={$"{path}&page={page+1}"}>Next</a>
    </li>
  </ul>
</nav>;
    return Shell("Packages",pages,html);
}