<!--
  ~ 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 [className]="className" fxFlex="100"
 fxLayout="column">
    <div fxLayout="column">
        <div class="type" fxLayout="column" fxLayoutAlign="start start">
            <div class="type-data" fxLayout="row" fxLayoutAlign="start start">
                <mat-icon *ngIf="isDataSetDescription" class="historic">lens</mat-icon>
                <mat-icon *ngIf="isDataStreamDescription" class="real-time">lens</mat-icon>
                <p *ngIf="isDataSetDescription">Data Set</p>
                <p *ngIf="isDataStreamDescription">Data Stream</p>
            </div>
        </div>
        <div fxLayoutAlign="start center" fxLayout="column" class="icon">
            <img *ngIf="getIconUrl() && !adapter.icon" [src]="getIconUrl()" class="iconImg"/>
            <img *ngIf="adapter.icon" [src]="adapter.icon" style="min-height: 50px;" class="iconImg"/>
        </div>
        <h3>{{adapter.name}}</h3>
    </div>
    <div fxLayout="row">
        <div fxFlex="70" class="description" fxLayoutAlign="start start">
            <p [innerHTML]="adapter.description"></p>
        </div>
        <div fxFlex="30" fxLayout="row" fxLayoutAlign="end end" *ngIf="$any(adapter).isTemplate" class="delete">
            <button id="{{ 'share-template-' + adapterLabel }}" matTooltip="Share Adapter Template" color="secondary" mat-fab (click)="shareAdapterTemplate(adapter); $event.stopPropagation()">
                <i class="material-icons" *ngIf="!deleteInProgress(adapter.couchDBId)">
                    share
                </i>
            </button>
            <button id="{{ 'delete-template-' + adapterLabel }}" matTooltip="Delete Adapter Template" color="primary" mat-fab (click)="deleteAdapterTemplate(adapter); $event.stopPropagation()" [disabled]="deleteInProgress(adapter.couchDBId)">
                <i class="material-icons" *ngIf="!deleteInProgress(adapter.couchDBId)">
                    delete
                </i>
                <mat-spinner *ngIf="deleteInProgress(adapter.couchDBId)" [diameter]="20" fxLayoutAlign="center"></mat-spinner>
            </button>

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