Project 4: Movie Watchlist: Create the movie details page (+181, -2)

            
                
            
            index 41e967f..97db264 100644
--- a/curriculum/section14/lectures/10_create_page_movie_details/start/movie_library/routes.py
+++ b/curriculum/section14/lectures/10_create_page_movie_details/end/movie_library/routes.py
@@ -45,13 +45,19 @@ def add_movie():
 
         current_app.db.movie.insert_one(asdict(movie))
 
-        return redirect(url_for(".index"))
+        return redirect(url_for(".movie", _id=movie._id))
 
     return render_template(
         "new_movie.html", title="Movies Watchlist - Add Movie", form=form
     )
 
 
+@pages.get("/movie/<string:_id>")
+def movie(_id: str):
+    movie = Movie(**current_app.db.movie.find_one({"_id": _id}))
+    return render_template("movie_details.html", movie=movie)
+
+
 @pages.get("/toggle-theme")
 def toggle_theme():
     current_theme = session.get("theme")
        

            
                
            
            new file mode 100644
index 0000000..6d3469d
--- /dev/null
+++ b/curriculum/section14/lectures/10_create_page_movie_details/end/movie_library/static/css/movie_details.css
@@ -0,0 +1,93 @@
+.container {
+  max-width: 50rem;
+  margin: 0 auto;
+}
+
+.movie__header {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 2.5rem;
+}
+
+.header__row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.movie__name {
+  display: flex;
+  align-items: center;
+}
+
+.movie__rating {
+  margin-left: 1rem;
+}
+
+.movie__watched {
+  display: flex;
+}
+
+.watched__link {
+  color: inherit;
+  text-decoration: none;
+  font-weight: 600;
+}
+
+.watched__link:hover {
+  text-decoration: underline;
+}
+
+.movie__edit {
+  display: flex;
+  text-decoration: none;
+  align-items: center;
+  margin-left: 1rem;
+  color: inherit;
+}
+
+.movie__edit:hover {
+  text-decoration: underline;
+}
+
+.pencil {
+  width: 1em;
+  height: 1em;
+  margin-left: 3px;
+}
+
+.movie__tags {
+  list-style: none;
+  display: flex;
+}
+
+.movie__tag {
+  padding: 3px 8px;
+  background-color: var(--tag-colour);
+}
+
+.movie__tag:not(:first-of-type) {
+  margin-left: 1rem;
+}
+
+.movie__video {
+  width: 100%;
+  aspect-ratio: 16/9;
+  margin-bottom: 2.5rem;
+  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25),
+    0 15px 35px 0 rgba(0, 0, 0, 0.25);
+  border-radius: 4px;
+}
+
+.movie__description {
+  margin-bottom: 2.5rem;
+}
+
+.movie__meta {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.list__item {
+  margin-top: 1rem;
+}
        

            
                
            
            index bf09cb9..f59f74c 100644
--- a/curriculum/section14/lectures/10_create_page_movie_details/start/movie_library/templates/index.html
+++ b/curriculum/section14/lectures/10_create_page_movie_details/end/movie_library/templates/index.html
@@ -28,7 +28,7 @@
                             <p class="table__movieDirector">By {{ movie.director }}</p>
                         </td>
                         <td class="table__cell">{{ movie.year }}</td>
-                        <td class="table__cell"><a href="#" class="table__link">View</a></td>
+                        <td class="table__cell"><a href="{{ url_for('pages.movie', _id=movie._id) }}" class="table__link">View</a></td>
                     </tr>
                 {% endfor %}
             </tbody>
        

            
                
            
            new file mode 100644
index 0000000..bfb69dc
--- /dev/null
+++ b/curriculum/section14/lectures/10_create_page_movie_details/end/movie_library/templates/movie_details.html
@@ -0,0 +1,80 @@
+{% from "macros/svgs.html" import star, pencil %}
+
+{% extends "layout.html" %}
+
+{%- block head_content %}
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/movie_details.css') }}" />
+{% endblock %}
+
+{% block main_content %}
+<div class="container">
+    <header class="movie__header">
+        <div class="header__row">
+            <div class="movie__name">
+                <h1>{{ movie.title }}</h1>
+                <div class="movie__rating">
+                    {{ movie.rating }}
+                </div>
+            </div>
+            <div class="movie__watched">
+                {% if movie.last_watched %}
+                    <p>
+                        Last watched: <a href="#" class="watched__link">
+                            <time datetime="{{ movie.last_watched }}">{{movie.last_watched.strftime("%d %b %Y")}}</time>
+                        </a>
+                    </p>
+                {% else %}
+                    <p><a href="#" class="watched__link">Not watched yet</a></p>
+                {% endif %}
+                <a class="movie__edit" href="#">Edit {{ pencil("pencil") }}</a>
+            </div>
+        </div>
+        <div class="header__row">
+            <ul class="movie__tags">
+            {% for tag in movie.tags %}
+                <li class="movie__tag">{{ tag }}</li>
+            {% endfor %}
+            </ul>
+        </div>
+    </header>
+    {% if movie.video_link %}
+    <iframe
+        class="movie__video"
+        src="{{ movie.video_link }}"
+        title="YouTube video player"
+        frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowfullscreen>
+    </iframe>
+    {% endif %}
+
+    {% if movie.description %}
+        <p class="movie__description">{{ movie.description }}</p>
+    {% else %}
+        <p class="movie__description">No description yet. <a class="link" href="#">Add one?</a></p>
+    {% endif %}
+    
+    <div class="movie__meta">
+        {% if movie.cast %}
+            <div class="movie__casting">
+                <h2>Casting</h2>
+                <ul class="list">
+                {% for actor in movie.cast %}
+                    <li class="list__item">{{ actor }}</li>
+                {% endfor %}
+                <ul>
+            </div>
+        {% endif %}
+        {% if movie.series | length %}
+            <div class="movie__series">
+                <h2>Series</h2>
+                <ul class="list">
+                {% for movie_in_series in movie.series %}
+                    <li class="list__item">{{ movie_in_series }}</li>
+                {% endfor %}
+                <ul>
+            </div>
+        {% endif %}
+    </div>
+</div>
+{% endblock %}