All right, so now at least partially, why don't we get started building the page to view a single idea. So within the browser, yeah, I can click on one of these and it does load the page, but we haven't yet created the view. Okay, so let's go into idea controller. And we already have a show action. All right, sounds like we're gonna need to show an idea. So that will return a view called Idea Show

All right, sounds like we're gonna need to show an idea. So that will return a view called Idea Show that doesn't exist yet, and then we will pass through the corresponding idea. All right, let's do that. Now it's gonna be within my views idea folder, and it'll be show blade PHP. Let's add our layout, show the idea, and yeah, this would be idea title. So give it a refresh. And sure enough, this is the idea we are viewing.

So give it a refresh. And sure enough, this is the idea we are viewing. So if I come back and I pick a different one, whatever that says, uh, now we're in business. All right, let's just start working on the, uh, the markup. We'll clear this out. And I'm gonna begin with a wrapping div. Once again, just a little bit of padding and then a maximum width. Next, within an H one.

and then a maximum width. Next, within an H one. We'll give it a class, make it bold a little larger. This will be once again the idea title, and then I know I want the description. And this is a great, uh, case to use that card component we created. So within a diviv, I'm gonna add a few extra classes. Again, just setting the text color. Um, we'll come back to pros in just a minute.

Again, just setting the text color. Um, we'll come back to pros in just a minute. Uh, we'll set a maximum width of none and we'll make it a pointer so you can click on it and more on that just in a little bit. Okay, so now I can say idea description. Let's have a look in the browser. All right, there we go. I'd like a little space, uh, below it though, or above it. So let's add a class of MT six. There we go. So we have our title, and then, uh,

So let's add a class of MT six. There we go. So we have our title, and then, uh, within a card we have the description itself. You get the idea. All right, let's keep going. So next, why don't we do like a little navigation area at the top, something like this. Um, I'm gonna do flex justify between 'cause we'll have something on the left and something on the right. And this will be like an anchor tag to go back.

and something on the right. And this will be like an anchor tag to go back. So we'll say back to ideas. This will have a route of idea index. Let's have a look. Yep. Back to Ideas. Takes us all the way back. Good. All right, next. I'd like a little arrow though. So I'll show you a little tip. Uh, behind the scenes, I've added just a handful of icons to this project, but here's what you can do. You can store the icons

to this project, but here's what you can do. You can store the icons as blade components rather than images. So notice I have within my components directory an icons folder, and then just a handful of icons that are just SVG. And what this allows you to do is style those SVGs and configure them. You can set colors, you can set hover styles and things like that. It just gives you a little more flexibility to control, um,

styles and things like that. It just gives you a little more flexibility to control, um, how they are presented. Anyways, if I were to come back, yeah, now I can reference one of those icons. So in this case, I have one called Arrow Back, come back, refresh. There, there we go. Let's now style this a little bit and I'm just being a time saver. We're gonna set display of flex, a little space in

and I'm just being a time saver. We're gonna set display of flex, a little space in between the text, make it smaller and a little more bold. And yeah, you get something like that back to ideas. Cool. Okay, so now on the right side, yeah, I would have a button like edit idea, um, maybe I'd have a button to delete something like that. And you'll see because of justify between. And also let's do item center. Uh, that will push this to the right side as you see there.

And also let's do item center. Uh, that will push this to the right side as you see there. Okay, so immediately we can see there should be a little space in between there. All right, easy enough. Let's add, uh, a little space in between each one. Or I could even use Gap. Actually, I probably should use Gap like that. And then we will align them. All right, come back. Edit idea, delete. Cool.

And then we will align them. All right, come back. Edit idea, delete. Cool. Uh, next edit idea should probably be a button and maybe we can even use that button outline style. All right, there you go. Looks good. Now, just like before, I'm gonna have a little icon here and I think I have one called External. Yeah, this just represents, um, just an icon that represents something, uh, being external, even though it's probably not quite right.

that represents something, uh, being external, even though it's probably not quite right. It's the icon I want here. All right, so back and there you go. Looks good. And then down here, we know this will ultimately be a form, right? So I'm gonna give this a class of button, button outlined, but I am gonna override the text to be reddish. There you go. That's looking pretty good to me, I think. Okay. And yeah, like I said, we know

There you go. That's looking pretty good to me, I think. Okay. And yeah, like I said, we know that ultimately this will be a form, right? That will make a delete request to destroy the idea. So if you wanna do that right now, we can. This is gonna do, do post action is gonna be, uh, let's do a named route route idea. Do destroy. We need to make sure we include the CSRF field and a method field to indicate, um, how we want

We need to make sure we include the CSRF field and a method field to indicate, um, how we want the framework to treat this request. Treat it like a delete request was made. All right, so that doesn't exist yet. We could do it super quick if we want. We'll see how quickly we can do it. Uh, respond to a delete request to this idea that will hit a destroy action. Yep. Let's go into idea controller. Find destroy.

that will hit a destroy action. Yep. Let's go into idea controller. Find destroy. We can say idea delete, but make sure we authorize that this is allowed and that will be in an authorization episode. Uh, and then we can return a redirect back to view all of our ideas. So we want something like that. Or I can say return to route would be an option as well. Idea that index. All right, right. I think that's right.

to route would be an option as well. Idea that index. All right, right. I think that's right. Let's give it a shot. Come back. Let's see. Can I delete this one? Yep. And now it's gone. All right. So just a little, little side quest there, but now our delete functionality works. Cool. So let's see down here. Maybe all of this should be wrapped within its own div as well paste that in and that way I can give it a little, uh, styling like this.

as well paste that in and that way I can give it a little, uh, styling like this. Um, a little march on top of eight. And then some space in between these come back refresh. Yeah, I think now it's starting to look, um, a little bit better. Back to our ideas. Let's look at this one. Yeah, I like that. Okay, so next, after the title, let's see what we can do here.

Okay, so next, after the title, let's see what we can do here. Uh, maybe we should have our status label, maybe timestamps, stuff like that. Let's do this. Let's give it a class just to push it down from the top. We'll make it flex and then a a little gap in between them. Okay, so first up, I'm gonna use our status label component. The status is gonna be equal to, and I can use binding here. Idea, status, value.

The status is gonna be equal to, and I can use binding here. Idea, status, value. And then the, uh, label itself will be idea status label. By the way, we can also just pass the status directly and let the component be in charge of that. And that might be a refactor we wanna make. Come back and now it says pending. Cool. Next, why don't we have, um, the timestamp itself. So this will be muted and a little bit smaller. And I can say once again,

So this will be muted and a little bit smaller. And I can say once again, like we did on the homepage idea created at diff for Humans. Come back. And there you go. All right, so we have our title, our current status, how long ago it was, uh, created. And maybe we even changed that to how long ago it was last updated. So we can see in real time like, oh, this was updated only 20 minutes ago.

So we can see in real time like, oh, this was updated only 20 minutes ago. Uh, so that could be a good idea. So now I know we're gonna have, below this, we're gonna have, of course, we're gonna have an image too that we will add support for. But below this we will have steps which are to-dos basically. And then we will also have maybe relevant links for this card.

And then we will also have maybe relevant links for this card. So, uh, I'm gonna hold off on this steps 'cause we're gonna do that all at once. I'm gonna hold off on the image, but I think we can get the links done. So let's do that now. Uh, I think we can place that maybe right here. So let's add maybe an H three once again for our links.

So let's add maybe an H three once again for our links. And then yeah, we will have a section where we say, all right, let's loop over all of the links. So I can say for the idea links as link. Then why don't we render it as part of a card once again. So I can say, uh, link itself. Yeah. So at the moment though, if I switch back, oh, it looks like we already have one. Cool. So maybe the factory gave us one on the fly. Perfect.

it looks like we already have one. Cool. So maybe the factory gave us one on the fly. Perfect. However, if we didn't have any, we would still render this. So we might wanna wrap this in something that says, well, if we have any links at all, only on that condition should we render this. So let's check if we have the count. And yeah, only on that condition do we bother rendering this. Alright, next it would be cool if the card linked

that condition do we bother rendering this. Alright, next it would be cool if the card linked to the link, right? So we see the link text here and that's fine, but also, uh, I wanna click on it. So let's say EF will be the link refresh and now I should be able to click on this and yeah, it would take me to gibberish, right? Good. Let's do a couple things.

and yeah, it would take me to gibberish, right? Good. Let's do a couple things. I'm gonna add some classes here that get merged in. Just gonna change it to the green primary color, make it a little more bold. Um, stuff like that, flex and gap, this would be useful. Uh, for example, if we wanna add, uh, something to indicate that this is gonna take the user away. So once again, maybe I can reference that external link. There it is. Come back, refresh. And now it's green.

So once again, maybe I can reference that external link. There it is. Come back, refresh. And now it's green. We have a little button here. It just makes it a little bit more clear that we can click on it. Next. Maybe let's give this a little margin on the top to push it down. We might even want to be a little more consistent with the spacing in between these, but nonetheless, this is looking pretty good to me, I think.

with the spacing in between these, but nonetheless, this is looking pretty good to me, I think. Now let's imagine, let's go to table plus into ideas. And I think this is our current one. So yeah, let's imagine it has more than one idea. We'll do layer cast.com. Okay, so now if I were to come back and give this a refresh notice, there's no spacing there. So let's just add a little, uh, fix here maybe. Yeah, right here. Why don't we say space Y two? Yeah.

So let's just add a little, uh, fix here maybe. Yeah, right here. Why don't we say space Y two? Yeah. And now we just have a little more breathing room. Okay, so I'm happy with how this is looking, but we still have quite a bit more work to do. I need to add support for images, in which case it would display right here. I want support for actionable steps so that we can toggle things that need to be done. Is it completed, is it not?

that we can toggle things that need to be done. Is it completed, is it not? We need to implement the edit idea modal so that it will pop up big here and that'll be its own lesson entirely. Um, once we do add support for images, I wanna display them here. Yeah, we just got a bunch of stuff to do. We need to edit a profile or not done by any stretch. So I'll see you in the next episode.

We need to edit a profile or not done by any stretch. So I'll see you in the next episode.