<template>
  <div class="row banner">
    <div class="title-logo">
      <amp-img width="1048" height="200" layout="responsive" :src="appLogo" />
    </div>
    <div class="nuxt-logo">
      <amp-img width="300" height="220" layout="responsive" :src="nuxtLogo" />
    </div>
    <div class="amp-logo">
      <amp-img width="256" height="256" layout="responsive" :src="ampLogo" />
    </div>
    <div class="banner-carousel">
      <amp-carousel width="197" height="310" layout="responsive" type="slides" autoplay delay="2000">
        <amp-img
          v-for="(movie, index) in movies"
          :key="`movie-poster-${index}`"
          :src="movie.Poster"
          width="197"
          height="310"
          layout="responsive"
          alt="a sample poster"
        />
      </amp-carousel>
    </div>
  </div>
</template>