%head
   = csrf_meta_tags()
   %script( type="application/javascript" src="jquery-3.7.0.min.js" )
   %script( type="application/javascript" src="sqlite3-worker1-promiser.js" )
   %script( type="application/javascript" )
      window.objectsA      = #{ @objectsA      };
      window.viewsA        = #{ @viewsA        };
      window.init_view_idS = #{ @init_view_idS };
   %script( type="module" src="class_app.js" )

   %link( rel="stylesheet" href="app.css" )

%body.fC.p12
   %div#menu.fR.pL12.mB12
      %div#menu_settings.menu_item.center
         settings
      %div#menu_view.menu_item.center
         edit view
      %a#menu_manual.menu_item.center( href="/manual.pdf" target="_blank" rel="noopener" )
         user manual
      %div.fW1
      %a#menu_logout.menu_item.center( href="/logout" )
         logout

   -#--------------------------------------------------------

   %div#view_pane.fC.p12

   -#--------------------------------------------------------

   %div#view_define_pane.fC.p12
      %div.fR.gap12
         %div#view_save.button.yes
            save
         %div#view_cancel.button.cancel
            cancel
      
      %div#view_type_row.fC.gap8.pT12
         %div.font_blue93
            view type
         %div.fR.gap8
            %select#view_type.pL8.fW1.view_input.field.bg_blue
               %option( value="1d" )
                  1D
               %option( value="2d" )
                  2D


      %div#view_name.fR.gap8.pT18
         %div.fW5em.font_blue93.v_center
            name
         %input.pL8.fW1.view_input.field.bg_blue( type="text" )

      %div.pT12.pB6.font_blue93
         object filter
      %textarea#view_filter_prompt.view_textarea( placeholder="e.g. show tasks from today through next 2 weeks" )
      %div#view_filter_error.font_error

      %div.pT12.pB6.font_blue93
         vertical axis order
      %textarea#view_vertical_prompt.view_textarea( placeholder="e.g. show earliest dates first" )
      %div#view_vertical_error.font_error

      %div#view_horizontal_row.fC.pT12.pB6
         %div.font_blue93
            horizontal axis order
         %textarea#view_horizontal_prompt.view_textarea( placeholder="e.g. sort by title ascending" )
         %div#view_horizontal_error.font_error

      %div.pT12.pB6.font_blue93
         visual
      %div#view_visual.brdr_grey200.fC.gap8.p12
         %div.fR.gap8
            %div.fW5em.v_center
               symbol
            %div.fW1.field.bg_grey
               medium rectangle
         %div.fR.gap8
            %div.fW5em.v_center
               body text
            %div.fW1.field.bg_grey
               title
         %div.fR.gap8
            %div.fW5em.v_center
               color
            %div#view_status.fW1.field.bg_blue
               status
         %div.fR.gap8
            %div.fW5em.v_center
               upper icon
            %div.fW1.field.bg_grey
               none
         %div.fR.gap8
            %div.fW5em.v_center
               lower icon
            %div.fW1.field.bg_grey
               none

   -#--------------------------------------------------------

   %div#settings_pane.fC.p12{ style: "display: none;" }
      %div#settings_error.font_error

      %div.fR.gap12
         %div#settings_save.button.yes
            save
         %div#settings_cancel.button.cancel
            cancel

      %div.pT12.pB6.font_blue93
         appearance
      %div.brdr_grey200.fR.gap12.p12.v_center
         %label.fR.v_center.gap8{ for: "settings_dark_mode" }
            %input#settings_dark_mode( type="checkbox" )
            dark mode


      %div.pT12.pB6.font_blue93
         username
      %div.brdr_grey200.fR.gap12.p12
         %input#settings_username( type="text" readonly="readonly" )

      %div.pT12.pB6.font_blue93
         enter current password
      %div.brdr_grey200.fR.gap12.p12
         %input#settings_current_pw( type="password" )

      %div.pT12.pB6.font_blue93
         enter new password
      %div.brdr_grey200.fR.gap12.p12
         %input#settings_pw( type="password" )

      %div#settings_pw2_row{ style: "display: none;" }
         %div.pT12.pB6.font_blue93
            reenter new password
         %div.brdr_grey200.fR.gap12.p12
            %input#settings_pw2( type="password" )


   -#--------------------------------------------------------

   %dialog#visual_color.gap8.p12
      %div.title
         status
      %div#color_error.font_error

      %div.fR.gap12
         %div#color_save.button.yes
            save
         %div#color_cancel.button.cancel
            cancel

      %div#color_edit.fC.gap8
         %div.fR.gap12
            %div
               value
            %div
               color
         %div#color_add
            +

      %div#color_update.fC.gap8
         %div.fR.gap12
            %div
               deleted value
            %div
               disposition

   -#--------------------------------------------------------

   %dialog#task_create
      %div.title
         create task
      %div.heading
         title
      %input( type="text" )
      %div.heading
         status
      %select
      %div.heading
         contents
      %textarea( rows="10" cols="50" )
      %div.alert
      %div.buttons
         %div.button.yes
            create
         %div.button.cancel
            cancel

   -#--------------------------------------------------------

   %dialog#task_edit
      %div.title
         edit task
      %div.heading
         title
      %input( type="text" )
      %div.heading
         status
      %select
      %div.heading
         contents
      %textarea( rows="10" cols="50" )
      %div.alert
      %div.buttons
         %div.button.yes
            save
         %div.button.delete
            delete
         %div.button.cancel
            cancel

   -#--------------------------------------------------------

   %dialog#status_menu

   -#--------------------------------------------------------

   %dialog#day_clear
      %div.title
         delete all tasks?
      %div.buttons
         %div.button.delete
            delete
         %div.button.cancel
            cancel

   -#--------------------------------------------------------

   %dialog#view_error_popup
      %div.title
         invalid view
      %div.alert
      %div.buttons
         %div.button.yes
            close

   -#--------------------------------------------------------

   %dialog#http_error
      %div.title
      %div.heading
      %div.alert
         please inform the developers by cutting-and-pasting this into the discord user chat
      %div.buttons
         %div.button.yes
            close
