Convert local_playlist to flask framework

youtube/templates/local_playlist.html

@@ -0,0 +1,57 @@
+{% extends "base.html" %}
+{% block page_title %}{{ playlist_name + ' - Local playlist' }}{% endblock %}
+{% import "common_elements.html" as common_elements %}
+{% block style %}
+    main{
+        display:grid;
+        grid-template-columns: 3fr 1fr;
+    }
+
+
+        
+    #left{
+        grid-column: 1;
+        grid-row: 1;
+        
+        display: grid;
+        grid-template-columns: 1fr 800px auto;
+        grid-template-rows: 0fr 1fr 0fr;
+    }
+        .playlist-title{
+            grid-column:2;
+        }
+        #playlist-remove-button{
+            grid-column:3;
+            align-self: center;
+            white-space: nowrap;
+        }
+        #results{
+            
+            grid-row: 2;
+            grid-column: 2 / span 2;
+            
+            
+            display: grid;
+            grid-auto-rows: 0fr;
+            grid-row-gap: 10px;
+            
+        }
+        .page-button-row{
+            grid-row: 3;
+            grid-column: 2;
+            justify-self: center;
+        }
+{% endblock style %}
+
+{% block main %}   
+    <div id="left">
+        <h2 class="playlist-title">{{ playlist_name }}</h2>
+        <input type="hidden" name="playlist_page" value="{{ playlist_name }}" form="playlist-edit">
+        <button type="submit" id="playlist-remove-button" name="action" value="remove" form="playlist-edit" formaction="">Remove from playlist</button>
+        <div id="results">          
+            {% for video_info in videos %}
+                {{ common_elements.item(video_info) }}
+            {% endfor %}
+        </div>
+    </div>
+{% endblock main %}

youtube/templates/local_playlists_list.html

@@ -0,0 +1,16 @@
+{% extends "base.html" %}
+{% block page_title %}Local playlists{% endblock %}
+
+{% block main %}
+    <ul>
+        {% for playlist_name, playlist_url in playlists %}
+            <li><a href="{{ playlist_url }}">{{ playlist_name }}</a></li>
+        {% endfor %}
+    </ul>
+{% endblock main %}
+
+
+
+
+
+