<vdr-action-bar>
    <vdr-ab-left>
        <div *ngIf="selectedCountryIds.length">
            <button class="btn btn-sm" (click)="addCountriesToZone()">
                {{ 'settings.add-countries-to-zone' | translate }}
            </button>
            <button class="btn btn-sm" (click)="removeCountriesFromZone()">
                {{ 'settings.remove-countries-from-zone' | translate }}
            </button>
        </div>
    </vdr-ab-left>

    <vdr-ab-right>
        <a class="btn btn-primary" [routerLink]="['./create']">
            <clr-icon shape="plus"></clr-icon>
            {{ 'settings.create-new-country' | translate }}
        </a>
    </vdr-ab-right>
</vdr-action-bar>

<vdr-data-table
    [items]="countriesWithZones$ | async"
    [allSelected]="areAllSelected()"
    [isRowSelectedFn]="isCountrySelected"
    (rowSelectChange)="toggleSelectCountry($event)"
    (allSelectChange)="toggleSelectAll()"
>
    <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>
    <vdr-dt-column [expand]="true">{{ 'common.name' | translate }}</vdr-dt-column>
    <vdr-dt-column>{{ 'settings.zone' | translate }}</vdr-dt-column>
    <vdr-dt-column>{{ 'common.enabled' | translate }}</vdr-dt-column>
    <vdr-dt-column></vdr-dt-column>
    <vdr-dt-column></vdr-dt-column>
    <ng-template let-country="item">
        <td class="left align-middle">{{ country.code }}</td>
        <td class="left align-middle">{{ country.name }}</td>
        <td class="left align-middle">
            <vdr-chip *ngFor="let zone of country.zones" [colorFrom]="zone.id">{{ zone.name }}</vdr-chip>
        </td>
        <td class="left align-middle">
            <clr-icon
                [class.enabled]="country.enabled"
                [attr.shape]="country.enabled ? 'check' : 'times'"
            ></clr-icon>
        </td>
        <td class="right align-middle">
            <vdr-table-row-action
                iconShape="edit"
                [label]="'common.edit' | translate"
                [linkTo]="['./', country.id]"
            ></vdr-table-row-action>
        </td>
        <td class="right align-middle">
            <clr-dropdown>
                <button type="button" class="btn btn-link btn-sm" clrDropdownTrigger>
                    {{ 'common.actions' | translate }}
                    <clr-icon shape="caret down"></clr-icon>
                </button>
                <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
                    <button
                        type="button"
                        class="delete-button"
                        (click)="deleteCountry(country.id)"
                        clrDropdownItem
                    >
                        {{ 'common.delete' | translate }}
                    </button>
                </clr-dropdown-menu>
            </clr-dropdown>
        </td>
    </ng-template>
</vdr-data-table>
