Next, whenever we're specifically on our watch list, we're not gonna wanna show that this movie is in their watch list. Instead, we're gonna want to add the ability

to mark a movie as watched. I'm gonna add that elsewhere as well, but primarily it would be good to have it in here since we won't have that in your watch list button. So let's go ahead and get back into our text editor

and we're gonna wanna jump into our card component. So let's scroll back down to our movie card. We are still going to need movie.watchlist populated

in order to determine if the movie's been watched for our watch list page, but we're not gonna want this actual button to show. So since we're only going to add in

the actual is a movie watch toggle on our watch list page, what we can do is an if slots.action. If we have an action slot, then we can go ahead and render that out.

So slots.action, and then switch this to an else if. And that will allow us to essentially take this form and move it out into our watch list page

since this is the one and only page that we're gonna want this form to be on. We can then change our movie card from a self-closing component to a normal one, end it.

And then inside of here, we can do an at slot action, end the slot and paste this form in. To make things a little bit easier, we can also wrap the first watch list item

and call that watch list. So we'll do at let watch list equals movie.watchlist at zero to grab the item at the zero index. Our ternary here for our button text

would then switch to watch list.watchedAt. So if we have a watched at value, then that means that the movie was watched. So for our text, we can then say mark as unwatched

or something of a sort. And then if the movie has not been watched, then we'll say something like mark as watched. And right now we don't have a route for this actual toggle. So let's go create that next.

Before we do, let's just make sure everything's rendering out okay on our page. Cool, so we have marked as watched, marked as watched because we don't have any marked as watched. Let's jump back into our routes file.

We've already defined a handler for this. We just haven't actually done anything with the handler. So we'll do router.host watchlists, movie ID and toggle watched.

Specify that we wanna handle this with our watch list controller and the toggle watched method is watchlists toggle.watched. Give that a save and it'll probably break it down.

Yep, and let's go ahead and jump into our watch list controller and handle that real quick. So scroll on down to our toggle watch method.

We're gonna want our response, rams and auth. And first thing we're gonna wanna do is grab our watch list. So we'll do const watch list equals await watch list

dot query where, and we can scroll up here and grab our user and movie ID and paste that in down here, where movie ID and user ID

and grab just the first item. Now, if we're within this method, we should actually already have a watch list item. So we could do first or fail here so that we get a 404 error

if the watch list item cannot actually be found. So then with that watch list, we just wanna do an if watch list dot watched at. So if there's a value for watched at,

then we just want to clear that out. So watch list dot watched at now equals null. Otherwise watch list dot watch at equals date time.

Import that from Luxon dot now. Then we'll just await watch list, save and return response redirects right on back.

Jump back into our watch list page. And now instead of watch list dot toggle, we wanna watch list dot toggle dot watched. Params should be the same. So we can leave that as is, give that a save.

Let's jump back into our browser and let's give it a test. So let's marked as watched a movie. Cool, so now our text says marked as unwatched. We can click it again. It's back to marked as watched.

Click it again, back to unwatched. Awesome, do that one there as well. And this one, cool. So everything does seem to be working there A-okay. Now, if you would like some extra homework with this,

go ahead and try adding in an additional filter specifically for the watch list page that allows you to limit to either movies that are watched or unwatched for an authenticated user.

Before we round out this lesson though, we do need to add in our middleware. So if we jump back into our routes, right now we don't have any middleware applied to our watch lists. For all three of these,

really we just want the user to be authenticated in order to perform these actions. So we could individually add the middleware one by one to each of these, or we could create a router dot group,

move these three routes into that group. And we do have a variation with our prefix. So we'll leave that off because this one's watch list singular and this one's watch list plural and this one's watch list plural.

So we'll leave prefix off and instead just do as watch lists and then use middleware.off

to ensure we have an authenticated user in order to be able to use these routes. And then since we have as watch list as a name prefix for the group,

we can remove watch lists from the name here. Give it a save, jump back into our browser real quick, just make sure everything works. Looks good there. Do our filter vest there and awesome.

Everything still seems to be working A-okay.