@page "/ui-blocks-newsletter"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Newsletter
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4" Style="max-width: 1000px;">
    Capture leads and keep your audience engaged with updates, promotions, and valuable content.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase newsletter subscription forms with centered layouts, left-aligned layouts with benefit lists and accompanying images, email input fields with validation (<code>RadzenRequiredValidator</code>, <code>RadzenEmailValidator</code>), subscribe buttons, and privacy policy links.
</RadzenText>

<RadzenText Anchor="ui-blocks-newsletter#centered-layout" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">
    Centered layout
</RadzenText>
<RadzenCard class="rz-p-0 rz-material-3-demo-card">
    <RadzenTabs class="example-tabs">
        <Tabs>
            <RadzenTabsItem Text="Example">
                <RadzenRow class="rz-w-100 rz-mx-auto rz-background-color-">
                    <RadzenColumn Size="12" Style="height: fit-content" class="rz-p-6 rz-p-sm-12">
                        <RadzenStack AlignItems="Radzen.AlignItems.Center" Gap="0" class="rz-my-6 rz-my-sm-12">
                            <RadzenText Text="Newsletter" TextStyle="Radzen.Blazor.TextStyle.Overline" TextAlign="Radzen.TextAlign.Center" class="rz-color-primary" Style="font-size: 1rem" />
                            <RadzenText Text="Stay in the Loop!" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" TextAlign="Radzen.TextAlign.Center" Style="max-width: 800px" class="" />
                            <RadzenText Text="Subscribe to our newsletter for the latest updates, exclusive deals, and insider content—delivered straight to your inbox!" TextStyle="Radzen.Blazor.TextStyle.H5" TextAlign="Radzen.TextAlign.Center" TagName="Radzen.Blazor.TagName.P" Style="max-width: 800px; line-height: 1.5" class="rz-text-secondary-color" />
                            <RadzenTemplateForm TItem="dynamic" class="rz-w-100">
                                <RadzenStack AlignItems="Radzen.AlignItems.Center" class="rz-mt-8" Gap="0.5rem">
                                    <RadzenCard Style="--rz-card-padding: 0.5rem; border-radius: calc(var(--rz-button-border-radius) + var(--rz-card-padding)); max-width: 500px;  " class="rz-w-100" Variant="Radzen.Variant.Outlined">
                                        <RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="Radzen.AlignItems.Center" Wrap="Radzen.FlexWrap.Wrap">
                                            <RadzenTextBox Name="NewsletterEmail" Placeholder="Enter your email" Style=" border-radius: var(--rz-button-border-radius); flex:1;  " />
                                            <RadzenButton ButtonStyle="ButtonStyle.Primary" ButtonType="ButtonType.Submit" Text="Subscribe" Variant="Variant.Flat" />
                                        </RadzenStack>
                                    </RadzenCard>
                                    <RadzenRequiredValidator Component="NewsletterEmail" Text="* Email is required." />
                                    <RadzenEmailValidator Component="NewsletterEmail" Text="* Provide a valid email address." />
                                    <RadzenText TextStyle="Radzen.Blazor.TextStyle.Body2" class="rz-m-0 ">
                                        No spam, just great content. Read our <RadzenLink Text="Privacy Policy" Path="/ui-blocks-newsletter"></RadzenLink> to learn more.
                                    </RadzenText>
                                </RadzenStack>
                            </RadzenTemplateForm>
                        </RadzenStack>
                    </RadzenColumn>
                </RadzenRow>
            </RadzenTabsItem>
            <UIBlocks />
        </Tabs>
    </RadzenTabs>
</RadzenCard>

<RadzenText Anchor="ui-blocks-newsletter#left-aligned-with-image" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">
    Left-aligned with image
</RadzenText>
<RadzenCard class="rz-p-0 rz-material-3-demo-card">
    <RadzenTabs class="example-tabs">
        <Tabs>
            <RadzenTabsItem Text="Example">
                <RadzenRow class="rz-w-100 rz-mx-auto rz-background-color-">
                    <RadzenColumn Size="12" SizeMD="6" Order="1" OrderMD="2">
                        <RadzenImage class="rz-w-100 rz-h-100" Path="data:image/png;base64,[encoded data, 6752 characters]"></RadzenImage>
                    </RadzenColumn>
                    <RadzenColumn Size="12" SizeMD="6" Order="2" OrderMD="1" class="rz-py-12 rz-px-6 rz-px-sm-12">
                        <RadzenStack Gap="0" class="rz-h-100" JustifyContent="Radzen.JustifyContent.Center">
                            <RadzenText Text="Newsletter" TextStyle="Radzen.Blazor.TextStyle.Overline" Style="max-width: 800px; font-size: 1rem" class="rz-color-primary" />
                            <RadzenText Text="Stay in the Loop!" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" Style="max-width: 800px" class="" />
                            <RadzenText Text="Subscribe to our newsletter for the latest updates, exclusive deals, and insider content—delivered straight to your inbox!" TextStyle="Radzen.Blazor.TextStyle.H5" TagName="Radzen.Blazor.TagName.P" Style="max-width: 800px; line-height: 1.5" class="rz-text-secondary-color" />
                            <RadzenStack Gap="1rem" class="rz-mt-6">
                                <RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.Center">
                                    <RadzenIcon Icon="shoppingmode" IconStyle="Radzen.IconStyle.Primary" ></RadzenIcon>
                                    <RadzenText Text="Special offers & discounts" class="rz-m-0 " />
                                </RadzenStack>
                                <RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.Center">
                                    <RadzenIcon Icon="rocket_launch" IconStyle="Radzen.IconStyle.Primary" ></RadzenIcon>
                                    <RadzenText Text="New product launches" class="rz-m-0 " />
                                </RadzenStack>
                                <RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.Center">
                                    <RadzenIcon Icon="lightbulb" IconStyle="Radzen.IconStyle.Primary" ></RadzenIcon>
                                    <RadzenText Text="Helpful tips & insights" class="rz-m-0 " />
                                </RadzenStack>
                            </RadzenStack>
                            <RadzenTemplateForm TItem="dynamic" class="rz-w-100 rz-mt-10">
                                <RadzenStack Gap="0.5rem" AlignItems="Radzen.AlignItems.Center" Orientation="Radzen.Orientation.Horizontal" Wrap="Radzen.FlexWrap.Wrap">
                                    <RadzenTextBox Name="NewsletterEmail" Placeholder="Enter your email" class="rz-w-100" Style=" border-radius: var(--rz-button-border-radius); max-width: 400px;  " />
                                    <RadzenButton ButtonStyle="ButtonStyle.Primary" ButtonType="ButtonType.Submit" Text="Subscribe" Variant="Variant.Flat" />
                                </RadzenStack>
                                <RadzenRequiredValidator Component="NewsletterEmail" Text="Email is required." />
                                <RadzenEmailValidator Component="NewsletterEmail" Text="Provide a valid email address." />
                            </RadzenTemplateForm>
                        </RadzenStack>
                        <RadzenText TextStyle="Radzen.Blazor.TextStyle.Body2" class="rz-m-0 ">
                            No spam, just great content. Read our <RadzenLink Text="Privacy Policy" Path="/ui-blocks-newsletter"></RadzenLink> to learn more.
                        </RadzenText>
                    </RadzenColumn>
                </RadzenRow>
            </RadzenTabsItem>
            <UIBlocks />
        </Tabs>
    </RadzenTabs>
</RadzenCard>
