<div class="content" #content>
    <h1 #headline>Service-Dienstleister</h1>

    <app-tabs #tabsCM>
        <app-tab tabTitle="Service-Dienstleister" [tabIndex]="0">
            <app-service-list #servicesList (rowIsClicked)="rowClickedService($event)"
                                 (createNewService)="createService()"></app-service-list>
        </app-tab>
        <app-tab tabTitle="Ansprechpartner (Service-Dienstleister)" [tabIndex]="1">
            <app-service-contact-list #servicesContactList (shortcut)="shortcutFunction($event)"></app-service-contact-list>
        </app-tab>
    </app-tabs>
</div>

<app-modal #modalService>
    <app-service-view #serviceView
                         (editService)="editServiceFunction($event)"
                         (createServiceContact)="createServiceContactFunction($event)"
                         (editServiceContact)="editServiceContactFunction($event)"
                         (deleteServiceContact)="deleteServiceContactFunction($event)"
                         (createNote)="createServiceNoteFunction($event)"
                         (editNote)="editServiceNoteFunction($event)"
                         (deleteNote)="deleteServiceNoteFunction($event)"
                         (createMeeting)="createServiceMeetingFunction($event)"
                         (editMeeting)="editServiceMeetingFunction($event)"
                         (deleteMeeting)="deleteServiceMeetingFunction($event)"
                         (editMeetingReport)="editServiceMeetingReportFunction($event)"
                         (shortcut)="shortcutFunction($event)"></app-service-view>
</app-modal>
<app-modal [overlay]="true" #modalServiceDataEdit>
    <div id="service-data-modal">
        <app-service-data-edit #serviceDataEdit (createService)="createServiceFunction($event)"></app-service-data-edit>
    </div>
</app-modal>