 #
 ###############################################################################
 
-{React, ReactDOM, rtypes, rclass, redux, Redux} = require('./app-framework')
+{React, ReactDOM, rtypes, rclass, redux, Redux, Fragment} = require('./app-framework')
 {Col, Row, ButtonToolbar, ButtonGroup, MenuItem, Button, Well, FormControl, FormGroup, Radio,
 ButtonToolbar, Popover, OverlayTrigger, SplitButton, MenuItem, Alert, Checkbox, Breadcrumb, Navbar} =  require('react-bootstrap')
 misc = require('smc-util/misc')
 {ActivityDisplay, DirectoryInput, Icon, ProjectState, COLORS,
-SearchInput, TimeAgo, ErrorDisplay, Space, Tip, Loading, LoginLink, Footer, CourseProjectExtraHelp, CopyToClipBoard} = require('./r_misc')
+SearchInput, TimeAgo, ErrorDisplay, Space, Tip, Loading, LoginLink, Footer, CourseProjectExtraHelp, CopyToClipBoard, VisibleMDLG} = require('./r_misc')
 {SMC_Dropwrapper} = require('./smc-dropzone')
 {FileTypeSelector, NewFileButton} = require('./project_new')
 {SiteName} = require('./customize')

        @props.redux.getTable('account').set(other_settings:{first_steps:false})

    render: ->
        <Row>
            <Navbar>
                <Navbar.Header style={marginTop:'10px'}>
                    <Navbar.Brand>
                        New to <SiteName/>?
                    </Navbar.Brand>
                    <Navbar.Toggle />
                </Navbar.Header>
                <Navbar.Collapse>
                    <Navbar.Text>
                        <Button
                            onClick = {@get_first_steps}
                            bsStyle = {'info'} >
                                Start the <strong>First Steps</strong> guide!
                        </Button>
                    </Navbar.Text>
                    <Navbar.Text>
                        <Button
                            onClick={@dismiss_first_steps}>
                                Dismiss
                        </Button>
                    </Navbar.Text>
                </Navbar.Collapse>
            </Navbar>
        </Row>

NoFiles = rclass
    propTypes :

            <TerminalModeDisplay/>

    render : ->
        <Fragment>
            <Col sm={12} style={zIndex:1}>
                {@render_terminal_mode() if not @props.public_view}
                {<ListingHeader
                    active_file_sort = {@props.active_file_sort}
                    sort_by          = {@props.sort_by}
                    check_all        = {false}
                    /> if @props.listing.length > 0}
                {@render_rows()}
                {@render_no_files()}
            </Col>
            <VisibleMDLG>
                {@render_first_steps()}
            </VisibleMDLG>
        </Fragment>

# One segment of the directory links at the top of the files listing.
PathSegmentLink = rclass
