 
 
         if @local.add_new_list || @local.edit_list
-          ModalNewList
+          NewList
+            edit_immediately: true
             list: @local.edit_list
-            edit_immediately: true
             done_callback: => 
               @local.add_new_list = @local.edit_list = false 
               save @local


    return SPAN null if !current_user.is_admin

    if (@props.fresh || (@props.edit_immediately && !@initialized)) && !edit_list.editing
      edit_list.editing = true
      save edit_list

    if @props.edit_immediately
      @initialized = true
      if edit_list.editing == false 
        @props.done_callback?()
      edit_list.editing ?= true



    submit = =>


      customizations = subdomain.customizations

      customizations[list_key] ?= {}
      list_config = customizations[list_key]

      fields = ['list_title', 'list_description', 'list_permit_new_items', 'list_category', 'slider_pole_labels', 'list_opinions_title', 'discussion_enabled', 'list_is_archived']

      for f in fields
        val = edit_list[f]

        if val?
          list_config[f] = val

      description = fetch("#{list_key}-description").html
      if description == "<p><br></p>"
        description = ""

      list_config.list_description = description


      if @props.fresh
        new_name = "#{slugify(list_config.list_title or list_config.list_category or 'Proposals')}-#{Math.round(Math.random() * 100)}"
        new_key = "list/#{new_name}"
        customizations[new_key] = customizations[list_key]
        _.defaults customizations[new_key], 
          created_by: current_user.user 
          created_at: Date.now()
        delete customizations[list_key]

        # if tabs are enabled, add it to the current tab
        if get_tabs()
          tab = get_tab() 
          if tab
            tab.lists.push new_key
          else
            console.error "Cannot add the list to the current tab #{current_tab}"
        else 
          customizations.lists ?= get_all_lists()
          if customizations.lists.indexOf('*') == -1 && customizations.lists.indexOf(new_key) == -1
            customizations.lists.push new_key
          console.log 'NEW CUSTOMZIATION', customizations.lists, new_key


      save subdomain, => 
        if subdomain.errors
          console.error "Failed to save list changes", subdomain.errors

        exit_edit()

    cancel_edit = => 
      customizations = subdomain.customizations

      if @props.fresh && list_key of customizations
        delete customizations[list_key] 
        save subdomain
      else 
        exit_edit()

    exit_edit = => 
      edit_list.editing = false 
      for k,v of edit_list
        if k != 'key' && k != 'editing'
          delete edit_list[k]

      save edit_list

    admin_actions = [{action: 'edit', label: translator('edit')}, 
                     {action: 'list_order', label: translator('engage.list-configuration.copy_link', 'reorder lists')},

                EditableDescription
                  list: @props.list
                  fresh: @props.fresh


      if @props.allow_editing
        EditList
          list: @props.list
          fresh: @props.fresh
          combines_these_lists: @props.combines_these_lists

      if !edit_list.editing && @props.proposals_count > 0 && !customization('questionaire', list_key, subdomain) && !is_collapsed && !customization('list_no_filters', list_key, subdomain)
        list_actions
          list: @props.list
          add_new: !@props.combines_these_lists && customization('list_permit_new_items', list_key, subdomain) && !is_collapsed && @props.proposals_count > 4
          can_sort: customization('homepage_show_search_and_sort', null, subdomain) && @props.proposals_count > 1 
          fresh: @props.fresh



window.NewList = ReactiveComponent
  displayName: 'NewList'

  render: -> 
    subdomain = fetch '/subdomain'

    if !@local.edit_key
      @local.edit_key = "list/new-list-#{Math.round(Math.random() * 1000)}"
    
    list = 
      key: @local.edit_key 

    list_key = list.key
    edit_list = fetch "edit-#{list_key}"

    @local.hovering ?= false

    if edit_list.editing || @props.edit_immediately
      ModalNewList 
        fresh: true
        list: list
        done_callback: @props.done_callback

    else 
      BUTTON 
        style: 
          textAlign: 'left'
          marginTop: 35
          display: 'block'
          padding: '18px 24px'
          position: 'relative'
          left: -24
          width: '100%'
          borderRadius: 8
          backgroundColor: if @local.hovering then '#eaeaea' else '#efefef'
          border: '1px solid'
          borderColor: if @local.hovering then '#bbb' else '#ddd'

        onMouseEnter: =>
          @local.hovering = true 
          save @local 
        onMouseLeave: => 
          @local.hovering = false
          save @local 

        onClick: =>
          edit_list.editing = true
          save edit_list

        onKeyDown: (e) => 
          if e.which == 13 || e.which == 32 # ENTER or SPACE
            e.target.click()
            e.preventDefault()              

        H1
          style: 
            fontSize: 28
            fontWeight: 700
            color: if @local.hovering then '#444' else '#666'

          translator 'engage.create_new_list_button', "Create a new list"

        DIV 
          style: 
            fontSize: 14
            marginTop: 4
          'A list defines a category like "Recommendations" or poses an open-ended question like "What are your ideas?"'




styles += """
  [data-widget="ModalNewList"] .LIST-fat-header-field {
    margin-left: 0;
  }

"""
window.ModalNewList = ReactiveComponent
  displayName: 'ModalNewList'
  mixins: [Modal]

  render: -> 
    list = @props.list
    list_key = list.key

    current_user = fetch '/current_user'
    edit_list = fetch "edit-#{list_key}"
    subdomain = fetch '/subdomain'


    return SPAN null if !current_user.is_admin


 

    submit = =>


      customizations = subdomain.customizations

      customizations[list_key] ?= {}
      list_config = customizations[list_key]

      fields = ['list_title', 'list_description', 'list_permit_new_items', 'list_category', 'slider_pole_labels', 'list_opinions_title', 'discussion_enabled', 'list_is_archived']

      for f in fields
        val = edit_list[f]

        if val?
          list_config[f] = val

      description = fetch("#{list_key}-description").html
      if description == "<p><br></p>"
        description = ""

      list_config.list_description = description


      if @props.fresh
        new_name = "#{slugify(list_config.list_title or list_config.list_category or 'Proposals')}-#{Math.round(Math.random() * 100)}"
        new_key = "list/#{new_name}"
        customizations[new_key] = customizations[list_key]
        _.defaults customizations[new_key], 
          created_by: current_user.user 
          created_at: Date.now()
        delete customizations[list_key]

        # if tabs are enabled, add it to the current tab
        if get_tabs()
          tab = get_tab() 
          if tab
            tab.lists.push new_key
          else
            console.error "Cannot add the list to the current tab #{current_tab}"
        else 
          customizations.lists ?= get_all_lists()
          if customizations.lists.indexOf('*') == -1 && customizations.lists.indexOf(new_key) == -1
            customizations.lists.push new_key
          console.log 'NEW CUSTOMZIATION', customizations.lists, new_key


      save subdomain, => 
        if subdomain.errors
          console.error "Failed to save list changes", subdomain.errors

        exit_edit()

    cancel_edit = => 
      customizations = subdomain.customizations

      if @props.fresh && list_key of customizations
        delete customizations[list_key] 
        save subdomain
      else 
        exit_edit()

    exit_edit = => 
      edit_list.editing = false 
      for k,v of edit_list
        if k != 'key' && k != 'editing'
          delete edit_list[k]

      save edit_list

      @props.done_callback?()

    edit_list.discussion_enabled ?= customization('discussion_enabled', list_key)
    edit_list.list_is_archived ?= customization('list_is_archived', list_key)

    title = get_list_title list_key, true, subdomain
    description = edit_list.description or customization('list_description', list_key, subdomain)
    if Array.isArray(description)
      description = description.join('\n')

    description_style = customization 'list_description_style', list_key

    option_block = 
      marginTop: 8

    children = \ 
        DIV 
          style: 
            marginTop: 24

          DIV null, 
            DIV 
              className: 'LIST-field-edit-label'

              TRANSLATE
                id: "engage.list-config-title"
                span: 
                  component: SPAN 
                  args: 
                    style: 
                      fontWeight: 700

                "<span>Title.</span> Usually an open-ended question like \"What are your ideas?\" or a list label like \"Recommended actions for mitigation\"."

            H1 
              className: 'LIST-header'

              AutoGrowTextArea
                id: "title-#{list_key}"
                className: 'LIST-header LIST-fat-header-field'
                ref: 'input'
                focus_on_mount: true
                style: _.defaults {}, customization('list_label_style', list_key, subdomain) or {}, 
                  fontFamily: header_font()
                  width: HOMEPAGE_WIDTH() + -200

                defaultValue: if !@props.fresh then title
                onChange: (e) ->
                  edit_list.list_title = e.target.value 
                  save edit_list


          DIV null, 
            if description?.length > 0 || typeof(description) == 'function' || edit_list.editing


              DIV
                style: _.defaults {}, (description_style or {})
                className: 'LIST-description'

                if typeof description == 'function'
                  description()        
                else 

                  DIV null,

                    DIV 
                      className: 'LIST-field-edit-label'

                      TRANSLATE
                        id: "engage.list-config-description"
                        span: 
                          component: SPAN 
                          args: 
                            style: 
                              fontWeight: 700

                        "<span>Description [optional].</span> Give any additional information or direction here."

                    DIV 
                      id: 'edit_description'
                      style:
                        # marginTop: -12
                        width:  HOMEPAGE_WIDTH() - 200

                      STYLE
                        dangerouslySetInnerHTML: __html: """
                          #edit_description .ql-editor {
                            min-height: 48px;
                            padding: 12px 12px;
                            border: 1px solid #eaeaea;
                            border-radius: 8px;
                            background-color: white;

                          }
                        """

                      WysiwygEditor
                        key: "#{list_key}-description"
                        horizontal: true
                        html: customization('list_description', list_key)
                        # placeholder: if !@props.fresh then translator("engage.list_description", "(optional) Description")
                        toolbar_style: 
                          right: 0
                        container_style: 
                          borderRadius: 8
                        style: 
                          fontSize: if browser.is_mobile then 32





          DIV null, 

