Creating Movie Category Template

#controllers/country.py
import config, copy, lib
from flask import render_template, redirect, session
from models.moviedb import Moviedb

class Country():
  def __init__(self):
    self.lib = lib.Lib()
    self.moviedb = Moviedb()

  def get_movie(self, label):
    vdict = copy.deepcopy(config.vdict)
    vdict['site_title'] = '​ប្រភេទ​ភាពយន្ត'
    session['page'] = 0
    session['label'] = label

    vdict['movies'] = self.moviedb.select(vdict['country_max_movie'], label=label)
    vdict['thumbs'] = self.lib.get_thumbs(vdict['movies'], 5, type='movie')

    return render_template('country.html', data=vdict)

  def load_movie(self):
    vdict = copy.deepcopy(config.vdict)
    session['page'] += 1
    vdict['movies'] = self.moviedb.select(vdict['country_max_movie'], page=session['page'], label=session['label'])
    vdict['thumbs'] = self.lib.get_thumbs(vdict['movies'], 5, type="movie")

    new_list = []
    for movie in vdict['movies']:
      new_movie = list(movie)
      new_movie[6] = movie[6].strftime('%d/%m/%Y') 
      new_movie[7] = movie[7].strftime('%H:%M:%S') 
      new_list.append(new_movie)

    vdict['movies'] = new_list
    return vdict

<!--templates/movie.html-->
{% extends 'base.html' %}

{% block head %}
{{ super() }}
<link href="/static/styles/country.css" rel="stylesheet">
<script src="/static/scripts/country.js"></script>
{% endblock %}

{% block content %}
<div class="country">​<a href="/movie/country/{{ data['movies'][0][4] }}">{{ data['movies'][0][4] }}</a></div>

<div id='country-movies'>
  {% for v in range(data['movies']|length) %}
  <div class="movie-wrapper">
    <a href="/movie/{{ data['movies'][v][0] }}"><img src="{{ data['thumbs'][v] }}" /></a>
    <a class="movie-title" href="/movie/{{ data['movies'][v][0] }}">{{ data['movies'][v][3] }}</a>
  </div>
  {% endfor %}
</div>
<div id="load-more" class="load-more region">
  <img onclick="country.load_items('/movie/country/load/')" src="/static/images/arrow.png" />
</div>
{% endblock %}

//static/scritps/country.js
class Country{
  load_items(url){
    $('#load-more img').attr('src', '/static/images/loading.gif');
    $.get(url, function(data, status){
      if(status === "success"){
        country.listing_movies(data)
      }else{
        alert('Fail to connect to server.');
      }
    });
  }
  listing_movies(data){
    var html = '';
    for(var v=0; v<data['movies'].length; v++){
      html += '<div class="movie-wrapper">';
      html += `<a href="/movie/${ data['movies'][v][0] }"><img src="${ data['thumbs'][v] }" /></a>`;
      html += `<a class="movie-title" href="/movie/${ data['movies'][v][0] }">${ data['movies'][v][3] }</a>`;
      html += `</div>`;
    }
  
    $('#country-movies').append(html);
    $('#load-more img').attr('src', '/static/images/arrow.png')
  }
}//end class

const country = new Country();

/*static/styles/movie.css*/
#content{
  padding: 20px;
}
#content .country a{
  font: italic 24px/1.5 Oswald, Limonf3;
}
#content #country-movies{
  display: grid;
  grid-template-columns: calc(50% - 5px) calc(50% - 5px);
  grid-gap: 10px;
  margin-top: 20px;
}
#content #country-movies a,
#content #country-movies img{
  width: 100%;
}
#content #country-movies img{
  float: left;
}
#content #country-movies .movie-wrapper{
  position: relative;
  text-align: center;
}
#content #country-movies .movie-title{
  display: block;
  position: absolute;
  bottom: 0;
  padding: 10px 0;
  font: 18px/1.5 Courgette, HandWriting;
  text-shadow: 2px 2px 5px black;
  background-image: linear-gradient(to top, black, transparent);
}
#content #load-more{
  text-align: center;
  padding: 30px 0 0;
}
#content #load-more img:hover{
  opacity: .5;
  cursor: pointer;
}

@media only screen and (max-width: 600px){
  #content #country-movies{
    grid-template-columns: 100%;
  }
}

GitHub: "https://github.com/Sokhavuth/ETV
Heroku: https://khmerweb-etv.herokuapp.com/