@if (loading) {
<div class="clr-row mt-2 center">
    <span class="spinner spinner-md"></span>
</div>
} @if (!loading) {
<div class="clr-form clr-form-horizontal">
    <div class="clr-form-control">
        @if (!scanner) {
        <label class="clr-control-label name">{{
            'SCANNER.SCANNER' | translate
        }}</label>
        }
        <div class="clr-control-container">
            @if ( !scanner && hasCreatePermission && scanners && scanners.length
            > 0 ) {
            <button
                id="edit-scanner-copy"
                class="btn btn-primary"
                (click)="open()">
                {{ 'SCANNER.EDIT' | translate }}
            </button>
            } @if ( !scanner && hasCreatePermission && !(scanners &&
            scanners.length > 0) ) {
            <label class="name">{{
                'SCANNER.NOT_AVAILABLE' | translate
            }}</label>
            } @if (!scanner && !hasCreatePermission) {
            <label class="name">{{
                'SCANNER.NO_PROJECT_SCANNER' | translate
            }}</label>
            }
        </div>
    </div>
    @if (scanner) {
    <div class="clr-form-control">
        <label class="clr-control-label name">{{
            'SCANNER.NAME' | translate
        }}</label>
        <div class="clr-control-container">
            <div class="clr-input-wrapper">
                <div class="clr-input-wrapper name">
                    <span id="scanner-name" class="scanner-name">{{
                        scanner?.name
                    }}</span>
                    @if (scanner?.disabled) {
                    <span class="label label-warning ml-1">{{
                        'SCANNER.DISABLED' | translate
                    }}</span>
                    } @if (scanner?.health === 'unhealthy') {
                    <span class="label label-danger ml-1">{{
                        'SCANNER.UNHEALTHY' | translate
                    }}</span>
                    } @if (scanner?.health === 'healthy') {
                    <span class="label label-success ml-1">{{
                        'SCANNER.HEALTHY' | translate
                    }}</span>
                    }
                </div>
            </div>
        </div>
    </div>
    <div class="clr-form-control">
        <label class="clr-control-label">{{
            'SCANNER.ENDPOINT' | translate
        }}</label>
        <div class="clr-control-container">
            <div class="clr-input-wrapper">
                <input
                    [ngModel]="scanner?.url"
                    readonly
                    class="clr-input width-240"
                    type="text"
                    id="scanner-endpoint"
                    autocomplete="off" />
            </div>
        </div>
    </div>
    @if (scanner?.adapter) {
    <div class="clr-form-control">
        <label class="clr-control-label">{{
            'SCANNER.ADAPTER' | translate
        }}</label>
        <div class="clr-control-container">
            <div class="clr-input-wrapper">
                <input
                    [ngModel]="scanner?.adapter"
                    readonly
                    class="clr-input width-240"
                    type="text"
                    id="scanner-scanner"
                    autocomplete="off" />
            </div>
        </div>
    </div>
    } @if (scanner?.vendor) {
    <div class="clr-form-control">
        <label class="clr-control-label">{{
            'SCANNER.VENDOR' | translate
        }}</label>
        <div class="clr-control-container">
            <div class="clr-input-wrapper">
                <input
                    [ngModel]="scanner?.vendor"
                    readonly
                    class="clr-input width-240"
                    type="text"
                    id="scanner-vendor"
                    autocomplete="off" />
            </div>
        </div>
    </div>
    } @if (scanner?.version) {
    <div class="clr-form-control">
        <label class="clr-control-label">{{
            'SCANNER.VERSION' | translate
        }}</label>
        <div class="clr-control-container">
            <div class="clr-input-wrapper">
                <input
                    [ngModel]="scanner?.version"
                    readonly
                    class="clr-input width-240"
                    type="text"
                    id="scanner-version"
                    autocomplete="off" />
            </div>
        </div>
    </div>
    } } @if (hasCreatePermission && scanners && scanners.length > 0) {
    <button
        id="edit-scanner"
        type="button"
        (click)="open()"
        class="btn btn-secondary mt-1">
        {{ 'SCANNER.SELECT_SCANNER' | translate }}
    </button>
    }
</div>
}

<clr-modal
    [clrModalSize]="'xl'"
    [(clrModalOpen)]="opened"
    [clrModalStaticBackdrop]="true"
    [clrModalClosable]="false">
    <h3 class="modal-title">{{ 'SCANNER.SELECT_SCANNER' | translate }}</h3>
    <div class="modal-body body-format">
        <inline-alert class="modal-title"></inline-alert>
        <clr-datagrid
            clrDgSelectionType="single"
            [clrDgSelected]="selectedScanner ? [selectedScanner] : []"
            (clrDgSelectedChange)="selectedScanner = $event?.[0]">
            <clr-dg-column [clrDgField]="'name'">{{
                'SCANNER.NAME' | translate
            }}</clr-dg-column>
            <clr-dg-column [clrDgField]="'url'">{{
                'SCANNER.ENDPOINT' | translate
            }}</clr-dg-column>
            <clr-dg-column>{{ 'SCANNER.DEFAULT' | translate }}</clr-dg-column>
            <clr-dg-column>{{
                'SCANNER.DESCRIPTION' | translate
            }}</clr-dg-column>
            <clr-dg-row
                *clrDgItems="let scanner of scanners"
                [clrDgItem]="scanner">
                <clr-dg-cell>{{ scanner.name }}</clr-dg-cell>
                <clr-dg-cell>{{ scanner.url }}</clr-dg-cell>
                <clr-dg-cell class="position-relative">
                    @if (scanner.is_default) {
                    <span class="label label-info">{{
                        scanner.is_default
                    }}</span>
                    } @if (!scanner.is_default) {
                    <span class="label label-info">{{
                        scanner.is_default
                    }}</span>
                    }
                </clr-dg-cell>
                <clr-dg-cell>{{ scanner.description }}</clr-dg-cell>
            </clr-dg-row>
            <clr-dg-footer>
                @if (scanners?.length > 0) {
                <span
                    >1 - {{ scanners?.length }} {{ 'WEBHOOK.OF' | translate }}
                </span>
                }
                {{ scanners?.length }} {{ 'WEBHOOK.ITEMS' | translate }}
                <clr-dg-pagination [clrDgPageSize]="10"></clr-dg-pagination>
            </clr-dg-footer>
        </clr-datagrid>
    </div>
    <div class="modal-footer">
        <button
            id="cancel"
            type="button"
            class="btn btn-outline"
            (click)="close()">
            {{ 'BUTTON.CANCEL' | translate }}
        </button>
        <button
            id="save-scanner"
            type="button"
            [clrLoading]="saveBtnState"
            class="btn btn-primary"
            [disabled]="!valid"
            (click)="save()">
            {{ 'BUTTON.OK' | translate }}
        </button>
    </div>
</clr-modal>