<template>
  <div class="q-pa-md justify-center full-height row">
    <ForumSection style="max-width: 905px" class="q-mt-lg q-mb-md col" :title="name" :description="description" :items="topics" :topicsMode="true"/>
    <q-page-sticky position="bottom-right" :offset="[32, 32]">
      <q-btn @click="creatingTopic=true" fab icon="add" style="background-color: #5c6bc0; color: white" />
    </q-page-sticky>
    <q-dialog v-model="creatingTopic" persistent>
      <q-card style="width:700px">
        <q-card-section>
          <div class="text-h6">Новая тема</div>
        </q-card-section>

        <q-card-section class="q-pt-none">
          <div class="q-pa-md q-gutter-sm">
            <q-input v-model="newTopicTitle" class="text-h5" label="Название" stack-label />
            <q-editor v-model="newTopicEditor" min-height="5rem" />
            <q-input v-for="(link, index) in links" v-bind:key="index" outlined v-model="link.text" label="Ссылка на приложение" />
            <q-btn @click="createAttachment" round color="primary" icon="attach_file" /><br>
            <p>Важная тема: <q-checkbox v-model="newTopicIsImportant" /></p>
          </div>
        </q-card-section>

        <q-card-actions align="right">
          <q-btn @click="createNewTopic" flat label="OK" color="primary" v-close-popup />
          <q-btn @click="cleanNewTopicVals" flat label="Закрыть" color="primary" v-close-popup />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>

<script>
import ForumSection from 'components/ForumSection'

export default {
  name: 'Themes',
  components: {
    ForumSection
  },
  data () {
    return {
      links: [],
      newTopicTitle: '',
      newTopicEditor: '',
      creatingTopic: false,
      newTopicIsImportant: false,
      name: 'Имя раздела',
      description: 'описание',
      topics: [
        {
          name: 'tema 1',
          icon: 'warning',
          nMessages: 10,
          lastMessage: { from: 'Василий Терентьев', time: 'Сегодня 19:20', topic: 'Как пропатчить KDE2 под FreeBSD' }
        },
        {
          name: 'tema 3',
          icon: 'warning',
          nMessages: 10,
          lastMessage: { from: 'Василий Терентьев', time: 'Сегодня 19:20', topic: 'Как пропатчить KDE2 под FreeBSD' }
        },
        {
          name: 'tema 4',
          icon: 'fiber_manual_record',
          nMessages: 10,
          lastMessage: { from: 'Василий Терентьев', time: 'Сегодня 19:20', topic: 'Как пропатчить KDE2 под FreeBSD' }
        },
        {
          name: 'tema 2',
          icon: 'fiber_manual_record',
          nMessages: 110,
          lastMessage: { from: 'Ольга Быстрая', time: 'Вчера 08:20', topic: 'Сап эксперач!' }
        }
      ]
    }
  },
  methods: {
    goToNewTheme () {
      this.$router.push({ path: '/new-topic/1' })
    },
    createNewTopic () {
      this.topics.unshift({ name: this.newTopicTitle, icon: 'error', nMessages: 1, lastMessage: { from: 'Василий Терентьев', time: 'Сегодня 19:20', topic: 'Как пропатчить KDE2 под FreeBSD' } })
      this.cleanNewTopicVals()
    },
    cleanNewTopicVals () {
      this.newTopicTitle = ''
      this.newTopicEditor = ''
      this.links = []
      this.newTopicIsImportant = false
    },
    createAttachment () {
      this.links.push({ text: '' })
    }
  }
}
</script>
