Creating Movie Series Categoray Template

#controllers/country_series.py
import config, copy, lib
from flask import render_template, redirect, session
from models.seriesdb import Seriesdb

class Country_series():
  def __init__(self):
    self.lib = lib.Lib()
    self.seriesdb = Seriesdb()

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

    vdict['series'] = self.seriesdb.select(vdict['country_max_movie'], label=label)
    vdict['thumbs'] = self.lib.get_thumbs(vdict['series'], 4, type='movie')

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

  def load_series(self):
    vdict = copy.deepcopy(config.vdict)
    session['page'] += 1
    vdict['series'] = self.seriesdb.select(vdict['country_max_movie'], page=session['page'], label=session['label'])
    vdict['thumbs'] = self.lib.get_thumbs(vdict['series'], 4, type="movie")

    new_list = []
    for serie in vdict['series']:
      new_serie = list(serie)
      new_serie[5] = serie[5].strftime('%d/%m/%Y') 
      new_serie[6] = serie[6].strftime('%H:%M:%S') 
      new_list.append(new_serie)

    vdict['series'] = new_list
    return vdict

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

const country_series = new Country_series();

/*static/styles/country_series.css*/
#content{
  padding: 20px;
}
#content .country-series a{
  font: italic 24px/1.5 Oswald, Limonf3;
}
#content #country-series{
  display: grid;
  grid-template-columns: calc(50% - 5px) calc(50% - 5px);
  grid-gap: 10px;
  margin-top: 20px;
}
#content #country-series a,
#content #country-series img{
  width: 100%;
}
#content #country-series img{
  float: left;
}
#content #country-series .series-wrapper{
  position: relative;
  text-align: center;
}
#content #country-series .series-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-series{
    grid-template-columns: 100%;
  }
}

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