<template>
  <div class="blog-list">
    <h1>Blogs</h1>
    <div class="toolbar">
      <router-link v-if="$store.getters.isLoggedIn" class="btn" to="/blogs/create">Neuen Blog erstellen</router-link>
    </div>
    <div v-if="loading">Laden…</div>
    <div v-else>
      <div v-if="!blogs.length">Keine Blogs gefunden.</div>
      <ul>
        <li v-for="b in blogs" :key="b.id">
          <router-link :to="`/blogs/${b.id}`">{{ b.title }}</router-link>
          <small> – {{ b.owner?.username }}</small>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { listBlogs } from '@/api/blogApi.js';
export default {
  name: 'BlogListView',
  data: () => ({ blogs: [], loading: true }),
  async mounted() {
    try { this.blogs = await listBlogs(); } finally { this.loading = false; }
  }
}
</script>
