<DynamicPageBanner title=""/>
<div class="reply-container">
  {{#if status}}
    <Status index="0"
            length="1"
            timelineType="reply"
            timelineValue="{{params.statusId}}"
            :status
    />
    <ComposeBox realm="{{params.statusId}}" autoFocus="true" />
  {{else}}
    <LoadingPage />
  {{/if}}
</div>
<style>
  .reply-container {
    position: relative;
    margin-top: 20px;
  }
</style>
<script>
  import { store } from '../../../_store/store.js'
  import DynamicPageBanner from '../../../_components/DynamicPageBanner.html'
  import LoadingPage from '../../../_components/LoadingPage.html'
  import ComposeBox from '../../../_components/compose/ComposeBox.html'
  import Status from '../../../_components/status/Status.html'
  import { database } from '../../../_database/database'

  export default {
    async oncreate() {
      let statusId = this.get('params').statusId
      let instanceName = this.store.get('currentInstance')
      let status  = await database.getStatus(instanceName, statusId)
      this.set({status})
    },
    store: () => store,
    components: {
      DynamicPageBanner,
      LoadingPage,
      ComposeBox,
      Status
    }
  }
</script>