text: import React from 'react';
  import { Container, Segment, Grid, Header, List, Divider, Image } from 'semantic-ui-react';
  
  function FooterColumn(props) {
      return (
          <Grid.Column width={props.width || 5}>
              {props.header ? <Header inverted as='h4'>{props.header}</Header> : null}
              <List link inverted>
                  {props.children}
              </List>
          </Grid.Column>
      )
  }
  
  function AboutAppColumn() {
      return (
          <FooterColumn header={<><em>Quality-time</em> v{process.env.REACT_APP_VERSION}</>} >
              <List.Item as='a' href="https://www.ictu.nl/about-us">Developed by ICTU</List.Item>
              <List.Item as='a' href='https://github.com/ICTU/quality-time/blob/master/LICENSE'>License</List.Item>
              <List.Item as='a' href='https://github.com/ICTU/quality-time/blob/master/docs/CHANGELOG.md'>Changelog</List.Item>
              <List.Item as='a' href="https://github.com/ICTU/quality-time">Source code</List.Item>
          </FooterColumn>
      )
  }
  
  function AboutReportColumn(props) {
      return (
          <FooterColumn width={6} header="About this report">
              <List.Item>{props.report.title}</List.Item>
              <List.Item>{props.report.subtitle || <span>&nbsp;</span>}</List.Item>
              <List.Item>{props.last_update.toLocaleDateString()}</List.Item>
              <List.Item>{props.last_update.toLocaleTimeString()}</List.Item>
          </FooterColumn>
      )
  }
  
  function QuoteColumn() {
      return (
          <FooterColumn width={6}>
              <List.Item><em>Quality without results is pointless.</em></List.Item>
              <List.Item><em>Results without quality is boring.</em></List.Item>
              <List.Item>Johan Cruyff</List.Item>
          </FooterColumn>
      )
  }
  
  function SupportColumn() {
      return (
          <FooterColumn header='Support'>
              <List.Item as='a' href="https://github.com/ICTU/quality-time/blob/master/README.md">Documentation</List.Item>
              <List.Item as='a' href="https://github.com/ICTU/quality-time/blob/master/docs/USAGE.md">User manual</List.Item>
              <List.Item as='a' href="https://github.com/ICTU/quality-time/issues">Known issues</List.Item>
              <List.Item as='a' href="https://github.com/ICTU/quality-time/issues/new">Report an issue</List.Item>
          </FooterColumn>
      )
  }
  
  export function Footer(props) {
      return (
          <Segment inverted style={{ margin: '5em 0em 0em', padding: '5em 0em 3em' }}>
              <Container>
                  <Grid divided inverted stackable textAlign='center' verticalAlign='middle'>
                      <AboutAppColumn />
                      {props.report ? <AboutReportColumn {...props} /> : <QuoteColumn />}
                      <SupportColumn />
                  </Grid>
                  <Divider inverted section />
                  <Image centered size='mini' src='./favicon.ico' />
              </Container>
          </Segment>
      )
  }
  