Okay, so here is where we left off. Let's switch back to PHPStorm, and we're going to slowly turn this into something workable. Let's begin by wrapping the whole thing in a component. What do we want to call it? How about... It's some kind of ConfirmationModal, so how about that? All right, let's go ahead and do that now. ConfirmationModal, paste it in. Okay, so now if I come back and refresh, I should get the same thing, and I do. Without it, we see our site.

Okay, so now if I come back and refresh, I should get the same thing, and I do. Without it, we see our site. With it, we see our modal. All right, next I want... Let's do a couple things first. Buttons, these are prime and obvious candidates for a basic utility Blade component. So here's what I mean by that. If while we're here, I create another one, and I'm just going to call it button. Keep it generic. I'm going to paste in that whole thing, and the only thing I'll change here is the slot.

All right. Anyways, I now want to make this dynamic. Of course, we never want to hard code this. So it sounds like this would be your title. This would be the body. And then this section would be your footer, right? So let's save that for now. If I come on back, it's all going to blow up. Because now we're trying to reference variables that aren't available to the component. Okay.

Because now we're trying to reference variables that aren't available to the component. Okay. Let's come on back here. And now you could either do it up here. So foo, body is bar, footer is footer. And yeah, that would work, I think. Yeah. But we're going to need HTML there. So I would rather do this using x-slot, like this. x-slot name is title.

So I would rather do this using x-slot, like this. x-slot name is title. And whoops, let's hide that. We could either accept h1 there, or just use what the component provides. So we have something like that. And then what did we call this? body, continuing will delete your account permanently. And then finally, one more for the footer. And again, this is where we would add whatever links are necessary. So come on back, and I'll paste that in here.

And that's what we want here. So now we need some way to control the toggling of the modal. We're going to use Livewire and Alpine for this. We can take a look at alpine.js on their GitHub page. And again, I'm just going to grab this through their CDN here. And it should initialize itself. All right, let's go back to layout. And I'll place it right up here. Something like that. Okay, so now if I switch back, yeah, we can do some nifty things like if I set xdata on

Something like that. Okay, so now if I switch back, yeah, we can do some nifty things like if I set x-data on displayed component, we could initialize it and say, well, maybe it shows, maybe it doesn't. So show is going to be the source of truth for if we display the modal. So I could say x-show equals show. So set the display. And what do we have going on here? PhpStorm. Attribute is not allowed here. Liar.

Attribute is not allowed here. Liar. Honestly, I feel bad for phpStorm trying to keep up with all of the libraries coming out and it must be a bit of a nightmare for them. But anyways, we are saying set the display of this div equal to the Boolean associated with this property. So in this case, we're saying set the display to false. That means if I come back and give it a refresh, I don't see anything at all. But for example, I could open up the terminal here, and you'll see it's still there. So we see the modal.

But for example, I could open up the terminal here, and you'll see it's still there. So we see the modal. And I can even do things like this. I can use $0 to, I think in Firefox, I think all of them at this point, $0 will always give you the element that you have currently selected. So I have an aside here. Now $0 is the aside. That's a really important one to keep in mind. Anyways, if we go back to our modal there, we can do things like this. Alpine exposes this __x, and that gives you access to the Alpine