pinafore/routes/settings/instances/index.html

<:Head>
  <title>Instances</title>
</:Head>

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

    {{#if $isUserLoggedIn}}
    <p>Instances you've connected to:</p>
    <SettingsList>
      {{#each $loggedInInstancesAsList as instance}}
        <SettingsListItem offsetForIcon="{{instance.name !== $currentInstance}}"
                          icon="{{instance.name === $currentInstance ? '#fa-star' : ''}}"
                          href="/settings/instances/{{instance.name}}"
                          label="{{instance.name}}" />
      {{/each}}
    </SettingsList>
    <p><a href="/settings/instances/add">Add another instance</a></p>
    {{else}}
    <p><a href="/settings/instances/add">Connect to an instance</a> to start using Pinafore.</p>
    {{/if}}
  </SettingsLayout>
</Layout>
<script>
  import { store } from '../../_utils/store'
  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
    },
    store: () => store
  }
</script>