app.component('tracker-card', {
  data: function () {
    return {
      count: 0
    }
  },
  props: ['tracker'],
  template: '<div class="card bg-gradient-secondary>' + 
                    '<div class="card-body">' + 
                            '<div class="card-text">' + 
                                '<input type="text"' + 
                                       'v-model="ticket.number"' + 
                                       'class="form-control trackingNameField"' + 
                                       '@keydown="updateStorage()"/>' + 
                                '<div class="ticket-time-info">' + 
                                    '<div v-if="ticket.tracking === true">' + 
                                        '<div class="text-danger font-weight-bolder float-end">' + 
                                            '<div class="spinner-grow spinner-grow-sm" role="status">' + 
                                                '<span class="sr-only">Tracking...</span>' + 
                                            '</div>' + 
                                            'Tracking' + 
                                        '</div>' + 
                                    '</div>' + 
                                '</div>' + 

                                '<div v-if="ticket.tracking === true" class="ticket-time-info">' + 
                                    '<span class="float-end">{{ getTrackingStartTime(ticket) }}</span>' + 
                                    '<span v-if="ticket.tracking === true">Gestartet: </span>' + 
                                    '<br/>' + 
                                    '<span class="float-end">{{ currentTrackingRunningFor(ticket) }}</span>' + 
                                    '<span v-if="ticket.tracking === true">Läuft seit: </span>' + 
                                '</div>' + 

                                '<div class="ticket-time-info">' +
                                    '<span class="float-end">{{ getTotalTime(ticket) }}</span>' +
                                    '<span class="current-ticket-info">Gesamt: </span>' +
                                '</div>' +

                                '<span class="float-end">{{ getTotalTimeToday(ticket) }}</span>' +
                                '<span class="">Heute: </span>' +
 +
                                '<div class="row">' +
                                    '<div class="col-md-12" v-if="!ticket.tracking">' +
                                        '<button type="button" class="btn btn-info ticket-action-button"' +
                                                '@click="startTracking(ticket)">' +
                                            '<i class="far fa-play-circle"></i>' +
                                        '</button>' +
                                    '</div>' +

                                    '<div class="col-md-12" v-else>' + 
                                        '<button type="button" class="btn btn-danger ticket-action-button"' + 
                                                '@click="stopTracking(ticket)">' + 
                                            '<i class="far fa-stop-circle"></i>' + 
                                        '</button>' + 
                                    '</div>' + 

                                    '<div class="col-md-12">' + 
                                        '<button class="btn btn-secondary ticket-action-button" data-bs-dismiss="modal"' + 
                                                '@click="archiveTicket(ticketIndex)" title="Archivieren">' + 
                                            '<i class="fas fa-archive"></i>' + 
                                        '</button>' + 
                                    '</div>' + 
                                '</div>' + 
                            '</div>' + 
                        '</div>' + 
                    '</div>'
});