<template>
  <div class="q-pa-md q-gutter-sm">
    <q-card flat bordered>
      <p class="text-h5 q-pa-md">Название темы</p>
      <p class="q-pa-md">Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги "de Finibus Bonorum et Malorum" ("О пределах добра и зла"), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, "Lorem ipsum dolor sit amet..", происходит от одной из строк в разделе 1.10.32</p>
      <q-separator spaced />
      <div class="row" style="display: flex; width: 100%;">
        <p style="display: flex; flex-basis: 50%;" class="text-subtitle2 q-pa-sm q-mt-md">Иван Иванов, Сегодня 17:03</p>
        <div class="row" style="display: flex; flex-basis: 50%; justify-content: flex-end;">
          <q-btn size="30px" flat style="color: #0000FF">+</q-btn>
          <p class="text-h6 q-pa-sm q-mt-md">10</p>
          <q-btn size="30px" flat style="color: #FF0080">-</q-btn>
        </div>
      </div>
    </q-card>
    <q-card class="q-ml-xl" flat bordered>
      <p class="q-pa-md">Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги "de Finibus Bonorum et Malorum" ("О пределах добра и зла"), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, "Lorem ipsum dolor sit amet..", происходит от одной из строк в разделе 1.10.32</p>
      <q-separator spaced />
      <div class="row" style="display: flex; width: 100%;">
        <p style="display: flex; flex-basis: 50%;" class="text-subtitle2 q-pa-sm q-mt-md">Олег Олегов, Сегодня 17:04</p>
        <div class="row" style="display: flex; flex-basis: 50%; justify-content: flex-end;">
          <q-btn size="30px" flat style="color: #0000FF">+</q-btn>
          <p class="text-h6 q-pa-sm q-mt-md">11</p>
          <q-btn size="30px" flat style="color: #FF0080">-</q-btn>
        </div>
      </div>
    </q-card>
    <q-card class="q-ml-xl" flat bordered>
      <p class="q-pa-md">Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа </p>
      <q-separator spaced />
      <div class="row" style="display: flex; width: 100%;">
        <p style="display: flex; flex-basis: 50%;" class="text-subtitle2 q-pa-sm q-mt-md">Алиса Встранечудесова, Сегодня 17:09</p>
        <div class="row" style="display: flex; flex-basis: 50%; justify-content: flex-end;">
          <q-btn size="30px" flat style="color: #0000FF">+</q-btn>
          <p class="text-h6 q-pa-sm q-mt-md">0</p>
          <q-btn size="30px" flat style="color: #FF0080">-</q-btn>
        </div>
      </div>
    </q-card>
    <q-card class="q-ml-xl" flat bordered>
      <p class="q-pa-md">Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа </p>
      <q-separator spaced />
      <div class="row" style="display: flex; width: 100%;">
        <p style="display: flex; flex-basis: 50%;" class="text-subtitle2 q-pa-sm q-mt-md">Евгений Женин, Сегодня 17:10</p>
        <div class="row" style="display: flex; flex-basis: 50%; justify-content: flex-end;">
          <q-btn size="30px" flat style="color: #0000FF">+</q-btn>
          <p class="text-h6 q-pa-sm q-mt-md">0</p>
          <q-btn size="30px" flat style="color: #FF0080">-</q-btn>
        </div>
      </div>
    </q-card>
    <q-separator spaced />
    <q-editor v-model="editor" min-height="5rem" />

    <q-card flat bordered>
      <q-badge label="Предпросмотр" />
      <q-card-section v-html="editor" />
    </q-card>
    <q-btn @click="answer" label="Ответить"/>
  </div>
</template>

<script>
export default {
  name: 'Topic',
  data () {
    return {
      editor: '',
      comments: []
    }
  },

  methods: {
    answer () {
      this.$router.push({ path: '/topics/1' })
    }
  }
}
</script>
