@inject NavigationManager NavigationManager
@page "/get-started/{version?}"
<PageTitle>Get Started | Free UI Components by Radzen</PageTitle>
<HeadContent>
    <meta name="description" content="How to get started with the Radzen Blazor Component library.">
</HeadContent>
<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8 rz-mb-2">
    Get started
</RadzenText>
<RadzenText class="rz-mb-12">
    Radzen Blazor Components are free and open source. <RadzenLink Path="https://github.com/radzenhq/radzen-blazor" Text="Star the GitHub repo" title="Star Radzen Blazor Components on GitHub" target="_blank" /> &#11088; to support the project and help other Blazor developers discover it.
</RadzenText>

<RadzenTabs SelectedIndex=@selectedIndex Change="@OnTabChange">
    <Tabs>
        <RadzenTabsItem Text=".NET 10 &amp; 9 &amp; 8">
            <div class="rz-py-0 rz-py-sm-4 rz-px-0 rz-px-sm-2 rz-px-lg-12">
            <RadzenAlert AlertStyle="AlertStyle.Info" Variant="Variant.Flat" Shade="Shade.Lighter" AllowClose="false" class="rz-mb-12">
All interactive features of the Radzen Blazor components require interactivity of the container <code>.razor</code> file to be enabled or the <code>@@rendermode</code>
attribute of the component to be set to one of the following values: <code>InteractiveServer</code>, <code>InteractiveAuto</code> or <code>InteractiveWebAssembly</code>.
More info is available in the <RadzenLink Text="rendering mode article" Path="https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0" target="_blank" /> from the official Blazor documentation.
            </RadzenAlert>
            <RadzenAlert AlertStyle="AlertStyle.Info" Variant="Variant.Flat" Shade="Shade.Lighter" AllowClose="false" class="rz-mb-12">
These instructions assume the application layout which uses rendering modes and was introduced with .NET 8.
            </RadzenAlert>
            @Installation(CurrentVersion)
            @Import(CurrentVersion)
            <RadzenText Anchor="@($"get-started/{CurrentVersion}#theme")" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-mt-12 rz-mb-4">3. Set the theme</RadzenText>
            <RadzenText>
                Open the <code>App.razor</code> file of your application. Add this code within the <code>&lt;head&gt;</code> element:
            </RadzenText>
<pre class="rz-p-4">
<code>&lt;RadzenTheme Theme="material" /&gt;
</code>
</pre>
            <RadzenText>
                Open the <code>Program.cs</code> file and include:
            </RadzenText>
<pre class="rz-p-4">
<code>builder.Services.AddRadzenComponents();
</code>
</pre>
            @IncludeJavaScript(("App.razor", CurrentVersion))
            @UseComponent(CurrentVersion)
            <RadzenText Anchor="@($"get-started/{CurrentVersion}#additional")" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-mt-12 rz-mb-4">6. Use Dialog, Notification, ContextMenu and Tooltip components</RadzenText>
            <RadzenText>
                Open the <code>MainLayout.razor</code> file and include:
            </RadzenText>
<pre class="rz-p-4">
<code>&lt;RadzenComponents @@rendermode="InteractiveAuto" /></code>
</pre>
            <RadzenAlert AlertStyle="AlertStyle.Info" Variant="Variant.Flat" Shade="Shade.Lighter" AllowClose="false">
                Set the <code>@@rendermode</code> attribute to the render mode of your application e.g. <code>InteractiveServer</code>, <code>InteractiveWebAssembly</code> or <code>InteractiveAuto</code>.
            </RadzenAlert>
        @Next
        </div>
        </RadzenTabsItem>
        <RadzenTabsItem Text="WebAssembly (standalone)">
            <div class="rz-p-0 rz-p-sm-2 rz-px-lg-12">
            @Installation(CurrentVersion)
            @Import(CurrentVersion)
            <RadzenText Anchor="@($"get-started/{CurrentVersion}#theme")" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-mt-12 rz-mb-4">3. Set the theme</RadzenText>
            <RadzenText>
                Open the <code>MainLayout.razor</code> file of your application. Add this code
            </RadzenText>
<pre class="rz-p-4">
<code>
&lt;HeadContent&gt;
    &lt;RadzenTheme Theme="material" /&gt;
&lt;/HeadContent&gt;
</code>
</pre>
            <RadzenText Anchor="@($"get-started/{CurrentVersion}#js")" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-mt-12 rz-mb-4">4. Include Radzen.Blazor.js or Radzen.Blazor.min.js</RadzenText>
            <RadzenText>
                Open the <code>index.html</code> file of your application. Add this code after the last <code>&lt;script&gt;</code>:
            </RadzenText>
<pre class="rz-p-4">
<code>&lt;script src="_content/Radzen.Blazor/Radzen.Blazor.min.js"&gt;&lt;/script&gt;
</code>
</pre>
            @UseComponent(CurrentVersion)
            @Additional(CurrentVersion)
            </div>
        </RadzenTabsItem>
        <RadzenTabsItem Text="Content Security Policy (CSP)">
            <div class="rz-p-0 rz-p-sm-2 rz-px-lg-12">
                <RadzenText>
                    To use Radzen Blazor components with strict CSP mode, the following directives must be included in the CSP meta tag in the <code>&lt;head&gt;</code> element:
<pre class="rz-p-4">
<code>&lt;meta http-equiv="Content-Security-Policy"
               content="base-uri 'self';
               default-src 'self';
               img-src data: https:;
               object-src 'none';
               script-src 'self' 'unsafe-eval' 'wasm-unsafe-eval';
               style-src 'self' 'unsafe-inline';
               upgrade-insecure-requests;"&gt
</code>
</pre>
                </RadzenText>
            </div>
        </RadzenTabsItem>
    </Tabs>
</RadzenTabs>

@code {
    private static readonly string[] versions = ["net9", "wasm", "csp"];

    private int selectedIndex = 0;

    [Parameter]
    public string Version { get; set; }

    private string CurrentVersion => Version ?? "net9";

    protected override void OnParametersSet()
    {
        base.OnParametersSet();

        selectedIndex = Array.IndexOf(versions, CurrentVersion);
        if (selectedIndex < 0)
        {
            selectedIndex = 0;
        }
    }

    private void OnTabChange(int index)
    {
        NavigationManager.NavigateTo($"/get-started/{versions[index]}");
    }

    RenderFragment<string> Installation = version =>
        @<text>
            <RadzenText Anchor="@($"get-started/{version}#install")" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-mt-6 rz-mb-4">1. Install</RadzenText>
            <RadzenText>
                The Radzen Blazor components are distributed via the <RadzenLink Text="Radzen.Blazor" Path="https://www.nuget.org/packages/Radzen.Blazor/" target="_blank" /> nuget package.
            </RadzenText>
            <RadzenText>
                You can add the Radzen.Blazor nuget package to your Blazor application in one of the following ways:
            </RadzenText>
            <ul>
                <li>Via Visual Studio's Nuget Package Manager.</li>
                <li>Via command line <code>dotnet add package Radzen.Blazor</code></li>
                <li>By editing your application's <code>.csproj</code> file and adding a package reference <code>&lt;PackageReference Include="Radzen.Blazor" Version="*" /&gt;</code></li>
            </ul>
        </text>;

    RenderFragment<string> Import = version =>
        @<text>
        <RadzenText Anchor="@($"get-started/{version}#import")" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-mt-12 rz-mb-4">2. Import the namespace</RadzenText>
        <RadzenText>
            Open the <code>_Imports.razor</code> file of your Blazor application and append the following:
        </RadzenText>
<pre class="rz-p-4">
<code>
@@using Radzen
@@using Radzen.Blazor
</code>
</pre>
        </text>;

    RenderFragment<(string file, string version)> IncludeJavaScript = args =>
        @<text>
            <RadzenText Anchor="@($"get-started/{args.version}#js")" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-mt-12 rz-mb-4">4. Include Radzen.Blazor.js</RadzenText>
            <RadzenText>
                Open the <code>@(args.file)</code> file of your application. Add this code after the last <code>&lt;script&gt;</code>:
            </RadzenText>
<pre class="rz-p-4">
<code>&lt;script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@@(typeof(Radzen.Colors).Assembly.GetName().Version)"&gt;&lt;/script&gt;
</code>
</pre>
        </text>;

    RenderFragment<string> UseComponent = version =>
        @<text>
        <RadzenText Anchor="@($"get-started/{version}#use")" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-mt-12 rz-mb-4">5. Use a component</RadzenText>
        <RadzenText>
            Use any Radzen Blazor component by typing its tag name in a Blazor page:
        </RadzenText>
<pre class="rz-p-4">
<code>&lt;RadzenButton Click="@@ButtonClicked" Text="Hi"&gt;&lt;/RadzenButton&gt;
@@code {
  void ButtonClicked()
  {
    // Handle the Click event of RadzenButton
  }
}
</code>
</pre>
        </text>;

    RenderFragment<string> Additional = version =>
        @<text>
                <RadzenText Anchor="@($"get-started/{version}#additional")" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-mt-12 rz-mb-4">6. Use Dialog, Notification, ContextMenu and Tooltip components</RadzenText>
            <RadzenText>
                Open the <code>MainLayout.razor</code> file and include:
            </RadzenText>
<pre class="rz-p-4">
<code>&lt;RadzenComponents /></code>
</pre>
            <RadzenAlert AlertStyle="AlertStyle.Warning" Variant="Variant.Flat" Shade="Shade.Lighter" AllowClose="false">
                Make sure that you do not nest <code>RadzenComponents</code> inside a positioned element (i.e. with position: relative, position: absolute or position: fixed).
                To be safe you can add them at the end of the layout file after all other elements.
            </RadzenAlert>
    </text>;
    RenderFragment Next =
        @<text>
        <RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-mt-12 rz-mb-4">Next: Explore Demos</RadzenText>
        <RadzenText>
            Hooray! You have successfully added Radzen Blazor Components to your Blazor app. Now let's take a deeper look and explore more components and demos.
        </RadzenText>
        <RadzenText class="rz-text-align-center rz-text-align-lg-start rz-mt-8">
            <a class="rz-button rz-button-lg rz-primary" href="/datagrid">Explore Demos</a>
        </RadzenText>
        </text>;
}