<vdr-action-bar>
    <vdr-ab-right>
        <vdr-action-bar-items locationId="shipping-method-list"></vdr-action-bar-items>
        <a class="btn btn-primary" [routerLink]="['./create']" *vdrIfPermissions="'CreateSettings'">
            <clr-icon shape="plus"></clr-icon>
            {{ 'settings.create-new-shipping-method' | translate }}
        </a>
    </vdr-ab-right>
</vdr-action-bar>

<vdr-data-table
    [items]="items$ | async"
    [itemsPerPage]="itemsPerPage$ | async"
    [totalItems]="totalItems$ | async"
    [currentPage]="currentPage$ | async"
    (pageChange)="setPageNumber($event)"
    (itemsPerPageChange)="setItemsPerPage($event)"
>
    <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>
    <vdr-dt-column>{{ 'common.description' | translate }}</vdr-dt-column>
    <vdr-dt-column></vdr-dt-column>
    <vdr-dt-column></vdr-dt-column>
    <ng-template let-shippingMethod="item">
        <td class="left align-middle">{{ shippingMethod.code }}</td>
        <td class="left align-middle">{{ shippingMethod.description }}</td>
        <td class="right align-middle">
            <vdr-table-row-action
                iconShape="edit"
                [label]="'common.edit' | translate"
                [linkTo]="['./', shippingMethod.id]"
            ></vdr-table-row-action>
        </td>
        <td class="right align-middle">
            <vdr-dropdown>
                <button type="button" class="btn btn-link btn-sm" vdrDropdownTrigger>
                    {{ 'common.actions' | translate }}
                    <clr-icon shape="caret down"></clr-icon>
                </button>
                <vdr-dropdown-menu vdrPosition="bottom-right">
                    <button
                        type="button"
                        class="delete-button"
                        (click)="deleteShippingMethod(shippingMethod.id)"
                        [disabled]="!('DeleteSettings' | hasPermission)"
                        vdrDropdownItem
                    >
                        <clr-icon shape="trash" class="is-danger"></clr-icon>
                        {{ 'common.delete' | translate }}
                    </button>
                </vdr-dropdown-menu>
            </vdr-dropdown>
        </td>
    </ng-template>
</vdr-data-table>

<div class="testing-tool">
    <clr-accordion>
        <clr-accordion-panel>
            <clr-accordion-title>{{ 'settings.test-shipping-methods' | translate }}</clr-accordion-title>
            <clr-accordion-content *clrIfExpanded>
                <div class="clr-row">
                    <div class="clr-col">
                        <vdr-test-order-builder
                            (orderLinesChange)="setTestOrderLines($event)"
                        ></vdr-test-order-builder>
                    </div>
                    <div class="clr-col">
                        <vdr-test-address-form
                            (addressChange)="setTestAddress($event)"
                        ></vdr-test-address-form>
                        <vdr-shipping-eligibility-test-result
                            [currencyCode]="(activeChannel$ | async)?.currencyCode"
                            [okToRun]="allTestDataPresent()"
                            [testDataUpdated]="testDataUpdated"
                            [testResult]="testResult$ | async"
                            (runTest)="runTest()"
                        ></vdr-shipping-eligibility-test-result>
                    </div>
                </div>
            </clr-accordion-content>
        </clr-accordion-panel>
    </clr-accordion>
</div>
