<div class="container-fluid wizdom-link-collection" ng-controller="Wizdom365AnalyticsSettingsController as vm">
    <div class="lt-module-page__top lt-module-page-top">
        <div class="lt-module-page-top__title">
            <h1>{{'Analytics' | translate}}</h1>
        </div>
        <div class="lt-module-page-top__actions">
            <button class="btn btn-primary wide-config-btn"
                    ng-disabled="vm.saving"
                    ng-click="vm.save()">
                {{vm.saving ? 'Saving' : 'Save configuration' | translate}}
            </button>
        </div>
    </div>

    <form role="form" class="form-horizontal">
        <div class="panel lt-module-page__content-panel">
            <div class="alert alert-info" ng-if="!vm.AIInstrumentationKeyPresent">{{'Warning: No Application Insights instrumentation key found in settings. In order to track telemetry to Application Insights, please add the instrumentation key to the config with the key ApplicationInsightsInstrumentationKey' | translate}}</div>
            <!--<div class="alert alert-info" ng-if="!vm.AILoggerIoCEnabled">{{'Warning: ILogger must be set to default or explicitly mapped to Wizdom365.BLL.Managers.ApplicationInsightsLogger in order to track telemetry to Application Insights!' | translate}}</div>
            <div class="alert alert-info" ng-if="!vm.AITelemetryIoCEnabled">{{'Warning: ITelemetryLogger must be set to default or explicitly mapped to Wizdom365.BLL.Managers.AzureInsightsTelemetryLogger in order to track telemetry to Application Insights!' | translate}}</div>-->

            <div class="form-group row">
                <div class="col-sm-4">
                    <label>{{'Enable analytics and statistics collection' | translate}}</label>
                </div>
                <div class="col-sm-8">
                    <input type="checkbox" class="linkcollection-checkbox" ng-model="vm.AnalyticsEnabled">
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-4">
                    <label>{{'Enable verbose debug logging' | translate}}</label>
                </div>
                <div class="col-sm-8">
                    <input type="checkbox" class="linkcollection-checkbox" ng-model="vm.VerboseLoggingEnabled">
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-4">
                    <label>{{'Allow Wizdom to collect anonymous data to help improve the product' | translate}}</label>
                </div>
                <div class="col-sm-8">
                    <input type="checkbox" class="linkcollection-checkbox" ng-model="vm.snooperEnabled">
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-4">
                    <label class="control-label">{{'Use workspace-based Application' | translate}}</label>
                </div>
                <div class="col-sm-8">
                    <input type="checkbox" class="linkcollection-checkbox" ng-model="vm.UseWorkspace">
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-4">
                    <label class="control-label">{{'Workspace ID' | translate}}</label>
                </div>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="workspaceId" placeholder="{{'ID of the workspace-based the Application Insights instance' | translate}}" ng-disabled="!vm.UseWorkspace" ng-model="vm.workspaceId">
                </div>
            </div>

            <div class="form-group row">
                <div class="col-sm-4">
                    <label class="control-label">{{'Subscription ID' | translate}}</label>
                </div>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="subscriptionID" placeholder="{{'Subscription ID of the Windows Azure subscription hosting the Application Insights instance' | translate}}" ng-model="vm.subscriptionID">
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-4">
                    <label class="control-label">{{'Resource Group' | translate}}</label>
                </div>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="resourceGroup" placeholder="{{'Resource group name of the Application Insights instance' | translate}}" ng-model="vm.resourceGroup">
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-4">
                    <label class="control-label">{{'Application Insights instance name' | translate}}</label>
                </div>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="aiInstanceName" placeholder="{{'Name of the Application Insights instance' | translate}}" ng-model="vm.aiInstanceName">
                </div>
            </div>

        </div>

        <div class="panel lt-module-page__content-panel">
            <div class="panel-heading">
                {{'Application Insights query / destination' | translate}}
            </div>

            <ul class="list-group lt-list">

                <li class="list-group-item lt-list__item lt-flextable__table">
                    <div class="lt-flextable__row lt-flextable__row-heading col2/3">{{'Query' | translate}}</div>
                    <div class="lt-flextable__row lt-flextable__row-heading">{{'Table name' | translate}}</div>
                    <div class="lt-flextable__row lt-flextable__row-heading icon-spacer"></div>
                </li>

                <li class="list-group-item lt-list__item lt-flextable__table" ng-repeat="query in vm.queries">
                    <div class="lt-flextable__row col2/3">
                        <input type="text" class="form-control" id="query" placeholder="{{'Use the Application Insights Analytics query builder to construct a query. MUST include itemId and timestamp and only flat data!' | translate}}" ng-model="query.queryText">
                    </div>
                    <div class="lt-flextable__row">
                        <input type="text" class="form-control" id="tableName" placeholder="{{'Target database table name. MUST include schema - ie. dbo.AI_PageViews' | translate}}" ng-model="query.tableName">
                    </div>
                    <div class="lt-list-item__actions lt-flextable__row colauto">
                        <span class="streamline icon-bin-1" ng-click="vm.removeQuery($index);" aria-hidden="true"></span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="lt-module-page__panel-footer">
            <button ng-click="vm.addQuery();" class="btn btn-default">{{'Add query / destination' | translate}}</button>
        </div>
    </form>
</div>