<template>
    <div class="modal modal-fullscreen fade" id="showTrackersModal" tabindex="-1" role="dialog"
         aria-labelledby="showTrackersModalLabel"
         aria-hidden="true">
        <div class="modal-dialog showTrackersModalDialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-clock"></i> Tracker</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <template v-for="(tracker, trackerIndex) in trackers">
                            <div class="col-md-6">
                                <h6><span v-if="isTrackerNumber(tracker.number)"></span>{{ tracker.number }}</h6>

                                <div class="form-group">
                                    <input type="text" class="form-control" v-model="tracker.description" @keydown="updateStorage()" placeholder="Beschreibung">
                                </div>

                                <span v-if="getTotalTime(tracker) > 0">Gesamtzeit: {{getTotalTime(tracker)}}</span>
                                <br>
                                <div class="row">
                                    <div class="col">
                                        <button class="btn btn-info tracker-action-button"
                                                @click="showCustomBookingForTracker(tracker)"
                                                title="Manuelle Buchung">
                                            <i class="fas fa-user-edit"></i>
                                        </button>
                                    </div>
                                    <div class="col">
                                        <button class="btn btn-warning tracker-action-button" data-bs-dismiss="modal"
                                                @click="archiveTracker(trackerIndex)" title="Archivieren">
                                            <i class="fas fa-archive"></i>
                                        </button>
                                    </div>
                                    <div class="col" v-if="tracker.history.length > 0">
                                        <button class="btn btn-info tracker-action-button" data-bs-dismiss="modal"
                                                @click="showHistoryForTracker(tracker)" title="History">
                                            <i class="fas fa-history"></i>
                                        </button>
                                    </div>
                                    <div class="col">
                                        <button class="btn btn-danger tracker-action-button"
                                                @click="deleteTracker(trackerIndex)" title="Löschen">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                    <div class="col" v-if="trackerSystemUrl">
                                        <a v-if="isTrackerNumber(tracker.number)" :href="trackerSystemUrl + tracker.number.replace('#', '')"
                                           target="_blank" class="btn btn-dark tracker-action-button" title="Tracker">
                                            <i class="fas fa-external-link-square-alt"></i>
                                        </a>
                                    </div>
                                </div>
                                <br/>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "TrackersDetail"
}
</script>

<style scoped>

</style>