@page "/install"
@inject IStringLocalizer<Install> Localizer
@inject IOptions<WebsiteOptions> WebsiteOption

<h3>@Localizer["InstallTitle"]</h3>

<h4>@Localizer["InstallDesc"]</h4>

<p class="code-label">@Localizer["Template"]</p>

<p>@((MarkupString)Localizer["TemplateDesc"].Value)</p>

<p class="code-label">@Localizer["Manual"]</p>

<p>@((MarkupString)Localizer["ManualDesc"].Value)</p>

<p class="code-label">@Localizer["Step1"]</p>
<p>@((MarkupString)Localizer["Step1Desc"].Value)</p>
<Pre class="mb-3">dotnet add package BootstrapBlazor</Pre>

<p class="code-label">@Localizer["Step2"]</p>
<p>@((MarkupString)Localizer["Step2Desc"].Value)</p>
<Pre class="mb-3">@@using BootstrapBlazor.Components</Pre>

<p class="code-label">@Localizer["Step3"]</p>
<p>@((MarkupString)Localizer["Step3Desc"].Value)</p>
<Tab IsBorderCard="true" class="mb-3">
	<TabItem Text="NET10/NET9">
		<Pre>@Localizer["FontAwesomeCss"]
&lt;link rel="stylesheet" href="@@Assets["_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css"]" /&gt;
@Localizer["BootstrapStyle"]
&lt;link rel="stylesheet" href="@@Assets["_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css"]" /&gt;
@Localizer["MotronicDesc"]
&lt;link rel="stylesheet" href="@@Assets["_content/BootstrapBlazor/css/motronic.min.css"]" /&gt;</Pre>
	</TabItem>
	<TabItem Text="@Localizer["OtherText"]">
		<Pre>@Localizer["FontAwesomeCss"]
&lt;link rel="stylesheet" href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" /&gt;
@Localizer["BootstrapStyle"]
&lt;link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" /&gt;
@Localizer["MotronicDesc"]
&lt;link rel="stylesheet" href="_content/BootstrapBlazor/css/motronic.min.css" /&gt;</Pre>
	</TabItem>
</Tab>

<p class="code-label">@Localizer["Step4"]</p>
<p>@((MarkupString)Localizer["Step4Desc"].Value)</p>
<Tab IsBorderCard="true" class="mb-3">
	<TabItem Text="NET10/NET9">
		<Pre>&lt;script src="@@Assets["_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"]"&gt;&lt;/script&gt;</Pre>
	</TabItem>
	<TabItem Text="@Localizer["OtherText"]">
		<Pre>&lt;script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"&gt;&lt;/script&gt;</Pre>
	</TabItem>
</Tab>

<p class="code-label">@((MarkupString)Localizer["Step5"].Value)</p>
<p>@((MarkupString)Localizer["Step5Desc"].Value)</p>

<p class="code-label">@Localizer["Step6"]</p>
<p>@((MarkupString)Localizer["Step6Desc"].Value)</p>
<Pre class="mb-3">builder.Services.AddBootstrapBlazor();</Pre>

<p class="code-label">@((MarkupString)Localizer["Step7"].Value)</p>
<p>@((MarkupString)Localizer["Step7Desc"].Value)</p>
<Pre class="mb-3">&lt;BootstrapBlazorRoot&gt;
    &lt;Header&gt;&lt;/Header&gt;
    &lt;main&gt;
        @@Body
    &lt;/main&gt;
&lt;/BootstrapBlazorRoot&gt;</Pre>
