include @/helper/flush.pug
include @/helper/helper.pug

block var
  -title="颜色" // 网页标题
title 颜色

div(class="container page")
    style 
        :public style/views/color.css
    if isLogin 
      form(action="/color" method="post" style="margin: 0 auto; width: 500px;margin-top: 50px")
        h1 提交新颜色
        .field 
            .label 名称
            .control 
              input.input(type="text" name="name" placeholder="请输入名称")
        .field 
            .label 颜色值
            .control 
              input.input(type="text" name="value" placeholder="请输入颜色值")
        .field 
            .label 描述
            .control 
              textarea.textarea(placeholder="请输入描述" name="desctibe")
        +security
        .field.is-grouped
          .control
            button.button.is-link(type="submit") 提交
        //- div
        //-     form(action="POST" method="post")
        //-         div(class=".wrapper_input"): input(type="text" tabindex="1" value="sadsa" name="a")
        //-         div(class=".wrapper_input"): input(type="text" tabindex="3" value="sadsa" name="b")
        //-         button(type="submit" tabindex="2") 提交
    h1 颜色表 #{temp.a}
    div(class="color_list")
      //- -
      //-   var list=[
      //-     {  color:"#00ffff",title: "青色",describe:""},
      //-     {  color:"#222222",title: "辅助色",describe:""},
      //-     {  color:"#8f8f8f",title: "辅助色",describe:""},
      //-     {  color:"#00d1b2",title: "辅助色",describe:""},
      //-     {  color:"#999999",title: "辅助色",describe:""},
      //-     {  color:"#999999",title: "辅助色",describe:""},
      //-     {  color:"#999999",title: "辅助色",describe:""},
      //-     {  color:"#999999",title: "辅助色",describe:""},
      //-     {  color:"#999999",title: "辅助色",describe:""},
      //-     {  color:"#999999",title: "辅助色",describe:""},
      //-     {  color:"#999999",title: "辅助色",describe:""},
      //-     {  color:"#999999",title: "辅助色",describe:""},
      //-     {  color:"#999999",title: "辅助色",describe:""},
      //-     {  color:"#999999",title: "辅助色",describe:""},
      //-     {  color:"#999999",title: "辅助色",describe:""},
      //-     {  color:"#999999",title: "辅助色",describe:""},
      //-     {  color:"#999999",title: "辅助色",describe:""},
      //-     {  color:"#999999",title: "辅助色",describe:""},
      //-     {  color:"#999999",title: "辅助色",describe:""},
      //-     {  color:"#999999",title: "辅助色",describe:""},
      //-   ]
      if list.length === 0
        div 空
      each item in list
        div(class="color_item")
          div(class="color_item_bg" style=`background: ${item.value}`)
            div(class="color_toggle_list")
              div(class="color_toggle_item") hex
              div(class="color_toggle_item") rgba
          div(class="color_item_name") #{item.color}
          div(class="color_item_content")
            div(class="color_item_title") #{item.name}
            div(class="color_item_desc" title=item.desctibe) #{item.desctibe || "暂无描述"}
            if isLogin
              form(action="/color/del" method="post")
                +security
                input(type="text" value=item.id name="id" hidden)
                button(type="submit" style="background: transparent;border:0;color:red;cursor: pointer;float: right;") 删除 
        //- div(class="color_item")
            //- img(src="/public/image/add.png", alt="添加" title="添加" class="color_add")