Dropdown Menu component with for-loop in SSR

[jerrygzy]

Hi, I am trying to implement a language selection drop down menu,

proc menuList(lang: seq[(string, string)]): TagRef =
    return buildHtml:
        for i, l in lang: 
            tLi():
                tButton(if i == 0 : class="active"):
                    tSpan(class="badge badge-sm badge-outline !pl-1.5 !pr-1 pt-px font-mono !text-[.6rem] font-bold tracking-widest opacity-50"):
                        {l[0]}
                    tSpan(class="font-[sans-serif]"):
                        {l[1]}


component LanguageMenu:
    `template`:
        nim:
            let lang = @[("EN", "English"), ("RU", "Русский") , ("ZH", "中文")]
        tDiv(title="Change Language", class="dropdown dropdown-end"):
            tLable(tabindex="0", class="btn btn-ghost rounded-btn"):
                tI(class="fa-solid fa-language fa-lg")
            tDiv(class="dropdown-content bg-base-200 text-base-content rounded-box top-px mt-16 w-56 overflow-y-auto shadow"):
                tUl(class="menu menu-sm gap-1", tabindex="0"):
                    {menuList(lang)}

but the code I have does not compile, error message is

/Nim/happyX/htmx_example3/src/templates/index.nim(52, 12) template/generic instantiation of `buildHtml` from here
/.nimble/pkgs2/happyx-3.2.1-f2574bcc354fb828c853aa9697d538b730dd9519/happyx/private/macro_utils.nim(516, 30) Error: index 1 not in 0 .. 0

is this the right way to use for loop? I am confused, since the following code without for-loop works

proc menuList(lang: seq[(string, string)]): TagRef =
    return buildHtml:
        #for i, l in lang:  # without for loop works...
        tLi():
            tButton(class="active"):
                tSpan(class="badge badge-sm badge-outline !pl-1.5 !pr-1 pt-px font-mono !text-[.6rem] font-bold tracking-widest opacity-50"):
                    {lang[0][0]}
                tSpan(class="font-[sans-serif]"):
                    {lang[0][1]}

[Ethosa]

Reason in class attribute:

                tButton(if i == 0 : class="active"):

Right way is:

                tButton(class = if i == 0: "active" else: ""):

Or this way:

        tButton(
            class =
              if i == 0:
                "active"
              else:
                ""
        ):