<template>
    <q-card-section
        horizontal
        class="text-uppercase text-center items-center q-pa-none"
    >  
        <!-- shift row itself -->
        <q-card-section class="col q-pa-none">
            <q-card-section horizontal class="col q-pa-none">
                <!-- punch-in timestamps -->
                <q-card-section class="col q-pa-none">
                    <q-item-label class="text-weight-bolder text-primary" style="font-size: 0.7em;">
                            {{ $t('shiftColumns.labelIn') }}
                    </q-item-label>
                </q-card-section>
        
                <!-- arrows pointing to punch-out timestamps -->
                <q-card-section class="col q-py-none q-px-sm">
                </q-card-section>
        
                <!-- punch-out timestamps -->
                <q-card-section class="col q-pa-none">
                    <q-item-label class="text-weight-bolder text-primary" style="font-size: 0.7em;">
                        {{ $t('shiftColumns.labelOut') }}
                    </q-item-label>
                </q-card-section>

                <!-- comment button -->
                <q-card-section class="col column q-pa-none">
                </q-card-section>
            </q-card-section>
        </q-card-section>
    </q-card-section>
</template>