@page "/markdown"
@inject IStringLocalizer<Markdowns> Localizer

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

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

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

<Pre class="no-highlight mb-3">builder.Services.Configure&lt;HubOptions&gt;(option => option.MaximumReceiveMessageSize = null);</Pre>

<PackageTips Name="BootstrapBlazor.Markdown" />

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

<p>@Localizer["MarkdownsCssText"]</p>

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

<p>@Localizer["MarkdownsJsText"]</p>

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

<Tips>@Localizer["MarkdownsLocalizationTips"]</Tips>

<DemoBlock Title="@Localizer["MarkdownsNormalTitle"]"
           Introduction="@Localizer["MarkdownsNormalIntro"]"
           Name="Normal">
    <p>@((MarkupString)Localizer["MarkdownsNormalDescription"].Value)</p>
    <div style="width: 100%; height: 300px;">
        <Markdown Language="@Language" @bind-Value="@MarkdownString" @bind-Html="@HtmlString" />
    </div>
    <div class="mt-3">
        <textarea class="form-control" rows="6" disabled="disabled">
        @MarkdownString
        </textarea>
    </div>
    <div class="mt-3">
        <textarea class="form-control" rows="6" disabled="disabled">
        @HtmlString
        </textarea>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["MarkdownsAsyncTitle"]"
           Introduction="@Localizer["MarkdownsAsyncIntro"]"
           Name="Async">
    <Button Text="@Localizer["MarkdownsAsyncButtonText"]" IsAsync="true" OnClick="GetAsyncString" Icon="fa-solid fa-font-awesome" class="mb-3" />
    <Markdown Value="@AsyncValue" @ref="MarkdownSetValue"></Markdown>
</DemoBlock>

<DemoBlock Title="@Localizer["MarkdownsCommonPropertyTitle"]"
           Introduction="@Localizer["MarkdownsCommonPropertyIntro"]"
           Name="CommonProperty">
    <p>@((MarkupString)Localizer["MarkdownsCommonPropertyDescription"].Value)</p>
    <Markdown Height="500" MinHeight="300" Placeholder="@Localizer["MarkdownsCommonPropertyPlaceHolder"]" PreviewStyle="PreviewStyle.Tab" InitialEditType="InitialEditType.Wysiwyg" Language="@Language"></Markdown>
</DemoBlock>

<DemoBlock Title="@Localizer["MarkdownsIsViewerTitle"]"
           Introduction="@Localizer["MarkdownsIsViewerIntro"]"
           Name="IsViewer">
    <p>@((MarkupString)Localizer["MarkdownsIsViewerDescription"].Value)</p>
    <Markdown IsViewer="true" Value="# Viewer Mode"></Markdown>
</DemoBlock>

<DemoBlock Title="@Localizer["MarkdownsIsDarkTitle"]"
           Introduction="@Localizer["MarkdownsIsDarkTitle"]"
           Name="IsDark">
    <Markdown IsDark="true" Value="# Dark Mode"></Markdown>
</DemoBlock>

<DemoBlock Title="@Localizer["MarkdownsEnableHighlightTitle"]"
           Introduction="@Localizer["MarkdownsEnableHighlightIntro"]"
           Name="EnableHighlight">
    <Markdown EnableHighlight="true" Value="@JsString"></Markdown>
</DemoBlock>

<DemoBlock Title="@Localizer["MarkdownsBrowserTitle"]"
           Introduction="@Localizer["MarkdownsBrowserIntro"]"
           Name="Browser">
    <Markdown @ref="Markdown"></Markdown>
    <div class="mt-3">
        <Button OnClickWithoutRender="@(async () => await Markdown.DoMethodAsync("insertText", "# test"))">@Localizer["MarkdownsBrowserButtonText1"]</Button>
        <Button OnClickWithoutRender="@(async () => await Markdown.DoMethodAsync("insertText", $"![{Localizer["MarkdownsBrowserText"]}](https://i.niupic.com/images/2022/04/01/9Y6T.jpg)"))">@Localizer["MarkdownsBrowserButtonText2"]</Button>
        <Button OnClickWithoutRender="@(async () => await Markdown.DoMethodAsync("moveCursorToEnd"))">@Localizer["MarkdownsBrowserButtonText3"]</Button>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["MarkdownsValidateTitle"]"
           Introduction="@Localizer["MarkdownsValidateIntro"]"
           Name="Validate">
    <ValidateForm Model="@Model">
        <div class="row g-3 form-inline">
            <div class="col-12">
                <Markdown @bind-Value="Model.Name"></Markdown>
            </div>
            <div class="col-12">
                <Button ButtonType="ButtonType.Submit" Icon="fa-fw fa-solid fa-floppy-disk" Text="@Localizer["MarkdownsValidateSubmitText"]" />
            </div>
        </div>
    </ValidateForm>
</DemoBlock>

<AttributeTable Items="GetAttributes()"></AttributeTable>
