<template>
  <div class="col q-gutter-md">
    <div class="flex row">
      <q-card flat class="text-center">
        <q-icon size="64px" name="star" color="grey-3" />
        <div class="text-center text-caption">Stars</div>
        <div class="text-center text-h6 text-grey text-weight-bold">0</div>
      </q-card>
      <q-card flat class="text-center">
        <q-icon size="64px" name="save" color="grey-3" />
        <div class="text-center text-caption">Downloads</div>
        <div class="text-center text-h6 text-grey text-weight-bold">0</div>
      </q-card>
    </div>
    <q-list dense>
      <q-item>
        <q-item-section side>
          <q-item-label caption>Category</q-item-label>
        </q-item-section>
        <q-item-section>
          <q-item-label>Materials</q-item-label>
        </q-item-section>
      </q-item>
      <q-item>
        <q-item-section side>
          <q-item-label caption>Created</q-item-label>
        </q-item-section>
        <q-item-section>
          <q-item-label>{{$niceTime(project.created)}}</q-item-label>
        </q-item-section>
      </q-item>
      <q-item v-if="project.tags && project.tags.length > 0">
        <q-item-section side>
          <q-item-label caption>Tags</q-item-label>
        </q-item-section>
      </q-item>
      <q-item v-if="project.tags && project.tags.length > 0">
        <q-item-section>
          <div class="row">
            <q-chip v-for="tag,idx in project.tags" dense :key="idx" :label="tag" />
          </div>
        </q-item-section>
      </q-item>
      <q-separator inline spaced />

      <q-item>
        <q-item-section side>
          <q-item-label caption>Uploaded by:</q-item-label>
        </q-item-section>
      </q-item>
      <q-item>
        <q-item-section avatar>
          <router-link :to="`/users/${project.userId}`">
            <q-avatar size="128px">
              <q-img basic :src="project.userAvatar" />
            </q-avatar>
          </router-link>
        </q-item-section>
      </q-item>
      <q-item>
        <q-item-section>
          <q-item-label :lines="3" caption>{{project.username}}</q-item-label>
        </q-item-section>
      </q-item>

      <q-separator inline spaced />
      <div class="row">
        <div class="col-12">
          <div class="project-description text-caption q-pa-sm" v-html="formatted_description"></div>
        </div>
      </div>
      <q-list>
        <q-separator inset spaced />
        <q-item clickable>
          <q-item-section side>
            <q-icon name="book" />
          </q-item-section>
          <q-item-section>
            <q-item-label class="text-grey text-weight-bold">Documentation</q-item-label>
          </q-item-section>
        </q-item>
        <q-item clickable>
          <q-item-section side>
            <q-icon name="save" color="teal-3" />
          </q-item-section>
          <q-item-section class="text-teal-6 text-weight-bold">Download files</q-item-section>
        </q-item>
      </q-list>
    </q-list>
  </div>
</template>

<script>
export default {
  // name: 'ComponentName',
  props: ["project"],
  data() {
    return {};
  },
  computed: {
    formatted_description() {
      return this.project.description.split("\n").join("<br/>");
    }
  }
};
</script>