@using FastReport.Web.Toolbar
<div class="fr-toolbar fr-@WebReport.ID-toolbar">

    @if (WebReport.Toolbar.ShowRefreshButton && !WebReport.Report.IsLoadPrepared)
    {
        <div class="fr-toolbar-item fr-toolbar-pointer fr-@WebReport.ID-toolbar-item fr-webreport-pointer" @onclick="Reload" title="@Localization.reloadTxt">
            <img src="_content/FastReport.Web/Resources/reload.svg" />
        </div>
    }

    @if (WebReport.Toolbar.Exports.Show)
    {
        <ExportsMenu WebReport="WebReport" OpenModalDialog="OpenModalDialog" />
    }

    @if (WebReport.Toolbar.ShowPrint)
    {
        <div class="fr-toolbar-item fr-@WebReport.ID-toolbar-item" title="@Localization.printTxt">
            <img src="_content/FastReport.Web/Resources/print.svg" />
            <div class="fr-toolbar-dropdown-content fr-@WebReport.ID-toolbar-dropdown-content">
                @if (WebReport.Toolbar.PrintInHtml)
                {
                    <a target="_blank" @onclick="async () => await PrintReportAsync(PrintTypes.HTML)">@Localization.printFromBrowserTxt</a>
                }
                @if (WebReport.Toolbar.PrintInPdf)
                {
                    <a target="_blank" @onclick="async () => await PrintReportAsync(PrintTypes.PDF)">@Localization.printFromPdf</a>
                }
            </div>
        </div>
    }

    @if (WebReport.Toolbar.ShowZoomButton)
    {
        <div class="fr-toolbar-item fr-@WebReport.ID-toolbar-item">
            <img src="_content/FastReport.Web/Resources/magnifier.svg" title="@Localization.zoomTxt" />
            <div class="fr-toolbar-dropdown-content fr-@WebReport.ID-toolbar-dropdown-content">
                @foreach (int zoom in zoomList)
                {
                    @if (currentZoom != zoom)
                    {
                        <a @onclick="@(() => Zoom(zoom))">
                            @zoom%
                        </a>
                    }
                    @if (currentZoom == zoom)
                    {
                        <a @onclick="@(() => Zoom(zoom))" class="fr-webreport-zoom-selected">
                            @zoom%
                        </a>
                    }


                }
            </div>
        </div>
    }

    @*@if (currentZoom != zoom)
    {
        <a @onclick="@(() => Zoom(zoom))" @zoom%></a>
    }
    @if (currentZoom == zoom)
    {
        <a class="fr-webreport-zoom-selected">@zoom%</a>
    }*@

    <div class="fr-toolbar-item fr-toolbar-narrow fr-@WebReport.ID-toolbar-item fr-webreport-toolbar-narrow @(isFirstPage ? $"fr-webreport-toolbar-notbutton fr-webreport-disabled": $"fr-webreport-pointer" )"
            @onclick="GotoFirst"
            Title="@Localization.firstPageTxt">
        <img src="_content/FastReport.Web/Resources/angle-double-left.svg" />
    </div>

    <div class="fr-toolbar-item fr-toolbar-narrow  fr-@WebReport.ID-toolbar-item fr-webreport-toolbar-narrow @(isFirstPage ? $"fr-webreport-toolbar-notbutton fr-webreport-disabled": $"fr-webreport-pointer" )"
            @onclick="GotoPrevious"
            Title="@Localization.previousPageTxt">
        <img src="_content/FastReport.Web/Resources/angle-left.svg" />
    </div>

    <div class="fr-toolbar-item fr-toolbar-notbutton fr-@WebReport.ID-toolbar-item fr-webreport-toolbar-notbutton @(isSinglePage ? "fr-webreport-disabled" : "")" style="margin-right: 2px;">
        <input class="fr-@WebReport.ID-current-page-input"
                type="text"
                @bind="InputValue"
                readonly="@isSinglePage"
                title="@Localization.currentPageTxt" />
    </div>

    <div class="fr-toolbar-item fr-toolbar-notbutton fr-toolbar-slash fr-@WebReport.ID-toolbar-item fr-webreport-toolbar-notbutton fr-@WebReport.ID-toolbar-slash @(isSinglePage ? "fr-webreport-disabled" : "")" style="margin: 0;">
        <img src="_content/FastReport.Web/Resources/slash.svg" />
    </div>

    <div class="fr-toolbar-item fr-toolbar-notbutton fr-@WebReport.ID-toolbar-item fr-webreport-toolbar-notbutton @(isSinglePage ? "fr-webreport-disabled" : "")" style="margin-left: 2px;">
        <input type="text" value="@WebReport.TotalPages" readonly="readonly" title="@Localization.totalPagesTxt" />
    </div>

    <div class="fr-toolbar-item fr-toolbar-narrow fr-@WebReport.ID-toolbar-item fr-webreport-toolbar-narrow @(isLastPage ? $"fr-webreport-toolbar-notbutton fr-webreport-disabled" : $"fr-webreport-pointer")"
            @onclick="GotoNext"
            title="@Localization.nextPageTxt">
        <img src="_content/FastReport.Web/Resources/angle-right.svg" />
    </div>

    <div class="fr-toolbar-item fr-toolbar-narrow fr-@WebReport.ID-toolbar-item fr-webreport-toolbar-narrow @(isLastPage ? $"fr-webreport-toolbar-notbutton fr-webreport-disabled" : $"fr-webreport-pointer")"
            @onclick="GotoLast"
            title="@Localization.lastPageTxt">
        <img src="_content/FastReport.Web/Resources/angle-double-right.svg" />
    </div>


    @if (WebReport.Toolbar.Elements != null)
    {
        @foreach (var element in WebReport.Toolbar.Elements.Where(element => element.Enabled))
        {
            switch (element)
            {
                case ToolbarButton toolbarButton:
                    <div class="fr-toolbar-item fr-toolbar-pointer fr-@WebReport.ID-toolbar-item fr-webreport-pointer @toolbarButton.ElementClasses" @onclick="() => InvokeAction(toolbarButton.OnClickAction as ElementClickAction)" style="@toolbarButton.ElementCustomStyle" title="@toolbarButton.Title">
                        <img src="@toolbarButton.Image.RenderedImage" alt=""/>
                    </div>
                    break;
                case ToolbarSelect toolbarSelect:
                {
                    <div class="fr-toolbar-item fr-@WebReport.ID-toolbar-item @toolbarSelect.ElementClasses" title="@toolbarSelect.Title" style="@toolbarSelect.ElementCustomStyle">
                        <img src="@toolbarSelect.Image.RenderedImage" alt=""/>
                        <div class="fr-toolbar-dropdown-content fr-@WebReport.ID-toolbar-dropdown-content">
                            @foreach (var item in toolbarSelect.Items.Where(element => element.Enabled))
                            {
                                <a @onclick="() => InvokeAction(item.OnClickAction as ElementClickAction)">@item.Title</a>
                            }
                        </div>
                    </div>
                    break;
                }
                case ToolbarInput toolbarInput:
                    <div class="fr-toolbar-item fr-toolbar-notbutton fr-@WebReport.ID-toolbar-item fr-webreport-toolbar-notbutton @toolbarInput.ElementClasses" style="@toolbarInput.ElementCustomStyle">
                        <input style="@toolbarInput.InputCustomStyle" type="@toolbarInput.InputType" value="@toolbarInput.InputDefaultValue" title="@toolbarInput.Title" @onchange="(e) => InvokeInputAction(e.Value.ToString(), toolbarInput.OnChangeAction as ElementChangeAction)"/>
                    </div>
                    break;
            }
        }
    }

</div>

@if (WebReport.Tabs.Count > 1)
{
    <Tabs WebReport="WebReport" />
}

@code {
    [Parameter]
    public WebReport WebReport { get; set; }

    [Parameter]
    public Action PageChanged { get; set; }

    [Parameter]
    public Action OpenModalDialog { get; set; }


    protected override void OnParametersSet()
    {
        Localization = new ToolbarLocalization(WebReport.Res);
        currentZoom = WebReport.Zoom * 100;
        isFirstPage = WebReport.CurrentPageIndex == 0;
        isLastPage = WebReport.CurrentPageIndex >= WebReport.TotalPages - 1;
        isSinglePage = WebReport.SinglePage || WebReport.TotalPages < 2;
    }
}