<div class="container-fluid" *ngIf="InfoSystem">
    <div class="row">
        <div class="col-sm-11 pl-0">
            <div class="element-info-label">
                <strong>{{InfoSystem.fcName}}</strong>
            </div>
        </div>
        <div class="col-sm-1 text-right">
            <div class="fa fa-times close-button" title="Закрыть" (click)="closeCard()"></div>
        </div>
    </div>
    <div class="row element-info_row">
      <div class="col-sm-3 px-0">Оператор</div>
      <div class="col-sm-9">{{InfoSystem.operator?.name}}</div>
    </div>
    <div class="row element-info_row">
        <div class="col-sm-3 px-0">Назначение</div>
        <div class="col-sm-9">{{InfoSystem.purpose}}</div>
    </div>
    <div class="row">
      <strong>Информационные системы</strong>
    </div>
    <div class="row mt-2">

            <kendo-grid [kendoGridBinding]="InfoSystem.infSysVersions"
                        [pageSize]="pageSize"
                        [pageable]="isPageble">
            <kendo-grid-column *ngFor="let column of Columns"
                                [field]="column.code"
                                [title]="column.name"
                                [style] = "{'text-align': 'center'}"
                                [headerStyle] = "{'text-align': 'center'}"
                                width="100">
                                <ng-template kendoGridCellTemplate let-versionItem>
                                    <div *ngIf="column.type == 'string' || column.type == 'text' || column.type == 'number'">
                                            {{versionItem[column.code]}}
                                    </div>
                                    <div *ngIf="column.type == 'datetime'">
                                            {{versionItem[column.code] | date:"dd/MM/yyyy"}}
                                    </div>
                                    <div *ngIf="column.type == 'indicator'">
                                        <div class="pesonal-lk__wrap">
                                            <div class="pesonal-lk__wrap-center">
                                                <div class="pesonal-lk">
                                                    <div *ngIf="versionItem[column.code]"
                                                        class="pesonal-lk__marker" [style.backgroundColor]="getIndicatorColor(versionItem[column.code].type)"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div *ngIf="column.type == 'object' && column.hasLink">
                                            <a [href]="versionItem[column.code].id" [title]="versionItem[column.code].name" class="object-link"
                                                [target]="AnchorTargetValue" *ngIf="versionItem[column.code]">
                                                {{versionItem[column.code].name}}
                                            </a>
                                    </div>
                                </ng-template>
            </kendo-grid-column>
            <kendo-grid-column-group title='Данные' [headerStyle] = "{'text-align': 'center'}" width="90">
                    <kendo-grid-column field="infRegistry" [headerStyle]="{'display': 'none'}" width="30" [style]="{'text-align':'center'}">
                            <ng-template kendoGridCellTemplate let-versionItem>
                                <div *ngIf="versionItem.infRegistry">
                                    <a [href]="versionItem.infRegistry" [title]="'Информационные реестры'"
                                    class="infoRegistry_active" [target]="AnchorTargetValue"></a>
                                </div>
                                <div *ngIf="!versionItem.infRegistry" class="infoRegistry_inactive"></div>
                            </ng-template>
                    </kendo-grid-column>
                    <kendo-grid-column field="interDoc" [headerStyle]="{'display': 'none'}" width="30" [style]="{'text-align':'center'}">
                            <ng-template kendoGridCellTemplate let-versionItem>
                                <div *ngIf="versionItem.interDoc">
                                    <a [href]="versionItem.interDoc" [title]="'Интерактивные документы'" class="interactiveDocumnts_active"
                                    [target]="AnchorTargetValue"></a>
                                </div>
                                <div *ngIf="!versionItem.interDoc" class="interactiveDocumnts_inactive"></div>
                            </ng-template>
                    </kendo-grid-column>
                    <kendo-grid-column field="doc" [headerStyle]="{'display': 'none'}" width="30" [style]="{'text-align':'center'}">
                            <ng-template kendoGridCellTemplate let-versionItem>
                                <div *ngIf="versionItem.doc">
                                    <a [href]="versionItem.doc" [title]="'Документация'" class="documents_active"
                                    [target]="AnchorTargetValue"></a>
                                </div>
                                <div *ngIf="!versionItem.doc" class="documents_inactive"></div>
                            </ng-template>
                    </kendo-grid-column>
            </kendo-grid-column-group>
            <kendo-grid-messages noRecords="Отсутствуют данные для отображения."
            pagerLastPage="Перейти на последнюю страницу" pagerFirstPage="Перейти на первую страницу"
                pagerNextPage="Перейти на следующую страницу" pagerPreviousPage="Перейти на предыдущую страницу"
                pagerItemsPerPage="элементов на страницу" sortAscending="Сортировать по возрастанию"
                sortDescending="Сортировать по убыванию">
            </kendo-grid-messages>
            <ng-template kendoGridNoRecordsTemplate>
                    Отсутствуют данные для отображения.
            </ng-template>
            <ng-template kendoPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
                    <kendo-pager-prev-buttons></kendo-pager-prev-buttons>
                    <kendo-pager-numeric-buttons [buttonCount]="totalPages"></kendo-pager-numeric-buttons>
                    <kendo-pager-next-buttons></kendo-pager-next-buttons>
                    <kendo-pager-page-sizes [pageSizes]="[10, 20, 50, 100]"></kendo-pager-page-sizes>
            </ng-template>
            </kendo-grid>

    </div>
</div>