<:Head>
  <title>Pinafore – Settings</title>
</:Head>

<Layout page='settings'>
  <SettingsLayout page='settings' label="Settings">
    <h1>Settings</h1>

    <SettingsList>
      <SettingsListItem href="/settings/general" label="General"/>
      <SettingsListItem href="/settings/instances" label="Instances"/>
      <SettingsListItem href="/settings/about" label="About Pinafore"/>
    </SettingsList>

  </SettingsLayout>
</Layout>
<script>
  import Layout from '../_components/Layout.html';
  import SettingsLayout from './_components/SettingsLayout.html'
  import SettingsList from './_components/SettingsList.html'
  import SettingsListItem from './_components/SettingsListItem.html'

  export default {
    components: {
      Layout,
      SettingsLayout,
      SettingsList,
      SettingsListItem
    }
  };
</script>