<div ng-controller="Umbraco.Dashboard.HealthCheckController as vm">

    <div ng-if="vm.viewState === 'list'">

        <umb-box>
            <umb-box-content>
                <div class="umb-healthcheck-help-text">
                    <localize key="healthcheck_helpText">
                        <p>The health checker evaluates various areas of your site for best practice settings, configuration, potential problems, etc. You can easily fix problems by pressing a button.
                            You can add your own health checks, have a look at <a href="https://docs.umbraco.com/umbraco-cms/extending/health-check" target="_blank" rel="noopener" class="btn-link -underline">the documentation for more information</a> about custom health checks.</p>
                    </localize>
                </div>
                <div class="umb-panel-group__details-status-actions">
                        <umb-button type="button"
                                    button-style="success"
                                    label="Check All Groups"
                                    action="vm.checkAllGroups(vm.groups)">
                        </umb-button>
                </div>
            </umb-box-content>
        </umb-box>

        <div class="umb-healthcheck">
            <div class="umb-air" ng-repeat="group in vm.groups">
                <button type="button" class="umb-healthcheck-group" ng-click="vm.openGroup(group);">

                    <div class="umb-healthcheck-title">{{group.name}}</div>

                    <div class="umb-healthcheck-group__load-container" ng-if="group.loading">
                        <umb-load-indicator></umb-load-indicator>
                    </div>

                    <div class="umb-healthcheck-messages"
                         ng-hide="group.loading || !group.totalSuccess && !group.totalWarning && !group.totalError && !group.totalInfo">

                        <div class="umb-healthcheck-message" ng-if="group.totalSuccess > 0">
                            <umb-icon icon="icon-check" class="color-green"></umb-icon>
                            {{ group.totalSuccess }}
                            <span class="sr-only">
                                <localize key="visuallyHiddenTexts_passed">passed</localize>
                            </span>
                        </div>

                        <div class="umb-healthcheck-message" ng-if="group.totalWarning > 0">
                            <umb-icon icon="icon-alert" class="color-orange"></umb-icon>
                            {{ group.totalWarning }}
                            <span class="sr-only">
                                <localize key="visuallyHiddenTexts_warning">warning</localize>
                            </span>
                        </div>

                        <div class="umb-healthcheck-message" ng-if="group.totalError > 0">
                            <umb-icon icon="icon-delete" class="color-red"></umb-icon>
                            {{ group.totalError }}
                            <span class="sr-only">
                                <localize key="visuallyHiddenTexts_failed">failed</localize>
                            </span>
                        </div>

                        <div class="umb-healthcheck-message" ng-if="group.totalInfo > 0">
                            <umb-icon icon="icon-info" class="umb-healthcheck-status-icon"></umb-icon>
                            {{ group.totalInfo }}
                            <span class="sr-only">
                                <localize key="visuallyHiddenTexts_suggestion">suggestion</localize>
                            </span>
                        </div>
                    </div>
                </button>
            </div>
        </div>
    </div>

    <div ng-if="vm.viewState === 'details'">

        <umb-editor-sub-header>
            <umb-editor-sub-header-content-left>
                <button type="button" class="umb-healthcheck-back-link" ng-click="vm.setViewState('list');">
                    <span aria-hidden="true">&larr;</span> <localize key="general_backToOverview">Back to overview</localize>
                </button>
            </umb-editor-sub-header-content-left>
        </umb-editor-sub-header>

        <div class="umb-panel-group__details">

            <div class="umb-panel-group__details-group">
                <div class="umb-panel-group__details-group-title">
                    <div class="umb-panel-group__details-group-name">{{ vm.selectedGroup.name }}</div>
                    <umb-button
                        type="button"
                        button-style="success"
                        action="vm.checkAllInGroup(vm.selectedGroup, vm.selectedGroup.checks)"
                        label="Check group"
                        label-key="healthcheck_checkGroup">
                    </umb-button>
                </div>

                <div class="umb-panel-group__details-checks">
                    <div class="umb-panel-group__details-check" ng-repeat="check in vm.selectedGroup.checks">
                        <div class="umb-panel-group__details-check-title">
                            <div class="umb-panel-group__details-check-name">{{ check.name }}</div>
                            <div class="umb-panel-group__details-check-description">{{ check.description }}</div>
                        </div>

                        <div class="umb-panel-group__details-status" ng-repeat="status in check.status">
                            <div class="umb-panel-group__details-status-icon-container" aria-hidden="true">
                                <umb-icon icon="icon-check" class="umb-healthcheck-status-icon color-green" ng-if="status.resultType === 'Success'"></umb-icon>
                                <umb-icon icon="icon-alert" class="umb-healthcheck-status-icon color-yellow" ng-if="status.resultType === 'Warning'"></umb-icon>
                                <umb-icon icon="icon-delete" class="umb-healthcheck-status-icon color-red" ng-if="status.resultType === 'Error'"></umb-icon>
                                <umb-icon icon="icon-info" class="umb-healthcheck-status-icon" ng-if="status.resultType === 'Info'"></umb-icon>
                            </div>

                            <div class="umb-panel-group__details-status-content">
                                <div class="umb-panel-group__details-status-text">
                                    <span class="sr-only" ng-if="status.resultType === 'Success'">
                                        <localize key="visuallyHiddenTexts_checkPassed">Check passed</localize>:
                                    </span>
                                    <span class="sr-only" ng-if="status.resultType === 'Warning'">
                                        <localize key="visuallyHiddenTexts_warning">warning</localize>:
                                    </span>
                                    <span class="sr-only" ng-if="status.resultType === 'Error'">
                                        <localize key="visuallyHiddenTexts_checkFailed">Check failed</localize>:
                                    </span>
                                    <span class="sr-only" ng-if="status.resultType === 'Info'">
                                        <localize key="visuallyHiddenTexts_suggestion">suggestion</localize>:
                                    </span>
                                    <div ng-bind-html="status.message"></div>
                                    <div ng-if="status.description" ng-bind-html="status.description"></div>
                                </div>

                                <div class="umb-panel-group__details-status-actions" ng-if="status.actions">
                                    <div class="umb-panel-group__details-status-action" ng-repeat="action in status.actions">
                                        <ng-form name="healthCheckAction">

                                            <div ng-if="action.valueRequired">
                                                <div><label class="bold">Set new value:</label></div>

                                                <div ng-switch on="action.providedValueValidation">
                                                    <input ng-switch-when="email" name="providedValue" type="text" ng-model="action.providedValue" required val-email />
                                                    <input ng-switch-when="regex" name="providedValue" type="text" ng-model="action.providedValue" required ng-pattern="vm.parseRegex(action.providedValueValidationRegex)" />
                                                    <input ng-switch-default name="providedValue" type="text" ng-model="action.providedValue" required />
                                                </div>
                                            </div>

                                            <umb-button type="button"
                                                        button-style="success"
                                                        size="s"
                                                        disabled="healthCheckAction.providedValue.$invalid"
                                                        action="vm.executeAction(check, $parent.$index, action)"
                                                        label="{{action.name}}">
                                            </umb-button>

                                        </ng-form>

                                        <div class="umb-panel-group__details-status-action-description" ng-if="action.description" ng-bind-html="action.description"></div>
                                    </div>
                                </div>
                              <div class="umb-panel-group__details-status-readMoreLink" ng-if="status.readMoreLink">
                                <a href="{{status.readMoreLink}}" class="btn btn-success" target="_blank">
                                  <localize key="general_readMore">Read more</localize></a>
                              </div>

                            </div>
                        </div>

                        <div ng-show="check.loading">
                            <div class="umb-panel-group__details-status-overlay"></div>
                            <umb-load-indicator></umb-load-indicator>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
