{% extends 'bootstrap/base.html' %}

{% block styles %}
{{ super() }}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
  integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
  crossorigin="anonymous" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles_movie.css') }}">
{% endblock %}

{% block title %}My Top 10 Books{% endblock %}

{% block content %}
<div class="container">
  <h1 class="heading">My Top Books List</h1>
  <!-- <p class="description">These are my all time favourite Books.</p> -->

  {% for movie in movies %}

  <div class="card">
    <div class="front" style="background-image: url('{{movie.img_url}}');">
      <p class="large">{{movie.ranking}}</p>
    </div>
    
    <div class="back">
      <div>
        <div class="title">{{movie.title}} <span class="release_date">{{ movie.year }}</span></div>
        
        <div class="rating">
          <label>{{ movie.rating }}</label>
          <i class="fas fa-star star"></i>
        </div>

        <p class="review">{{ movie.review }}</p>
        <p class="overview"> {{ movie.description }} </p>

        <a href="{{url_for('rate_movie', id=movie.id)}}" class="button">Update</a>
        <a href="{{url_for('delete', id=movie.id)}}" class="button delete-button">Delete</a>
      </div>
    </div>

  </div>
    {% endfor %}

</div>
<div class="container text-center add">
  <a href="{{url_for('add')}}" class="button">Add Book</a>
</div>

{% endblock %}