import Widget from require "lapis.html"

class LoggedIn extends Widget
  content: =>
    task_item = (task) ->
      li ->
        div class: "row", ->
          div class: "column column-100", ->
            if task
              input type: "checkbox", id: "task-#{task.id}", onchange: "check(#{task.id});", checked: task.done
              text " #{task.content}"
            else
              input type: "checkbox"
          div class: "column column-10", ->
            button class: "delete", onclick: "delete_item(this);", "x"

    api_key_item = (key="") ->
      li ->
        div class: "row", ->
          div class: "column column-100", ->
            code key
          div class: "column column-10", ->
            button class: "delete", onclick: "delete_item(this);", "x"

    script src: "/static/index.js"

    script id: "task-template", type: "text/x-custom-template", ->
      task_item!
    script id: "api-key-template", type: "text/x-custom-template", ->
      api_key_item!
    script id: "error-template", type: "text/x-custom-template", ->
      li ->
        div class: "row error", ->
          div class: "column column-100", ->
            span class: "error-text"
          div class: "column column-10", ->
            button class: "delete", onclick: "delete_item(this);", "x"

    ul style: "list-style: none;", ->
      if @tasks
        for task in *@tasks
          task_item task

      li id: "new-task", ->
        form {
          onsubmit: "return new_task();"
        }, ->
          label for: "new-task-input", "New Task"
          input type: "text", id: "new-task-input", placeholder: "content", autocomplete: "off"
          input type: "submit", value: "Add Task"

    button class: "collapsible", "API Keys"
    div class: "content", ->
      ul style: "list-style: none;", ->
        if @keys
          for key in *@keys
            api_key_item key.key

        li id: "new-api-key", ->
          button onclick: "new_api_key()", "New API Key"