<template>
  <article
    class="film flex flex-col justify-between bg-gray-100 prose prose-sm rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl mb-4 sm:m-4"
  >
    <header class="p-4 rounded-t-md">
      <h1>
        {{ film.title + " (" + film.release_date + ")" }}
      </h1>
      <h2 class="text-gray-700 mt-0">{{ "by " + film.director }}</h2>
    </header>

    <main class="inline-block px-4">
      <h3>Summary</h3>
      <p>{{ excerptOfDescription }}</p>
    </main>

    <footer class="px-4 flex items-center justify-between">
      <p
        class="film-score font-bold text-lg"
        :class="{
          'text-green-600': film.rt_score >= 75,
          'text-orange-600': film.rt_score >= 50 && film.rt_score < 75,
          'text-yellow-600': film.rt_score >= 25 && film.rt_score < 50,
          'text-red-600': film.rt_score >= 0 && film.rt_score < 25
        }"
      >
        {{ film.rt_score + "%" }}
      </p>
      <router-link
        class="rounded font-semibold bg-gray-400 py-2 px-4 border-b-4 border-gray-500"
        :to="`/films/${film.id}`"
        tag="button"
      >
        Read more
      </router-link>
    </footer>
  </article>
</template>

<script>
export default {
  name: "Film",
  props: {
    film: {
      type: Object,
      default: {},
      required: true
    }
  },
  computed: {
    excerptOfDescription: function() {
      return this.film.description.substring(0, 300) + "...";
    }
  }
};
</script>

<style lang="css" scoped>
@media screen and (min-width: 640px) {
  .film {
    margin: 1rem;
    flex: 1 1 calc(50% - 2rem);
  }
}

@media screen and (min-width: 1024px) {
  .film {
    flex: 1 1 calc(33% - 2rem);
  }
}

header {
  background-color: #85ffbd;
  background-image: linear-gradient(45deg, #85ffbd 0%, #fffb7d 100%);
}

.film:nth-child(2n) header {
  background-color: #ff9a8b;
  background-image: linear-gradient(
    90deg,
    #ff9a8b 0%,
    #ff6a88 55%,
    #ff99ac 100%
  );
}

.film:nth-child(4n) header {
  background-color: #fee140;
  background-image: linear-gradient(90deg, #fee140 0%, #fa709a 100%);
}

.film:nth-child(5n) header {
  background-color: #a9c9ff;
  background-image: linear-gradient(180deg, #a9c9ff 0%, #ffbbec 100%);
}

.film-score::before {
  content: "";
  background: url(~assets/svg/rotten-tomatoes.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
  vertical-align: sub;
  margin-right: 0.5rem;
}
</style>
