<template>
    <q-page padding class="">
      <q-card flat bordered style="max-width: 1200px" class="q-mx-auto q-mb-lg">
        <q-card-section>
          <div class="text-h5">Ваша личная метавселенная</div>
        </q-card-section>
      </q-card>
      <q-card flat bordered style="max-width: 1200px" class="q-mx-auto">
        <q-card-section>
          <div class="text-h6">Проекты пользователя</div>
          <div class="text-subtitle2 text-grey">Управление вашими проектами</div>
        </q-card-section>
        <q-separator />
        <q-card-section class="flex">
          <q-space />

          <q-btn
            outline
            color="secondary"
            label="+Создать проект"

          />
        </q-card-section>
        <q-card-section>
          <q-list>
            <q-item
              clickable
              v-ripple
              v-for="project in projectList"
              :key="project.id"
              :to="{name:'project', params:{uuid:project.id} }"
            >
              <q-item-section avatar>
                <q-icon size="xl" color="grey" name="space_dashboard" />
              </q-item-section>
              <q-item-section>
                <div class="ellipsis full-width">
                  {{ project.name }}
                </div>
                <div class="text-subtitle2 text-grey ellipsis full-width">
                  {{ project.description }}
                </div>
              </q-item-section>

              <q-item-section side>
                <q-btn icon="more_horiz" flat />
              </q-item-section>
            </q-item>
          </q-list>
        </q-card-section>
      </q-card>
    </q-page>
  </template>

  <script lang="ts">
  import { defineComponent } from 'vue';
  const projectList = [
    {
      id: '1',
      name: 'Проект 1111111111111111111112311111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
      description:
        'Описание проекта 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
    },
    { id: '2', name: 'Проект 2', description: 'Описание проекта 2' },
    { id: '3', name: 'Проект 3', description: 'Описание проекта 3' },
    { id: '4', name: 'Проект 4', description: 'Описание проекта 4' },
    { id: '5', name: 'Проект 5', description: 'Описание проекта 5' },
    { id: '6', name: 'Проект 6', description: 'Описание проекта 6' },
    { id: '7', name: 'Проект 7', description: 'Описание проекта 7' },
  ];
  export default defineComponent({
    name: 'ProjectsPage',
    data() {
      return {
        projectList: projectList,
      };
    },
  });
  </script>
