<ion-header>
    <ion-navbar core-back-button>
        <ion-title>{{ 'core.settings.sites' | translate }}</ion-title>

        <ion-buttons end>
            <button ion-button icon-only [navPush]="'CoreSettingsListPage'" [attr.aria-label]="'core.mainmenu.appsettings' | translate">
                <ion-icon name="cog"></ion-icon>
            </button>
            <button *ngIf="sites && sites.length > 0" ion-button icon-only (click)="toggleDelete()" [attr.aria-label]="'core.delete' | translate">
                <ion-icon name="create" ios="md-create"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>
<ion-content>
    <ion-list>
        <a ion-item (click)="login(site.id)" *ngFor="let site of sites; let idx = index" detail-none>
            <ion-avatar item-start>
                <img [src]="site.avatar" core-external-content [siteId]="site.id" alt="{{ 'core.pictureof' | translate:{$a: site.fullname} }}" role="presentation" onError="this.src='assets/img/user-avatar.png'">
            </ion-avatar>
            <h2>{{site.fullName}}</h2>
            <p><core-format-text [text]="site.siteName" clean="true" [siteId]="site.id"></core-format-text></p>
            <p>{{site.siteUrl}}</p>
            <ion-badge item-end *ngIf="!showDelete && site.badge">{{site.badge}}</ion-badge>
            <button *ngIf="showDelete" item-end ion-button icon-only clear color="danger" (click)="deleteSite($event, idx)" [attr.aria-label]="'core.delete' | translate">
                <ion-icon name="trash"></ion-icon>
            </button>
        </a>
    </ion-list>
    <ion-fab core-fab bottom end>
        <button ion-fab (click)="add()" [attr.aria-label]="'core.add' | translate">
            <ion-icon name="add"></ion-icon>
        </button>
    </ion-fab>
</ion-content>
