Creating Movie Series Template

#controllers/series.py
import config, copy, lib
from flask import render_template, redirect
from models.userdb import Userdb
from models.seriesdb import Seriesdb

class Series():
  def __init__(self):
    self.lib = lib.Lib()
    self.userdb = Userdb()
    self.seriesdb = Seriesdb()

  def get_series(self, id):
    vdict = copy.deepcopy(config.vdict)
    vdict['site_title'] = '​ភាពយន្ត​ភាគ'

    vdict['series'] = self.seriesdb.select(vdict['random_max_movie'], random=id)
    vdict['thumbs'] = self.lib.get_thumbs(vdict['series'], 4, type='movie')
    vdict['serie'] = self.seriesdb.select(id=id)
    date = (vdict['serie'][5]).strftime('%d/%m/%Y')
    time = (vdict['serie'][6]).strftime('%H:%M:%S')
    vdict['datetime'] = (date, time)
    vdict['author'] = self.userdb.select(username=vdict['serie'][7])

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

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

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

{% block content %}
<h3 class="post-title">{{ data['serie'][2] }} <span>{{ data['datetime'][0]  }}</span></h3>
<div class="author">ចុះ​ផ្សាយ​ដោយៈ <a href="/user/{{ data['author'][0] }}">{{ data['serie'][7]}}</a>
  {% if 'logged-in' in session %}
  <span>
    <a href="/dashboard/series/edit/{{ data['serie'][0] }}"><img src="/static/images/edit.png" /> </a>
    <a href="/dashboard/series/delete/{{ data['serie'][0] }}"><img src="/static/images/delete.png" /></a>
  </span>
  {% endif %}
</div>
<div class="country">ក្នុង​ជំពូកៈ <a href="/series/country/{{ data['serie'][3] }}">{{ data['serie'][3] }}</a></div>

<div id="series-wrapper" style="width:100%;"></div>
<script>
  $(document).ready(function(){
    series.setVideo(`{{ data['serie'][1]|safe }}`);
    series.setEpisodes('{{ data["serie"][1]|safe }}', '{{ data["serie"][8]|safe }}');
  });
</script> 

<div class="topnav " id="series-menu">
  <a href="/series/country/all">គ្រប់​ប្រភេទ</a>
  <a href="/series/country/ភាពយន្ត​អន្តរជាតិ">ភាពយន្ត​អន្តរជាតិ</a>
  <a href="/series/country/ភាពយន្ត​កូរ៉េ">ភាពយន្ត​កូរ៉េ</a>
  <a href="/series/country/ភាពយន្តចិន">ភាពយន្ត​ចិន</a>
  <a href="/series/country/ភាពយន្ត​ថៃ">ភាពយន្ត​ថៃ</a>
  <a href="/series/country/ភាពយន្ត​ខ្មែរ">ភាពយន្ត​ខ្មែរ</a>
  <a href="javascript:void(0);" class="icon" onclick="mobileMenu('series-menu')">
    <i class="fa fa-bars"></i>
  </a>
</div>

<div id="episodes"></div>

<div id='random-series'>
  {% for v in range(data['series']|length) %}
  <div class="series-wrapper">
    <a href="/series/{{ data['series'][v][0] }}"><img src="{{ data['thumbs'][v] }}" /></a>
    <a class="series-title" href="/series/{{ data['series'][v][0] }}">{{ data['series'][v][2] }}</a>
  </div>
  {% endfor %}
</div>

<div style="margin-top:20px;" id="disqus_thread"></div>
<script>
  (function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');
    s.src = 'https://khmerweb.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
  })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
{% endblock %}

{% block sidebar %}
<style>
  .img-outer{
    width:100%;
  }
  .img-outer img{
    width: 100%;
  }
  .img-outer img:hover{
    opacity:.7;
  }
  .img-outer div{
    position:relative;
    margin-bottom:10px;
  }
  .img-outer div:last-child{
    margin: 0;
  }
  .img-outer .star-name{
    display: block;
    position: absolute;
    top: 5px;
    right:5px;
    color: red;
    font: 14px/1.5 Oswald;
  }
  </style>
  
  <div class="img-outer">
  </div>
  
  <script>
  
  var starUrl = "https://script.google.com/macros/s/AKfycbzifjjj43uwlbd2IxkovhnUrz5nq17Xq9L5FAZkU40HpXzKa5M/exec?start=1325437200&end=1325439000&callback=setPicture&v=7";
  
  $.getScript(starUrl);
  
  function setThumb(postContent){
    var div = document.createElement( 'div' );
    div.innerHTML = postContent;
    var img = div.getElementsByTagName("img");
    
    if(img.length>=1) {
      return img[0].src;
    }
    else{
      return ("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBGvu_n4woKRRSiU6LKIG-eaUudNsxR1Tlx1vmC38mitCvUIYXQU21OWTwybhdXimPvlhutf6TrIhrD7lNrmrp-oGmydHKotB70upJHk5y0kLT2DTOHwhQ8WrbctudlZ8xGFOE9VoCoEXf/s1600/picture.jpg");
    }  
  }
  
  function setPicture(postList){
  
    for(var i =0; i<postList.length; i++){
      var postContent = postList[i].content.text;
      var thumb = setThumb(postContent);
      var postTitle = postList[i].title.text;
      $(".img-outer").append('<div><a><img src="'+thumb+'" /></a><a class="star-name">'+postTitle+'</a></div>');
    }
  }
    
  </script>
{% endblock %}

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