Mazel's workflow revolves around the concepts of a layout and a template. In the previous episode, we created a layout called layout.html, and this is where essentially the overall structure of our HTML resides. It's very bare-bones at this point, but we will add more here. The important thing here is that we use this content element inside of the body. That is where the content of our templates will go. So inside of our invoice approval template, we reference our layout using x-layout. The name layout inside of the element directly references the layout.html file. And then of course our content is then rendered inside of the body. So whenever we view this in the browser, we see, of course, hello world. Now a template is made up of two distinct parts. The first is the

inside of the body. So whenever we view this in the browser, we see, of course, hello world. Now a template is made up of two distinct parts. The first is the front matter, and then the second is our HTML. Now a template doesn't need front matter because we see that it works without it, but it's not very useful. So front matter is a YAML style block of variables that we can define. So this means if we wanted a title variable that we could use inside of our template, we could simply create that variable name followed by a colon, and then we would need to provide the value. So the title for this would be invoice approval notification. And then we can use that variable directly here inside of our template. We do so using a pair of curly braces, and inside of those we simply say

notification. And then we can use that variable directly here inside of our template. We do so using a pair of curly braces, and inside of those we simply say page.title in this case. The browser is supposed to automatically update, but it didn't, so let's force that. And we can see invoiceApprovalNotification is now displayed in our page. Now this title variable is, of course, available inside of our template, but it is also available inside of our layout. So for our title element inside of our head, we could still use it here by saying page.title. And if we view our tab, we now see invoiceApproval, and it would say notification, but of course it's being cut off for space. But it is indeed being used there. So this means that we can

invoice approval, and it would say notification, but of course it's being cut off for space. But it is indeed being used there. So this means that we can create a layout page that can be used for creating emails with the same feel, but we can provide a slightly different look. Like for example, for our invoice approval, let's say that we wanted to use a color scheme based upon blues. So we could say that we want the background color to be bluish, and so this is where we can start to use Tailwind's utility classes. So we can say that the body class is going to be bg-blue-50, which means that inside of our layout we can directly access that body class variable. So that we could have our class attribute, and then we can say page.bodyClass. However, whenever we save this,

directly access that body class variable. So that we could have our class attribute, and then we can say page.body class. However, whenever we save this, we don't see anything updated in the page, and that's because currently our template is not set up to use Tailwind. So what we need to do is add a style element where we use a variable on our page called simply CSS. So all of the CSS that is going to be generated for our email comes from this CSS variable. It's not something that we define, it is something that is automatically provided. And we can see that the backgroundColor automatically changed. So inside of our templates, if we create a new file, let's call this documentApproval, we can copy what we have inside of our invoiceApproval. And we just need to make a few

templates, if we create a new file, let's call this document_approval, we can copy what we have inside of our invoice_approval. And we just need to make a few changes. So the title will say document_approval_notification, but instead of blue, let's say that we want this to be a brown. And we of course need to open up this file, so we can go back to our listing directory. We now see document_approval. Let's open that in a new tab, and we will see, well, that's not necessarily brown, but it's definitely not blue. And of course, the page title is different. So with this in mind, we can start to build our HTML email. And we're going to do so using a table because, you know, as I mentioned, this is a tedious process, and in order to support a wide array of email clients,

we're going to do so using a table because, you know, as I mentioned, this is a tedious process, and in order to support a wide array of email clients, it's best to use a table here. So we will use a table, but I want to use some Tailwind classes. So we'll say that we'll have a full-width. We'll add an extra-large shadow with rounded corners. Then we will have a row that will have a cell. Let's add some padding here, and we're gonna make this text stand out. So we're gonna have a different background-color that is along the lines of the blue and amber themes, but it's gonna be darker, and of course the text is going to be white. So let's go to the invoice approval because that's what we are playing with here. So we'll add some padding, the BG blue. Let's just go

white. So let's go to the invoice approval because that's what we are playing with here. So we'll add some padding, the BG blue. Let's just go straight with the 900 there. The text will be white, and then the top corners will be rounded. And so inside of here, we will have our title. So we'll have an H2, some top margin, some bottom margin. Let's make the text pretty large because we want the color scheme to kind of signify that this is for the invoice or this is for the document, but we of course also want the text to be very clear as to what this is for. And let's say that the text will be centered, and so that here we will include our page title. So that looks good. The font could be a little bit different, so let's do this. Inside of our layout, in addition to

so that here we will include our page title. So that looks good. The font could be a little bit different, so let's do this. Inside of our layout, in addition to our body class, let's say font-sans. That way it will apply to everything inside of the page. Well that looks alright. Now we just need to add the bottom part of this, which is going to have a background color of white, and then we'll just have some text that says a particular User approved the invoice and a link to go to that invoice so that AR can process it. So we'll have another row with another cell. We'll have the same amount of padding, but the background will be white, the bottom corners will be rounded, and of course we want the text to be centered. We'll start with some boilerplate text, username, approved the

the bottom corners will be rounded, and of course we want the text to be centered. We'll start with some boilerplate text, username, approved the invoice. I guess we should do this. Let's have this inside of a <p> element, and then we will have another <p> element that will contain the link. So we'll have an <a> element, the href, we'll have invoice-approval.company.com, then we'll have a placeholder like invoice ID, but most importantly we will have the text that says view invoice. Now we should be seeing that updated, but that's not updating for some reason, although it looks like our project crashed. This happens quite a lot, and I haven't really just spent a lot of time to figure out what I'm doing wrong to make that happen, but it's an easy enough

happens quite a lot, and I haven't really just spent a lot of time to figure out what I'm doing wrong to make that happen, but it's an easy enough thing to fix, so I'm not overly concerned about it. But okay, so that looks okay. We can add some styling here for these P elements though. So let's say that we'll have some margin on the bottom, text-base, and let's say text-slate-500, and that's gonna be okay. Now I want to take this table, and I want to place it inside of our documentApproval, because the overall feel should be the same. The only difference should be, of course, the text and the color. So in this case the background color for the top is going to be amber-900. The title is okay. This is all okay, except that the User approved the document, not the invoice. The text

background color for the top is going to be amber 900. The title is okay. This is all okay, except that the user approved the document, not the invoice. The text for the link should be view document. The URL should be document approval, and then that placeholder should be document ID. But everything else should be okay. So if we take a look at this now, that's ugly, but it still has the same feel as the invoice, and that's what I was after. So that when an employee sees this, they know this is an approval, and based upon the color, oh this is a document approval, or this is an invoice approval. So that is looking good. However, we did repeat ourselves a little bit. I say a little bit. We repeated ourselves a lot, because really the only difference between the document approval and the invoice

ourselves a little bit. I say a little bit. We repeated ourselves a lot, because really the only difference between the document approval and the invoice approval is just some text and some colors. So we have one of two choices really. We could create another layout, which would have this same basic structure, and then we just provide the different values through our front matter, or we can create some components. I think the latter sounds a lot more fun, so in the next episode we will create some components.