<aside class="admin-pill-nav solid with-actions">
    <div class="new-localization">
        <button mat-button class="button primary flat" (click)="showCrupdateLocalizationModal()" *ngIf="currentUser.hasPermission('localizations.create')">
            <mat-icon svgIcon="add"></mat-icon>
            <span trans>New Localization</span>
        </button>
    </div>
    <div class="nav-item" *ngFor="let localization of localizations" (click)="setSelectedLocalization(localization)" [class.selected]="selectedLocalization.model.id == localization.model.id">
        <div class="name">{{localization.model.name.replace('-', ' ')}}</div>

        <div class="actions">
            <button class="no-style" (click)="$event.stopPropagation()" [matMenuTriggerFor]="actionsMenu" ><mat-icon svgIcon="settings" class="size-22"></mat-icon></button>
            <mat-menu #actionsMenu>
                <div mat-menu-item (click)="setDefaultLocalization(localization)" *ngIf="currentUser.hasPermission('settings.update')" trans>Set as Default</div>
                <div mat-menu-item (click)="showCrupdateLocalizationModal(localization)" *ngIf="localization.name !== 'English' && currentUser.hasPermission('localizations.update')" trans>Rename</div>
                <div mat-menu-item (click)="confirmLocalizationDeletion(localization)" *ngIf="localization.name !== 'English' && currentUser.hasPermission('localizations.delete')" trans>Delete</div>
            </mat-menu>
        </div>
    </div>
    <div class="update-translations">
        <button mat-raised-button color="accent" class="button primary" (click)="updateLocalization()" *ngIf="currentUser.hasPermission('localizations.update')" trans>Update</button>
    </div>
</aside>

<section class="admin-table-panel spacing">
    <div class="admin-table-panel-header">
        <div class="header-inner default">
            <div class="left">
                <button mat-raised-button color="accent" (click)="addLine()" trans>Add New Translation</button>
            </div>
            <div class="right">
                <div class="input-container">
                    <input type="text" class="search" placeholder="Search Translations" trans-placeholder [formControl]="searchQuery">
                    <mat-icon svgIcon="search"></mat-icon>
                </div>
            </div>
        </div>
    </div>
    <div class="admin-table admin-table-bordered admin-table-compact admin-table-center-vertical">

        <mat-table [dataSource]="tableDataSource">
            <ng-container matColumnDef="sourceText">
                <mat-header-cell *matHeaderCellDef trans>Source Text</mat-header-cell>
                <mat-cell *matCellDef="let line">{{line.key}} </mat-cell>
            </ng-container>

            <ng-container matColumnDef="translation">
                <mat-header-cell *matHeaderCellDef trans>Translation</mat-header-cell>
                <mat-cell *matCellDef="let line">
                    <input type="text" class="admin-table-item translation" id="{{line.key}}" [(ngModel)]="selectedLocalization.lines[line.key]">
                </mat-cell>
            </ng-container>

            <mat-header-row *matHeaderRowDef="['sourceText', 'translation']"></mat-header-row>
            <mat-row *matRowDef="let row; columns: ['sourceText', 'translation']"></mat-row>
        </mat-table>
    </div>
</section>
