Page Comparison

@model Hawksearch.Kentico.Xperience.UI.Widgets.SearchBoxViewModel

@{
    var trackedEvents = new List<string>()
{
        Model.ComponentViewModel.Properties.TrackAutocompleteClickEvent ? "AutocompleteClick" : "",
        Model.ComponentViewModel.Properties.TrackSearchEvent ? "Search" : ""
    };

    var eventsJson = Newtonsoft.Json.JsonConvert.SerializeObject(trackedEvents.Where(a => !string.IsNullOrEmpty(a)));

    var settingsJson = Newtonsoft.Json.JsonConvert.SerializeObject(Model.ConnectorSettings);

    var language = Model.ConnectorSettings.MultilingualIndexingEnabled ?
                                    CMS.Localization.LocalizationContext.CurrentCulture.CultureCode : "";
}

@if (Model.ConnectorSettings.FrontendFramework == Hawksearch.Kentico.Xperience.CMS.Configuration.FrontendFrameworkType.Vue)
{
    <div class="vue-app-wrapper-ae"
         data-indexname="@Model.ComponentViewModel.Properties.IndexName"
         data-language="@language"
         data-trackedevents="@eventsJson"
         data-hawksearchsettings="@settingsJson">
        <div class="hawk">
            <div class="hawk__header">
                @if (string.IsNullOrWhiteSpace(Model.SearchPageUrl))
                {
                    <search-box></search-box>
                }
                else
                {
                    <search-box search-page="@Model.SearchPageUrl"></search-box>
                }
            </div>
        </div>
    </div>
}
else
{
    <div id="hawksearch-react-search-box"
         data-indexname="@Model.ComponentViewModel.Properties.IndexName"
         data-language="@language"
         data-trackedevents="@eventsJson"
         data-hawksearchsettings="@settingsJson"
         data-searchpageurl="@Model.SearchPageUrl">
    </div>
}