<template>
  <div>

    <ShowCode :formatCode="noLoadingCode"
              :subTitle="$t('demo.login.text_2')"
              :title="$t('demo.login.text_1')">
      <HtLogin></HtLogin>
    </ShowCode>
    <ShowCode :formatCode="loadingCode"
              :subTitle="$t('demo.login.text_2')"
              :title="$t('demo.login.text_3')">
      <HtLogin :loading="true"></HtLogin>
    </ShowCode>
    <div>
      <h1 class="demo-header-text">Attributes</h1>
      <MdView url="md/ht-login/attributes.md"></MdView>
    </div>
    <div>
      <h1 class="demo-header-text">Events</h1>
      <MdView url="md/ht-login/events.md"></MdView>
    </div>
    <div>
      <h1 class="demo-header-text">Slots</h1>
      <MdView url="md/ht-login/slot.md"></MdView>
    </div>
  </div>
</template>

<script>
import { loadingCode, noLoadingCode } from './code'
export default {
  name: 'commonLogin',
  data() {
    return {
      loadingCode,
      noLoadingCode,
    }
  },
  components: {
    ShowCode: () => import('@/components/common/show-code'),
    MdView: () => import('@/views/MdView'),
  },
}
</script>

<style lang="scss" scoped>
</style>