include karax / prelude
#from sugar import =>
include login
import karax / vstyles
# alternatively: import karax / [kbase, vdom, kdom, vstyles, karax, karaxdsl, jdict, jstrutils, jjson]

#var lines: seq[kstring] = @[]
var menuItem = @["Главная", "Программы", "Оверлеи",
    "Настройки", "Новости", "Сообщества",
    "О проекте"]
var cat = @["Мессенджер", "Музыка", "Видео",
    "Графика", "Браузер", "Офис", "Разработка",
    "Web-Серверы", "Утилиты", "Игры", ]
proc menuAction(menuEntry: kstring): proc() =
  result = proc() =
    echo "clicked ", menuEntry

#[
proc progsList(tree: kstring): =
  result = buldHtml(tdiv):
    ul:
      for c  in  tree.catalog:
        li:
          a:
            text c

          ]#

        #[
        proc viewOverlayas(overlaysData: kstring): =
          #for over in overlaysData:
          echo over
        ]#

        #[
        proc news(newsData): =
          result =buildHtml(tdiv):
            for n in newsData:
              tdiv():
        ul
              ]#

              #[
              proc viewsettings(settings: kstring): =
  for stg in settings:
    echo stg
]#

#[
  proc getdata (): =
    #Полнчение данных из JSON\pkg.json и их парсенг


]#

proc createDom(): VNode =
  result = buildHtml(tdiv):
    #loginDialog()
      tdiv:
        nav(class = "navbar-desktop"):
          for i in menuItem:
            li():
              a(href = "#", onclick = menuAction(i),
                  style = "font-size: 14px".toCss):
                text i
        tdiv():
          h1(align = "center"):
            text "Рекомендации"
          hr(style = style(StyleAttr.background, "#CCC".cstring))
          for c in cat:
            tdiv(style = "color:red; min-width: 30vw; float:left; border: 1px dotted #CDC; border-radius: 10px".toCss):
              h3(align = "center"):
                text c
              tdiv(style = "width: 100%; border: 1px solid #CDC; height:120px".toCss)
setRenderer createDom
