<!--
  ~  Licensed to the Apache Software Foundation (ASF) under one or more
  ~  contributor license agreements.  See the NOTICE file distributed with
  ~  this work for additional information regarding copyright ownership.
  ~  The ASF licenses this file to You under the Apache License, Version 2.0
  ~  (the "License"); you may not use this file except in compliance with
  ~  the License.  You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~  Unless required by applicable law or agreed to in writing, software
  ~  distributed under the License is distributed on an "AS IS" BASIS,
  ~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~  See the License for the specific language governing permissions and
  ~  limitations under the License.
  ~
  -->
<div>
    <div
        fxLayout="column"
        fxFlex="100"
        fxLayoutAlign="start center"
        data-cy="schema-validation-ok"
        *ngIf="!isLoading && !isError && schemaErrorHints.length === 0"
        class="schema-validation schema-validation-ok"
    >
        <div
            fxFlex="100"
            fxLayout="row"
            fxLayoutAlign="start center"
            class="schema-validation-text-ok"
        >
            <i class="material-icons">check_circle</i>&nbsp;<b>Schema ok</b>
        </div>
    </div>
    <div
        fxLayout="column"
        fxFlex="100"
        *ngIf="!isLoading && !isError && schemaErrorHints.length > 0"
    >
        <div
            fxFlex="100"
            fxLayout="column"
            [ngClass]="
                schemaErrorHint.level === 'error'
                    ? 'schema-validation schema-validation-error'
                    : 'schema-validation schema-validation-warning'
            "
            fxLayoutAlign="start center"
            data-cy="schema-validation-error"
            *ngFor="let schemaErrorHint of schemaErrorHints"
        >
            <div
                fxFlex="100"
                fxLayout="row"
                fxLayoutAlign="center start"
                [ngClass]="
                    schemaErrorHint.level === 'error'
                        ? 'schema-validation-text-error'
                        : 'schema-validation-text-warning'
                "
            >
                <i class="material-icons">warning</i>&nbsp;
                <b>{{ schemaErrorHint.title }}</b>
            </div>
            <div data-cy="schema-validation-error-content">
                <span>{{ schemaErrorHint.content }}</span>
            </div>
        </div>
    </div>
</div>
