     false
   render: ->
     React.createElement @props.plugin.settingsClass
+
+InstalledPlugin = React.createClass
+  render: ->
+    plugin = @props.plugin
+    index = @props.index
+    <Col xs={12} style={marginBottom: 8}>
+      <Col xs={12} className='div-row'>
+        <span style={fontSize: '150%'}>
+          {plugin.displayName}
+        </span>
+        <span style={paddingTop: 2; paddingLeft: 2}> @<span className='author-link' onClick={_.partial @props.handleClickAuthorLink, plugin.link}>{plugin.author}</span></span>
+        <div style={paddingTop: 2, marginLeft: 'auto', display: 'flex'}>
+          <div>
+            <Label bsStyle="#{if plugin.lastestVersion.indexOf('beta') == -1 then 'primary' else 'warning'}"
+                   className="update-label #{if not plugin.isOutdated then 'hidden'}"
+                   onClick={_.partial @props.handleUpdate, index}>
+              <FontAwesome name={
+                             if plugin.isUpdating
+                               "spinner"
+                             else if plugin.isOutdated
+                               "cloud-download"
+                             else
+                               "check"
+                           }
+                           pulse={plugin.isUpdating}/>
+              {
+                if plugin.isUpdating
+                   __ "Updating"
+                else if plugin.isOutdated
+                   "Version #{plugin.lastestVersion}"
+                else
+                   __ "Latest"
+              }
+            </Label>
+          </div>
+          <div>
+            Version {plugin.version || '1.0.0'}
+          </div>
+        </div>
+      </Col>
+      <Col xs={12} style={marginTop: 4}>
+        <Col xs={5}>{plugin.description}</Col>
+        <Col xs={7} style={padding: 0}>
+          <div style={width: "#{if plugin.settingsClass? then '100%' else 'calc(100% * 2 / 3)'}", marginLeft: 'auto'}>
+            <ButtonGroup bsSize='small' style={width: '100%'}>
+              {
+                if plugin.settingsClass?
+                  <Button ref="setting-btn"
+                          bsStyle='primary' bsSize='xs' style={width: 'calc(100% / 3)'}
+                          onClick={_.partial @props.toggleSettingPop, plugin.name}>
+                    <FontAwesome name='gear' />
+                    {__ 'Settings'}
+                  </Button>
+              }
+              <Button bsStyle='info'
+                      disabled={PluginManager.getStatusOfPlugin(plugin) == PluginManager.NEEDUPDATE}
+                      onClick={_.partial @props.handleEnable, index}
+                      style={width: "#{if plugin.settingsClass? then 'calc(100% / 3)' else 'calc(100% / 2)'}"}
+                      className="plugin-control-button">
+                <FontAwesome name={
+                               switch PluginManager.getStatusOfPlugin plugin
+                                 when PluginManager.VALID
+                                   "pause"
+                                 when PluginManager.DISABLED
+                                   "play"
+                                 when PluginManager.NEEDUPDATE
+                                   "ban"
+                                 when PluginManager.BROKEN
+                                   "close"
+                             }/>
+                {
+                  switch PluginManager.getStatusOfPlugin plugin
+                    when PluginManager.VALID
+                      __ "Disable"
+                    when PluginManager.DISABLED
+                      __ "Enable"
+                    when PluginManager.NEEDUPDATE
+                      __ "Outdated"
+                    when PluginManager.BROKEN
+                      __ "Error"
+                }
+              </Button>
+              <Button bsStyle='danger'
+                      onClick={_.partial @props.handleRemove, index}
+                      disabled={not plugin.isInstalled}
+                      style={width: "#{if plugin.settingsClass? then 'calc(100% / 3)' else 'calc(100% / 2)'}"}
+                      className="plugin-control-button">
+                <FontAwesome name={if plugin.isInstalled then 'trash' else 'trash-o'} />
+                {
+                  if plugin.isUninstalling
+                    __ "Removing"
+                  else if plugin.isInstalled
+                    __ "Remove"
+                  else
+                    __ "Removed"
+                }
+              </Button>
+            </ButtonGroup>
+            {
+              if plugin.settingsClass?
+                <Overlay show={@props.settingPopOpen}
+                         onHide={_.partial @props.toggleSettingPop, plugin.name, false}
+                         rootClose={true}
+                         target={=> ReactDOM.findDOMNode @refs['setting-btn']}
+                         placement='top'>
+                  <Popover id="#{plugin.name}-setting-pop">
+                    <PluginSettingWrap plugin={plugin} />
+                  </Popover>
+                </Overlay>
+            }
+          </div>
+        </Col>
+      </Col>
+    </Col>
+
+UninstalledPlugin = React.createClass
+  render: ->
+    value = @props.record
+    <Col xs={12} style={marginBottom: 8}>
+      <Col xs={12} className='div-row'>
+        <span style={fontSize: '150%'}>
+          <FontAwesome name={value.icon} />
+            {value[window.language]}
+          </span>
+        <span style={paddingTop: 2}> @
+          <span className='author-link' onClick={_.partial @props.handleClickAuthorLink, value.link}>
+            {value.author}
+          </span>
+        </span>
+      </Col>
+      <Col xs={12} style={marginTop: 4}>
+        <Col xs={8}>{value["des#{window.language}"]}</Col>
+        <Col xs={4} style={padding: 0}>
+          <div style={marginLeft: 'auto'}>
+            <ButtonGroup bsSize='small' style={width: '100%'}>
+              <Button bsStyle='primary'
+                      disabled={@props.npmWorkding}
+                      onClick={_.partial @props.handleInstall, @props.name}
+                      style={width: "100%"}
+                      className="plugin-control-button">
+                <FontAwesome name={
+                               if @props.installing
+                                 'spinner'
+                               else
+                                 'download'
+                             }
+                             pulse={@props.installing}/>
+                {
+                  if @props.installing
+                    __ "Installing"
+                  else
+                    __ "Install"
+                }
+              </Button>
+            </ButtonGroup>
+          </div>
+        </Col>
+      </Col>
+    </Col>
 
 PluginConfig = React.createClass
   getInitialState: ->

        </Col>
      {
        for plugin, index in @state.plugins
          <Col key={index} xs={12} style={marginBottom: 8}>
            <Col xs={12} className='div-row'>
              <span style={fontSize: '150%'}>
                {plugin.displayName}
              </span>
              <span style={paddingTop: 2; paddingLeft: 2}> @<span className='author-link' onClick={@handleClickAuthorLink.bind @, plugin.link}>{plugin.author}</span></span>
              <div style={paddingTop: 2, marginLeft: 'auto', display: 'flex'}>
                <div>
                  <Label bsStyle="#{if plugin.lastestVersion.indexOf('beta') == -1 then 'primary' else 'warning'}"
                         className="update-label #{if not plugin.isOutdated then 'hidden'}"
                         onClick={@handleUpdate.bind @, index}>
                    <FontAwesome name={
                                   if plugin.isUpdating
                                     "spinner"
                                   else if plugin.isOutdated
                                     "cloud-download"
                                   else
                                     "check"
                                 }
                                 pulse={plugin.isUpdating}/>
                    {
                      if plugin.isUpdating
                         __ "Updating"
                      else if plugin.isOutdated
                         "Version #{plugin.lastestVersion}"
                      else
                         __ "Latest"
                    }
                  </Label>
                </div>
                <div>
                  Version {plugin.version || '1.0.0'}
                </div>
              </div>
            </Col>
            <Col xs={12} style={marginTop: 4}>
              <Col xs={5}>{plugin.description}</Col>
              <Col xs={7} style={padding: 0}>
                <div style={width: "#{if plugin.settingsClass? then '100%' else 'calc(100% * 2 / 3)'}", marginLeft: 'auto'}>
                  <ButtonGroup bsSize='small' style={width: '100%'}>
                    {
                      if plugin.settingsClass?
                        <Button ref="#{plugin.name}-setting-btn"
                                bsStyle='primary' bsSize='xs' style={width: 'calc(100% / 3)'}
                                onClick={@toggleSettingPop.bind @, plugin.name}>
                          <FontAwesome name='gear' />
                          {__ 'Settings'}
                        </Button>
                    }
                    <Button bsStyle='info'
                            disabled={PluginManager.getStatusOfPlugin(plugin) == PluginManager.NEEDUPDATE}
                            onClick={@handleEnable.bind @, index}
                            style={width: "#{if plugin.settingsClass? then 'calc(100% / 3)' else 'calc(100% / 2)'}"}
                            className="plugin-control-button">
                      <FontAwesome name={
                                     switch PluginManager.getStatusOfPlugin plugin
                                       when PluginManager.VALID
                                         "pause"
                                       when PluginManager.DISABLED
                                         "play"
                                       when PluginManager.NEEDUPDATE
                                         "ban"
                                       when PluginManager.BROKEN
                                         "close"
                                   }/>
                      {
                        switch PluginManager.getStatusOfPlugin plugin
                          when PluginManager.VALID
                            __ "Disable"
                          when PluginManager.DISABLED
                            __ "Enable"
                          when PluginManager.NEEDUPDATE
                            __ "Outdated"
                          when PluginManager.BROKEN
                            __ "Error"
                      }
                    </Button>
                    <Button bsStyle='danger'
                            onClick={@handleRemove.bind @, index}
                            disabled={not plugin.isInstalled}
                            style={width: "#{if plugin.settingsClass? then 'calc(100% / 3)' else 'calc(100% / 2)'}"}
                            className="plugin-control-button">
                      <FontAwesome name={if plugin.isInstalled then 'trash' else 'trash-o'} />
                      {
                        if plugin.isUninstalling
                          __ "Removing"
                        else if plugin.isInstalled
                          __ "Remove"
                        else
                          __ "Removed"
                      }
                    </Button>
                  </ButtonGroup>
                  {
                    if plugin.settingsClass?
                      <Overlay show={@state.settingPopOpen[plugin.name]}
                               onHide={@toggleSettingPop.bind @, plugin.name, false}
                               rootClose={true}
                               target={@getDOMNodeByName.bind @, "#{plugin.name}-setting-btn"}
                               placement='top'>
                        <Popover id="#{plugin.name}-setting-pop">
                          <PluginSettingWrap plugin={plugin} />
                        </Popover>
                      </Overlay>
                  }
                </div>
              </Col>
            </Col>
          </Col>
      }
      {
        for name, index in Object.keys(@state.uninstalledPluginSettings)
          value = @state.uninstalledPluginSettings[name]
          <Col key={index} xs={12} style={marginBottom: 8}>
            <Col xs={12} className='div-row'>
              <span style={fontSize: '150%'}>
                <FontAwesome name={value.icon} />
                  {value[window.language]}
                </span>
              <span style={paddingTop: 2}> @
                <span className='author-link' onClick={@handleClickAuthorLink.bind @, value.link}>
                  {value.author}
                </span>
              </span>
            </Col>
            <Col xs={12} style={marginTop: 4}>
              <Col xs={8}>{value["des#{window.language}"]}</Col>
              <Col xs={4} style={padding: 0}>
                <div style={marginLeft: 'auto'}>
                  <ButtonGroup bsSize='small' style={width: '100%'}>
                    <Button bsStyle='primary'
                            disabled={@state.npmWorkding}
                            onClick={@handleInstall.bind @, name}
                            style={width: "100%"}
                            className="plugin-control-button">
                      <FontAwesome name={
                                     if name in @state.installingPluginNames
                                       'spinner'
                                     else
                                       'download'
                                   }
                                   pulse={name in @state.installingPluginNames}/>
                      {
                        if name in @state.installingPluginNames
                          __ "Installing"
                        else
                          __ "Install"
                      }
                    </Button>
                  </ButtonGroup>
                </div>
              </Col>
            </Col>
          </Col>
      }
      </Grid>
    </form>

    config = yield PluginManager.selectConfig(state ,null, null)
    @setState
      config: config
  toggleSettingPop: (name, state) ->
    settingPopOpen = @state.settingPopOpen
    if state?
