<h2>{{service.name}}</h2>
<app-tabs #tabsServiceView>
    <app-tab tabTitle="Service-Dienstleister-Daten" [tabIndex]="0">
        <div class="scollable">
            <app-service-data-view #serviceDataView (editService)="editServiceFunction($event)"></app-service-data-view>
        </div>
    </app-tab>
    <app-tab tabTitle="Ansprechpartner" [tabIndex]="1">
        <div class="scollable">
            <app-service-contact-person-view #serviceContactPersonView
                                              (createServiceContact)="createServiceContactFunction($event)"
                                              (editServiceContact)="editServiceContactFunction($event)"
                                              (deleteServiceContact)="deleteServiceContactFunction($event)"
                                              (shortcut)="shortcutFunction($event)"></app-service-contact-person-view>
        </div>
    </app-tab>
    <app-tab tabTitle="Termine" [tabIndex]="2">
        <div class="scollable">
            <app-service-meeting-view #serviceMeetingView (createMeeting)="createServiceMeetingFunction($event)"
                                       (editMeeting)="editServiceMeetingFunction($event)"
                                       (deleteMeeting)="deleteServiceMeetingFunction($event)"
                                       (editMeetingReport)="editServiceMeetingReportFunction($event)"></app-service-meeting-view>
        </div>
    </app-tab>
    <app-tab tabTitle="Notizen" [tabIndex]="3">
        <div class="scollable">
            <app-service-note-view #serviceNoteView (createNote)="createServiceNoteFunction($event)"
                                       (editNote)="editServiceNoteFunction($event)"
                                       (deleteNote)="deleteServiceNoteFunction($event)"></app-service-note-view>
        </div>
    </app-tab>
</app-tabs>
