<div class="media-type" [class.expanded]="isEditing()">
    <div class="header">
        <div class="name">
            <validation-problem [model]="item"></validation-problem>
            <span class="fa fa-fw fa-file-o"></span>
            <span title="{{ item.getName() }}">{{ item.getName() }}</span>
        </div>
        <div class="type" (click)="toggleType()" [class.selected]="isEditingType()">
            <span class="fa fa-angle-right" [class.fa-angle-down]="isEditingType()"></span>
            <schema-type [type]="displayType()"></schema-type>
        </div>
        <div class="examples" (click)="toggleExamples()" [class.selected]="isEditingExamples()">
            <span class="fa fa-angle-right" [class.fa-angle-down]="isEditingExamples()"></span>
            <span [class.empty]="!mediaTypeHasExamples()">{{ displayExamples() }}</span>
        </div>
        <div class="actions">
            <div class="dropdown dropdown-kebab-pf" dropdown>
                <button class="btn btn-link dropdown-toggle" dropdownToggle type="button" (click)="$event.preventDefault()"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    <span class="fa fa-ellipsis-v"></span>
                </button>
                <ul class="dropdown-menu dropdown-menu-right" *dropdownMenu>
                    <li><a (click)="delete()"><span class="fa fa-fw fa-trash"></span><span>Delete</span></a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="body" *ngIf="isEditing()">
        <div class="content container-fluid">
            <form  class="form-horizontal">
                <div class="col-md-11">
                    <div class="mt-content" *ngIf="isEditingType()">
                        <div class="mt-type">
                            <schema-type-editor [document]="document()" [value]="model()" [isParameter]="false"
                                                (onChange)="changeType($event)"></schema-type-editor>
                        </div>
                    </div>
                    <div class="mt-examples" *ngIf="isEditingExamples()">
                        <div class="form-label">Examples</div>
                        <signpost *ngIf="!mediaTypeHasExamples()">
                            <span>No examples have been defined.</span>
                            <a (click)="addExampleDialog.open()">Add an example</a>
                        </signpost>
                        <div *ngIf="mediaTypeHasExamples()">
                            <table class="table table-striped table-bordered table-examples">
                                <thead>
                                <tr>
                                    <th>Name</th>
                                    <th class="pre-actions">Example</th>
                                    <th class="actions"></th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr *ngFor="let example of mediaTypeExamples()">
                                    <td class="name">
                                        <validation-problem [model]="example"></validation-problem>
                                        <span>{{ example.getName() }}</span>
                                    </td>
                                    <td class="value pre-actions">
                                        <span>{{ exampleValue(example) }}</span>
                                    </td>
                                    <td class="actions">
                                        <div>
                                            <icon-button (onClick)="deleteExample(example)" [pullRight]="true" type="delete"
                                                         [title]="'Delete example.'"></icon-button>
                                            <icon-button (onClick)="editExampleDialog.open(example)" [pullRight]="true" type="edit"
                                                         [title]="'Edit example.'"></icon-button>
                                        </div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <a (click)="addExampleDialog.open()">Add an example</a>
                            <a (click)="deleteAllExamples()" class="pull-right">Delete all examples</a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<add-example-dialog #addExampleDialog (onAdd)="addExample($event)" [schema]="schemaForExample()"></add-example-dialog>
<edit-example-dialog #editExampleDialog (onEdit)="editExample($event)" [schema]="schemaForExample()"></edit-example-dialog>
