<template>
  <section class="py-4">
    <img
      class="w-full max-w-md mx-auto mb-8"
      src="~/assets/images/logo.png"
      alt="Studio Ghibli"
    />
    <Grid :dataSource="films" />
  </section>
</template>

<script>
import Grid from "@/components/Grid";

export default {
  name: "Films",
  components: { Grid },
  head: {
    titleTemplate: "%s - Films"
  },
  async asyncData({ $axios }) {
    const films = await $axios.$get("/api/films");
    return { films };
  },
  data() {
    return {
      films: []
    };
  }
};
</script>

<style></style>
