function Echocentric(props) {
  return (
    <Page>
      <Section
        title={<Text bold align="center">Time Settings</Text>}>
        <Toggle
          settingsKey="leadingZero"
          label={`Hour has leading Zero`}
        />
        <Select
          label={`Colors`}
          settingsKey="colors"
          options={[
            {name:"Custom color", value:"manual"},
            {name:"Random colors", value:"random"},
            {name:"Based on activity goal", value:"auto"}
          ]}
        />
        { (props.settings.colors && JSON.parse(props.settings.colors).values[0].value === 'manual' || false) &&
        <ColorSelect
          settingsKey="customcolor"
          centered={true}
          colors={[
            {color: '#00b0e7', value: ['0.702','1.0','0.4']}, // hue, saturation, sat modifier
            {color: '#2084c0', value: ['0.729','1.0','0.5']},
            {color: '#2040c0', value: ['0.799','1.0','0.5']},
            {color: '#5700ad', value: ['0.883','1.0','0.0']},
            {color: '#685098', value: ['0.898','0.5','0.3']},
            {color: '#8820c0', value: ['0.933','1.0','0.5']},
            {color: '#c020c0', value: ['0.987','1.0','0.5']},
            {color: '#806480', value: ['0.011','0.3','0.3']},
            {color: '#e800d0', value: ['0.013','1.0','0.0']},
            {color: '#a04890', value: ['0.016','0.8','0.7']},
            {color: '#985070', value: ['0.085','0.5','0.3']},
            {color: '#c02058', value: ['0.108','1.0','0.5']},
            {color: '#e80040', value: ['0.113','1.0','0.0']},
            {color: '#e83800', value: ['0.203','1.0','0.0']},
            {color: '#986850', value: ['0.216','0.5','0.3']},
            {color: '#e89c01', value: ['0.275','1.0','0.0']},
            {color: '#c8e802', value: ['0.348','1.0','0.0']},
            {color: '#788f4b', value: ['0.372','0.5','0.3']},
            {color: '#42bb1b', value: ['0.444','1.0','0.5']},
            {color: '#00e12d', value: ['0.525','1.0','0.0']},
            {color: '#01e890', value: ['0.600','1.0','0.0']},
            {color: '#608078', value: ['0.613','0.3','0.3']},
            {color: '#48a090', value: ['0.632','0.8','0.7']},
            {color: '#508c98', value: ['0.689','0.5','0.3']}
          ]}
        />
        }
        { (props.settings.colors && JSON.parse(props.settings.colors).values[0].value === 'auto' || false) &&
        <Select
          label={`Activity for goal color`}
          settingsKey="colorgoal"
          options={[
            {name:"Steps", value:"steps"},
            {name:"Calories", value:"cal"},
            {name:"Distance", value:"dist"},
            {name:"Floors", value:"elev"},
            {name:"Active Minutes", value:"actmin"},
            {name:"Heart Rate", value:"hr"}
          ]}
        />
        }
        { (props.settings.colors && JSON.parse(props.settings.colors).values[0].value === 'auto' || false) &&
        <Text>You will see different colors depending on your activity. Red means you still have a long way to your goal. On your way there you will see orange and yellow, until finally when you've reached your goal you will see green. With heart rate the colors will work the other way around. Green means you are below your Fat Burn zone, your Fat Burn zone is yellow, Cardio is orange and Peak is red.</Text>
        }
      </Section>
      <Section
        title={<Text bold align="center">Secondary Information</Text>}>
        <Select
          label={`Second line`}
          settingsKey="secondary"
          options={[
            {name:"nothing", value:"-"},
            {name:"Date", value:"date"},
            {name:"Steps", value:"steps"},
            {name:"Calories", value:"cal"},
            {name:"Distance", value:"dist"},
            {name:"Floors", value:"elev"},
            {name:"Active Minutes", value:"actmin"},
            {name:"Heart Rate", value:"hr"}
          ]}
        />
        <Select
          label={`Date format`}
          settingsKey="dateformat"
          options={[
            {name:"MM/DD", value:"md/"},
            {name:"MM-DD", value:"md-"},
            {name:"DD.MM.", value:"dm."},
            {name:"DD/MM", value:"dm/"},
            {name:"DD-MM", value:"dm-"}
          ]}
        />
        <Select
          label={`Tap action`}
          settingsKey="tap"
          options={[
            {name:"nothing", value:"-"},
            {name:"Activity overlay", value:"overlay"},
            {name:"Changes secondary info", value:"cycle"}
          ]}
        />
      </Section>
    </Page>
  );
}

registerSettingsPage(Echocentric);