So set status, set status, text small, okay. So we want to add the post comment dialogue right underneath here. So I'm going to make a relative container around this button here. So let's wrap this in .relative. And underneath the button, we can make something absolute in here. And let's just see if this works. Okay, so that looks like it's in the right place. So let's just add some classes here. So Z10, so it's in front of everything. With 104 is the width I have here.

This is just a simple explanation with no code.

Actually, let me just leave it in, it's okay. Make sure it's white. And we have this shadow dialogue that we added, rounded excel and margin top. Okay, let's see how that looks so far. Okay, we have to add with 104 or whatever I added here. Yeah, 104. So 104 divided by 4 is 26. tailwind.config, 104, 26. Let's add here 26rem and 104. Okay, npm run dev, that should be good.

Let's add here 26 rems and 104. Okay, npm run dev, that should be good. Okay, so let's make it a form and only has a textarea and two buttons. So let's do that. So this will be a form and let's give it some classes as well. Let's say space-y-4 and some px-4, py-6 or, yeah, six is fine. And this will be the textarea. So say textarea, name is post_comment, ID is post_comment. I have 30 columns and four rows and I have a bunch of classes here, which we'll add with full text-sm like we've been doing, bg-gray-100 for a slight gray, rounded-xl like

So that should be just above here. Yeah. So it's this one right here. So let's just grab this and paste it in here and let's change it to postComment. We actually don't even need the span. Actually we don't need the span at all. Adding a margin-left, let's remove it from here too. Actually we don't need the entire span because there is no icon. So let's remove it from there, let's remove it from here and it's called postComment. Let's see how this looks.

So let's remove it from there, let's remove it from here and it's called PostComment. Let's see how this looks. Okay. And the width I have on it is one-half. So instead of 32, it's one-half. Okay. And we can steal this attach button as well. So that's on the main page somewhere app.blade.php. So where's that attach? Yeah.

Let's make this relative. So that would be after this. So yeah, let's wrap this button in a relative container. Okay. And the classes should be the same. So this should be the same. So I'm just going to grab that and let's put it after our button here. And let's make sure to close that out. And let's give it a bigger Z index, just in case both of them are open at the same time. I actually have a smaller width as well, 76, which I don't think is defined.

And let's give it a bigger z-index, just in case both of them are open at the same time. I actually have a smaller width as well, 76, which I don't think is defined. So let's add that in here. So 76 divided by 4, 19. 76, 19 rems. And I should run my watcher, but keep doing npm run dev. Okay. So now nothing's going to show yet because there's nothing in there. I should have copied the form as well because it's the same. So let's grab that form.

So I'm going to grab all of this and it's pasted in. So in our form, and let's see how this works. And these should be indented as well. Okay. Let's see if this renders first. Okay. Looking good. Let's just give the options some space in between so we can do space-y for this parent div. So I have space-y-2.

div. So I have space Y too. Okay. And I don't think I have a marginTop. So let's remove that as well. Okay. And what else do we have here? We just have all the different statuses here. So to make them colored, since we're using this plugin, all we have to do is give it a class.

So I pasted in the rest of the options and their specific colors. It's looking pretty good. Next is the textarea. So let's work on that. So after this div, which is the parent div, yep, put a textarea here, name it updateComment, call rows 3 is what I have. Let's give it some classes. With full text, small bg-gray-100 rounded-xl placeholder-gray-900 border-none px-4 and py-2 placeholder add an updateComment optional. Okay.

And last we have the buttons. So pretty much the same as what we have here, but the name is different. Actually it's the same. No, no update and submit. So we can pretty much just copy what we have in here. So let's do that from app.blade.php. So I guess we can grab the entire container. So that would be this, this entire container here, let's grab that. And it's added after this, this one's attached. This one is update.

So again, let's look for that in the tailwind-forms plugin. And I guess we can just look at one of these and we can just grab one of them here. So let's grab this. And this goes underneath our container here. Let's make a new one. And space that in. Actually, it comes with its own div. Okay. And I have some extra classes here. So let's add those.

And I have some extra classes here. So let's add those. I believe it's bold by default. So let's not make a bold. Let's give it a name here. Say notifyVoters. And it's changed this notifyAllVoters. Okay. Okay. It looks good.

Okay. It looks good. And let's just give it the same bg-gray-200 background. So let's add a class here. Let's make it rounded as well. I have rounded here. And bg-gray-200. Okay. Okay. It looks pretty good to me.

So what episode is this? Episode six. Episode six. Let's say setStatusDialogs. And in the next video, we'll work on toggling the visibility of them using Alpine.