<table class="datatable table table-striped table-bordered">
    <thead>
    <tr *ngIf="!isReadOnly">
        <th width="33%">Option</th>
        <th width="50%">Value</th>
        <th width="17%">Actions</th>
    </tr>
    <tr *ngIf="isReadOnly">
        <th width="50%">Option</th>
        <th width="50%">Value</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let selectedOption of selectedOptions; let i = index;">
        <td>
            {{selectedOption.name}}
        </td>
        <td>
            {{selectedOption.value}}
        </td>
        <td *ngIf="!isReadOnly">
            <button (click)="removeAdvancedOption(i)" class="btn btn-default" href="#">Delete</button>
        </td>
    </tr>
    <tr *ngIf="newOption">
        <td class="input-group">
            <select class="form-control" name="newOptionTypeSelection" [(ngModel)]="newOption.name" (change)="newOptionTypeChanged()">
                <option *ngFor="let option of availableOptions" value="{{option.name}}">{{option.name}}</option>
            </select>
            <wu-popover class="input-group-addon" *ngIf="currentSelectedOptionDefinition?.description" [content]="currentSelectedOptionDefinition?.description"></wu-popover>
        </td>
        <td [class.bg-danger]="newOptionError" align="right">
            <span class="text-danger">{{newOptionError}}</span>
            <div [ngSwitch]="currentOptionType">
                <input *ngSwitchCase="'text'" type="text" name="currentOptionInput" class="form-control" [(ngModel)]="newOption.value">
                <input *ngSwitchCase="'checkbox'" type="checkbox" class="form-control" name="currentOptionInput" [(ngModel)]="newOption.value">
                <select *ngSwitchCase="'select'" class="form-control" name="newOptionSelect" [(ngModel)]="newOption.value">
                    <option *ngFor="let option of sortOptionValues(currentSelectedOptionDefinition.availableValues)" value="{{option}}">{{option}}</option>
                </select>
            </div>
        </td>
        <td>
            <button (click)="addAdvancedOption($event)" class="btn btn-default" i18n>Add</button>
            <button (click)="cancelAddAdvancedOption($event)" class="btn btn-default" i18n>Cancel</button>
        </td>
    </tr>
    </tbody>
</table>

<button *ngIf="!newOption && !isReadOnly" (click)="startAddNew()" class="btn btn-default" i18n="button">Add option</button>

<p class="help-block" *ngIf="!isReadOnly" i18n="advanced options description">Specify additional options here. Click the information button next to each option for details.</p>
