Okay, one more thing I want to do with Alpine.js, and that is to make some models. So I want a model for this play trailer button, instead of just linking to the video, and I want models for these images. So let's go ahead and work on that. So back to our code. So in my show.blade.php, I'm gonna paste in some code for the CSS for the model, because I don't want this video to be about the CSS, but I'll explain it after I paste it in. So I'm gonna paste it after the play trailer button, but you can put it wherever you want. So I'll just paste it in, and uncomment it, and let me just see if this works. So this should have the model in a visible state, and again this is just CSS. So let me explain the CSS. So we have an inline style to make the background, that dark background here,

other things to take note is we're pinning it to the top, we're pinning it to the left, and we give it a full width and a full height, because we wanted to take the entire screen, and those are the most important parts. And now it functions like a model. So let's go ahead and toggle the visibility of this model using Alpine. So let's go ahead and define our state within Alpine. So this div is a good place to define the state, because it houses the button and the model I just pasted in. So this div ends down here, and it encapsulates the button and the model. So let's put it within here. So x-data equals an object, and let's call it isCreatorModelVisible, and say false initially. And the thing we want to toggle is the model, so we can add

So xData equals an object, and let's call it isCreatorModelVisible, and say false initially. And the thing we want to toggle is the model, so we can add xShow on here. xShow equals isCreatorModelVisible, and now this should be hidden. Okay, and when we click the button we want it to be visible, and there's an X button on the model, and that will close it. So let me just grab this, and we have a link here, but I'm gonna put the button back. So that's why I commented it out, because I knew I was gonna use it again later. So let's put the button back, and let me just reformat this button. And let's put a click event, and let's just set isTrailerModelVisible equals true. And let's hide it when we click the X button. So that should be somewhere here. It's called times here. So

and let's just set isTrailerModelVisible equals true. And let's hide it when we click the X button. So that should be somewhere here. It's called times here. So let me just reformat this again, and let me put isVisible equals false when we click it. And while we're here, let's do it for the escape key as well. So key down.escape, and we want it on the entire window, and that should be good. So let's try if this works. So let's click the button. That should bring up the model, and it does, and the X or escape should close it. Cool. So now all we have to do is replace the YouTube link, and I believe it's called GameTrailer. So we have it up here in the anchor tag. Yeah, it's called GameTrailer. So let me grab that, and let's replace this source here.

here in the anchor tag. Yeah, it's called GameTrailer. So let me grab that, and let's replace this source here. And that should do it. Okay, playTrailer, and that doesn't work. So if you look at the error here, you'll see that this is the URL we're trying to access, and the URL for embedding videos is different from just a normal YouTube video. So let's change that. So if I go into my GamesController, and I believe it was in the show method, or no, it was in the format method, this one, we have to change watch to embed, and hopefully this does the trick. Okay, let's try again, and playTrailer, and there it is. So this doesn't look like a trailer, and what I'm doing here is I'm describing the first video.

close when we close the window. So let's fix that. So it's still playing right now. You can see my Chrome icon. There's still sound playing. So to fix that, instead of using x-show, which just adds a CSS property that sets display none, we can use x-if, which actually removes it from the DOM. So let's look at the docs here. Let's go to x-if, and it's the same as x-show, but we have to wrap the code in a <template> tag. So let's do that. So we want to wrap this in a <template> tag, and we'll put the condition on that <template> tag instead. So I'm going to put a <template> tag here, and say x-if equals isTrailerModalVisible. Okay, and let me just indent this, and close the <template> tag. Okay, and this should work still. But now, hopefully, when I close it, you'll see

has the proper scope, and has access to both the modal and the button, or in this case, the image that toggles the visibility of it. So I'm just going to put it within the images container here. So let's go ahead and do that. So X, actually, let me reformat this. Okay, so let's put X data equals, and again, same process. I am going to make one for the visibility of the image modal. So isImageModalVisible? Say false by default. And we also need to keep track of the currently opened image, and the URL to that. So we need a new one called image, and by default, let's set it to an empty string. And let's set the X show on the modal. So this, so just to be consistent, I'm going to use templates as well, and use X if, but X show will work here, since

string. And let's set the x-show on the modal. So this, so just to be consistent, I'm going to use templates as well, and use x-if, but x-show will work here, since it's not a video. But let's just make a template. x-if equals isImageModalVisible? Okay, and let me just close this. Okay, and let me re-indent this. And I forgot the closing tag here. Okay, and let's make the escape, or the close button work. So let's grab it from the other one as well, but make it work for this one. So I'm going to grab these two, and put it down here. Where is it? So times, it was the first one, and here's the second one. So again, let me reformat this. Okay, and I'm going to paste in those two, and we just have to change the name of these variables. So this is, isImage

second one. So again, let me reformat this. Okay, and I'm going to paste in those two, and we just have to change the name of these variables. So this is, isImageModalVisible? Okay, now the thing that toggles it is the actual image. So we have to add a click handler on the image. So let's do that. So that would be up here, and that would be this anchor tag here. So we no longer need this. So let's just make it a hash. And again, I'm going to reformat this. And when we click it, let's prevent the default. And we need to do two things here. So I'm going to do multiple lines. And the first thing is just to toggle the visibility of the modal. So isImageModalVisible equals true. And the other thing I need to do is set the currently open image. So image equals, and we have a link to two sizes.

modal. So is imageModalVisible equals true. And the other thing I need to do is set the currently open image. So image equals, and we have a link to two sizes of screenshots. One is screenshotBig, and one is screenshotHuge. So my resolution is not high enough to show the details of the huge image, but if you want, you can put it in here. So this should work. But I think in the end, I'm just going to use the same size as what we see here. So I'm just going to use big. So let's just see if this works. Okay, if I click one, oh, I have to obviously render it here. So let's do that. So that would be where it says image goes here. This is just going to be an image. So image. And the source, we can bind it to the piece of state that we

that. So that would be where it says image goes here. This is just going to be an image. So image. And the source, we can bind it to the piece of state that we have called image. And we'll say screenshot here, and this should work. So I'm going to click this, and it does show the larger image. Cool. But like I said, I'm just going to make it the same size. So I won't use huge here. Okay, let's try that again. And that looks pretty good to me. And escape works, and it does. Awesome. So there you have it, guys. We've used AlpineJS to make two models in our game details page, one for a video or a trailer, and one for the screenshots here.