<commit_before><i18n>
{
    "en": {
        "search": "Find",
        "last-name": "<NAME>",
        "first-name": "<NAME>",
        "official-code": "Official code",
        "total": "Total",
        "stop-edit-mode": "Stop editing",
        "new-period": "New period",
        "remove-period": "Remove period",
        "error-Timeout": "The server took too long to respond. Your changes have possibly not been saved. You can try again later.",
        "error-LoggedOut": "It looks like you have been logged out. Your changes have not been saved. Please reload the page after logging in and try again.",
        "error-Unknown": "An unknown error occurred. Your changes have possibly not been saved. You can try again later.",
        "checked-out": "Checked out",
        "not-checked-out": "Not checked out",
        "checkout-mode": "Checkout mode"
    },
    "nl": {
        "search": "Zoeken",
        "last-name": "Familienaam",
        "first-name": "Voornaam",
        "official-code": "Officiële code",
        "total": "Totaal",
        "stop-edit-mode": "Sluit editeren af",
        "new-period": "Nieuwe periode",
        "remove-period": "Verwijder periode",
        "error-LoggedOut": "Het lijkt erop dat je uitgelogt bent. Je wijzigingen werden niet opgeslagen. Herlaad deze pagina nadat je opnieuw ingelogd bent en probeer het opnieuw.",
        "error-Timeout": "De server deed er te lang over om te antwoorden. Je wijzigingen werden mogelijk niet opgeslagen. Probeer het later opnieuw.",
        "error-Unknown": "Er deed zich een onbekende fout voor. Je wijzigingen werden mogelijk niet opgeslagen. Probeer het later opnieuw.",
        "checked-out": "Uitgechecked",
        "not-checked-out": "Niet uitgechecked",
        "checkout-mode": "Uitcheckmodus"
    }
}
</i18n>

<template>
    <div>
        <div v-if="canEditPresence" class="u-flex" style="margin-bottom: 15px; max-width: fit-content">
            <div class="action-bar input-group">
                <b-form-input class="form-group action-bar-search" v-model="globalSearchQuery" @input="onFilterChanged"
                              type="text" :placeholder="$t('search')" debounce="750" autocomplete="off" style="box-shadow: none"></b-form-input>
                <div class="input-group-btn">
                    <button name="clear" class="btn btn-default" value="clear" @click="onFilterCleared">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                    </button>
                </div>
            </div>
        </div>
        <div>
            <div style="position: relative">
                <b-table ref="table" :foot-clone="canEditPresence && !!selectedPeriod && !checkoutMode" bordered :items="itemsProvider" :fields="fields" class="mod-presence mod-entry"
                         :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" :per-page="pagination.perPage"
                         :current-page="pagination.currentPage" :filter="globalSearchQuery" no-sort-reset>
                    <template slot="table-colgroup" v-if="canEditPresence && !!selectedPeriod">
                        <col>
                        <col>
                        <col v-if="canEditPresence && !creatingNew">
                        <template v-for="period in periodsReversed">
                            <col v-if="period === selectedPeriod" style="border: 1px double #8ea4b3">
                            <col v-else>
                        </template>
                    </template>
                    <template slot="table-colgroup" v-else-if="canEditPresence && creatingNew">
                        <col>
                        <col>
                        <col v-if="canEditPresence && !creatingNew">
                        <col style="border: 1px double #8ea4b3">
                        <col v-for="period in periodsReversed">
                    </template>
                    <template #head(fullname) v-if="canEditPresence">
                        <a class="tbl-sort-option" :aria-sort="getSortStatus('lastname')" @click="sortByNameField('lastname')">{{ $t('last-name') }}</a>
                        <a class="tbl-sort-option" :aria-sort="getSortStatus('firstname')" @click="sortByNameField('firstname')">{{ $t('first-name') }}</a>
                    </template>
                    <template #head(fullname) v-else>Student</template>
                    <template #foot(fullname)><span></span></template>
                    <template #head(official_code) v-if="canEditPresence">
                        <a class="tbl-sort-option" :aria-sort="getSortStatus('official_code')" @click="sortByNameField('official_code')">{{ $t('official-code') }}</a>
                    </template>
                    <template #head(official_code) v-else>{{ $t('official-code') }}</template>
                    <template #head(new_period)>
                        <div role="button" tabindex="0" class="select-period-btn" style="padding: 2px 4px 0" @keyup.enter="createResultPeriod('')" @click="createResultPeriod('')" :title="$t('new-period')">
                            <i aria-hidden="true" class="fa fa-plus" style="color: #337ab7"></i> <span class="sr-only">{{ $t('new-period') }}</span>
                        </div>
                    </template>
                    <template #foot(new_period)><span></span></template>
                    <template #foot(official_code)><span></span></template>
                    <template #cell(fullname)="{item}">
                        {{ item.lastname.toUpperCase() }}, {{ item.firstname }}
                    </template>
                    <template v-for="fieldKey in dynamicFieldKeys" v-slot:[`head(${fieldKey.key})`]="{label}">
                        <div v-if="canEditPresence" role="button" tabindex="0" @keyup.enter="setSelectedPeriod(fieldKey.id)" @click="setSelectedPeriod(fieldKey.id)" class="select-period-btn u-txt-truncate" :title="label">
                            <span v-if="label">{{ label }}</span>
                            <span v-else style="font-style: italic">{{ getPlaceHolder(fieldKey.id) }}</span>
                        </div>
                        <div v-else class="u-txt-truncate" style="font-weight: 400; text-align: center">
                            <span v-if="label">{{ label }}</span>
                            <span v-else style="font-style: italic">{{ getPlaceHolder(fieldKey.id) }}</span>
                        </div>
                    </template>
                    <template v-for="fieldKey in dynamicFieldKeys" v-slot:[`cell(${fieldKey.key})`]="{item}">
                        <div class="result-wrap">
                            <div :title="getStatusTitleForStudent(item, fieldKey.id)" class="color-code" :class="[getStatusColorForStudent(item, fieldKey.id) || 'mod-none']" style="cursor: default">
                                <span>{{ getStatusCodeForStudent(item, fieldKey.id) }}</span>
                            </div>
                        </div>
                    </template>
                    <template v-for="fieldKey in dynamicFieldKeys" v-slot:[`foot(${fieldKey.key})`]><span></span></template>
                    <template #head(period-entry-plh)>
                        <div class="u-flex u-gap-small" style="align-items:center">
                            <b-input type="text" autocomplete="off" :placeholder="$t('new-period') + '...'" style="font-weight: normal;height:30px;padding:6px;background:none;font-style: italic; pointer-events:none;box-shadow:none;border-color: #e9eaea;"></b-input>
                            <div style="min-width: 13px">
                                <div v-if="isSaving" class="glyphicon glyphicon-repeat glyphicon-spin"></div>
                            </div>
                        </div>
                    </template>
                    <template #cell(period-entry-plh)>
                        <div class="u-flex u-gap-small u-flex-wrap" style="pointer-events: none">
                            <button v-for="(status, index) in presenceStatuses" :key="`status-${index}`" class="color-code" style="opacity: .42"
                                    :class="[status.color]"><span>{{ status.code }}</span></button>
                        </div>
                    </template>
                    <template #head(period-entry)>
                        <div class="u-flex u-gap-small" style="align-items:center">
                            <b-input type="text" debounce="750" autocomplete="off" :placeholder="getPlaceHolder(selectedPeriod.id)" v-model="selectedPeriodLabel" style="font-weight: normal;height:30px;padding:6px;"></b-input>
                            <div style="min-width: 13px">
                                <div v-if="isSaving" class="glyphicon glyphicon-repeat glyphicon-spin"></div>
                            </div>
                        </div>
                        <div v-if="presence.has_checkout" class="selected-period-controls">
                            <div class="onoffswitch mod-checkout-choice" style="display: block;">
                                <input type="checkbox" id="onoffswitch-checkout" class="onoffswitch-checkbox"
                                       :checked="checkoutMode"
                                       @input="checkoutMode = !checkoutMode">
                                <label class="onoffswitch-label mod-checkout-choice" for="onoffswitch-checkout">
                                    <span class="onoffswitch-inner">
                                        <span class="onoffswitch-inner-before mod-checkout-choice">{{ $t('checkout-mode') }}</span>
                                        <span class="onoffswitch-inner-after mod-checkout-choice">{{ $t('checkout-mode') }}</span>
                                    </span>
                                    <span class="onoffswitch-switch mod-checkout-choice"></span>
                                </label>
                            </div>
                        </div>
                        <button :title="$t('stop-edit-mode')" class="btn btn-default btn-sm selected-period-close-btn" @click="selectedPeriod = null"><i aria-hidden="true" class="fa fa-close"></i><span class="sr-only">{{ $t('stop-edit-mode') }}</span></button>
                    </template>
                    <template #cell(period-entry)="{item}">
                        <template v-if="presence.has_checkout && checkoutMode">
                            <div v-if="item[`period#${selectedPeriod.id}-checked_in_date`]" class="onoffswitch mod-checkout" style="display: block;">
                                <input type="checkbox" :id="`onoffswitch-${item.id}`" class="onoffswitch-checkbox"
                                       :checked="item[`period#${selectedPeriod.id}-checked_out_date`] > item[`period#${selectedPeriod.id}-checked_in_date`]"
                                       @input="toggleCheckout(item)">
                                <label class="onoffswitch-label mod-checkout" :for="`onoffswitch-${item.id}`">
                                    <span class="onoffswitch-inner">
                                        <span class="onoffswitch-inner-before mod-checkout">{{ $t('checked-out') }}</span>
                                        <span class="onoffswitch-inner-after mod-checkout">{{ $t('not-checked-out') }}</span>
                                    </span>
                                    <span class="onoffswitch-switch mod-checkout"></span>
                                </label>
                            </div>
                            <div v-else :title="getStatusTitleForStudent(item, selectedPeriod.id)" class="color-code" :class="[getStatusColorForStudent(item, selectedPeriod.id) || 'mod-none']" style="cursor: default"><commit_msg>[Presence] Check if presence<commit_after><i18n>
{
    "en": {
        "search": "Find",
        "last-name": "<NAME>",
        "first-name": "<NAME>",
        "official-code": "Official code",
        "total": "Total",
        "stop-edit-mode": "Stop editing",
        "new-period": "New period",
        "remove-period": "Remove period",
        "error-Timeout": "The server took too long to respond. Your changes have possibly not been saved. You can try again later.",
        "error-LoggedOut": "It looks like you have been logged out. Your changes have not been saved. Please reload the page after logging in and try again.",
        "error-Unknown": "An unknown error occurred. Your changes have possibly not been saved. You can try again later.",
        "checked-out": "Checked out",
        "not-checked-out": "Not checked out",
        "checkout-mode": "Checkout mode"
    },
    "nl": {
        "search": "Zoeken",
        "last-name": "Familienaam",
        "first-name": "Voornaam",
        "official-code": "Officiële code",
        "total": "Totaal",
        "stop-edit-mode": "Sluit editeren af",
        "new-period": "Nieuwe periode",
        "remove-period": "Verwijder periode",
        "error-LoggedOut": "Het lijkt erop dat je uitgelogt bent. Je wijzigingen werden niet opgeslagen. Herlaad deze pagina nadat je opnieuw ingelogd bent en probeer het opnieuw.",
        "error-Timeout": "De server deed er te lang over om te antwoorden. Je wijzigingen werden mogelijk niet opgeslagen. Probeer het later opnieuw.",
        "error-Unknown": "Er deed zich een onbekende fout voor. Je wijzigingen werden mogelijk niet opgeslagen. Probeer het later opnieuw.",
        "checked-out": "Uitgechecked",
        "not-checked-out": "Niet uitgechecked",
        "checkout-mode": "Uitcheckmodus"
    }
}
</i18n>

<template>
    <div>
        <div v-if="canEditPresence" class="u-flex" style="margin-bottom: 15px; max-width: fit-content">
            <div class="action-bar input-group">
                <b-form-input class="form-group action-bar-search" v-model="globalSearchQuery" @input="onFilterChanged"
                              type="text" :placeholder="$t('search')" debounce="750" autocomplete="off" style="box-shadow: none"></b-form-input>
                <div class="input-group-btn">
                    <button name="clear" class="btn btn-default" value="clear" @click="onFilterCleared">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                    </button>
                </div>
            </div>
        </div>
        <div>
            <div style="position: relative">
                <b-table ref="table" :foot-clone="canEditPresence && !!selectedPeriod && !checkoutMode" bordered :items="itemsProvider" :fields="fields" class="mod-presence mod-entry"
                         :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" :per-page="pagination.perPage"
                         :current-page="pagination.currentPage" :filter="globalSearchQuery" no-sort-reset>
                    <template slot="table-colgroup" v-if="canEditPresence && !!selectedPeriod">
                        <col>
                        <col>
                        <col v-if="canEditPresence && !creatingNew">
                        <template v-for="period in periodsReversed">
                            <col v-if="period === selectedPeriod" style="border: 1px double #8ea4b3">
                            <col v-else>
                        </template>
                    </template>
                    <template slot="table-colgroup" v-else-if="canEditPresence && creatingNew">
                        <col>
                        <col>
                        <col v-if="canEditPresence && !creatingNew">
                        <col style="border: 1px double #8ea4b3">
                        <col v-for="period in periodsReversed">
                    </template>
                    <template #head(fullname) v-if="canEditPresence">
                        <a class="tbl-sort-option" :aria-sort="getSortStatus('lastname')" @click="sortByNameField('lastname')">{{ $t('last-name') }}</a>
                        <a class="tbl-sort-option" :aria-sort="getSortStatus('firstname')" @click="sortByNameField('firstname')">{{ $t('first-name') }}</a>
                    </template>
                    <template #head(fullname) v-else>Student</template>
                    <template #foot(fullname)><span></span></template>
                    <template #head(official_code) v-if="canEditPresence">
                        <a class="tbl-sort-option" :aria-sort="getSortStatus('official_code')" @click="sortByNameField('official_code')">{{ $t('official-code') }}</a>
                    </template>
                    <template #head(official_code) v-else>{{ $t('official-code') }}</template>
                    <template #head(new_period)>
                        <div role="button" tabindex="0" class="select-period-btn" style="padding: 2px 4px 0" @keyup.enter="createResultPeriod('')" @click="createResultPeriod('')" :title="$t('new-period')">
                            <i aria-hidden="true" class="fa fa-plus" style="color: #337ab7"></i> <span class="sr-only">{{ $t('new-period') }}</span>
                        </div>
                    </template>
                    <template #foot(new_period)><span></span></template>
                    <template #foot(official_code)><span></span></template>
                    <template #cell(fullname)="{item}">
                        {{ item.lastname.toUpperCase() }}, {{ item.firstname }}
                    </template>
                    <template v-for="fieldKey in dynamicFieldKeys" v-slot:[`head(${fieldKey.key})`]="{label}">
                        <div v-if="canEditPresence" role="button" tabindex="0" @keyup.enter="setSelectedPeriod(fieldKey.id)" @click="setSelectedPeriod(fieldKey.id)" class="select-period-btn u-txt-truncate" :title="label">
                            <span v-if="label">{{ label }}</span>
                            <span v-else style="font-style: italic">{{ getPlaceHolder(fieldKey.id) }}</span>
                        </div>
                        <div v-else class="u-txt-truncate" style="font-weight: 400; text-align: center">
                            <span v-if="label">{{ label }}</span>
                            <span v-else style="font-style: italic">{{ getPlaceHolder(fieldKey.id) }}</span>
                        </div>
                    </template>
                    <template v-for="fieldKey in dynamicFieldKeys" v-slot:[`cell(${fieldKey.key})`]="{item}">
                        <div class="result-wrap">
                            <div :title="getStatusTitleForStudent(item, fieldKey.id)" class="color-code" :class="[getStatusColorForStudent(item, fieldKey.id) || 'mod-none']" style="cursor: default">
                                <span>{{ getStatusCodeForStudent(item, fieldKey.id) }}</span>
                            </div>
                        </div>
                    </template>
                    <template v-for="fieldKey in dynamicFieldKeys" v-slot:[`foot(${fieldKey.key})`]><span></span></template>
                    <template #head(period-entry-plh)>
                        <div class="u-flex u-gap-small" style="align-items:center">
                            <b-input type="text" autocomplete="off" :placeholder="$t('new-period') + '...'" style="font-weight: normal;height:30px;padding:6px;background:none;font-style: italic; pointer-events:none;box-shadow:none;border-color: #e9eaea;"></b-input>
                            <div style="min-width: 13px">
                                <div v-if="isSaving" class="glyphicon glyphicon-repeat glyphicon-spin"></div>
                            </div>
                        </div>
                    </template>
                    <template #cell(period-entry-plh)>
                        <div class="u-flex u-gap-small u-flex-wrap" style="pointer-events: none">
                            <button v-for="(status, index) in presenceStatuses" :key="`status-${index}`" class="color-code" style="opacity: .42"
                                    :class="[status.color]"><span>{{ status.code }}</span></button>
                        </div>
                    </template>
                    <template #head(period-entry)>
                        <div class="u-flex u-gap-small" style="align-items:center">
                            <b-input type="text" debounce="750" autocomplete="off" :placeholder="getPlaceHolder(selectedPeriod.id)" v-model="selectedPeriodLabel" style="font-weight: normal;height:30px;padding:6px;"></b-input>
                            <div style="min-width: 13px">
                                <div v-if="isSaving" class="glyphicon glyphicon-repeat glyphicon-spin"></div>
                            </div>
                        </div>
                        <div v-if="presence && presence.has_checkout" class="selected-period-controls">
                            <div class="onoffswitch mod-checkout-choice" style="display: block;">
                                <input type="checkbox" id="onoffswitch-checkout" class="onoffswitch-checkbox"
                                       :checked="checkoutMode"
                                       @input="checkoutMode = !checkoutMode">
                                <label class="onoffswitch-label mod-checkout-choice" for="onoffswitch-checkout">
                                    <span class="onoffswitch-inner">
                                        <span class="onoffswitch-inner-before mod-checkout-choice">{{ $t('checkout-mode') }}</span>
                                        <span class="onoffswitch-inner-after mod-checkout-choice">{{ $t('checkout-mode') }}</span>
                                    </span>
                                    <span class="onoffswitch-switch mod-checkout-choice"></span>
                                </label>
                            </div>
                        </div>
                        <button :title="$t('stop-edit-mode')" class="btn btn-default btn-sm selected-period-close-btn" @click="selectedPeriod = null"><i aria-hidden="true" class="fa fa-close"></i><span class="sr-only">{{ $t('stop-edit-mode') }}</span></button>
                    </template>
                    <template #cell(period-entry)="{item}">
                        <template v-if="presence && presence.has_checkout && checkoutMode">
                            <div v-if="item[`period#${selectedPeriod.id}-checked_in_date`]" class="onoffswitch mod-checkout" style="display: block;">
                                <input type="checkbox" :id="`onoffswitch-${item.id}`" class="onoffswitch-checkbox"
                                       :checked="item[`period#${selectedPeriod.id}-checked_out_date`] > item[`period#${selectedPeriod.id}-checked_in_date`]"
                                       @input="toggleCheckout(item)">
                                <label class="onoffswitch-label mod-checkout" :for="`onoffswitch-${item.id}`">
                                    <span class="onoffswitch-inner">
                                        <span class="onoffswitch-inner-before mod-checkout">{{ $t('checked-out') }}</span>
                                        <span class="onoffswitch-inner-after mod-checkout">{{ $t('not-checked-out') }}</span>
                                    </span>
                                    <span class="onoffswitch-switch mod-checkout"></span>
                                </label>
                            </div>
                            <div v-else :title="getStatusTitleForStudent(item, selectedPeriod.id)" class="color-code" :class="[getStatusColorForStudent(item, selectedPeriod.id) || 'mod-none']" style="cursor: default">
{'fraction_non_alphanumeric': 0.15074910318632623, 'fraction_numerical': 0.0037982696771470775, 'mean_word_length': 1.7624154814642108, 'pattern_counts': {'":': 60, '<': 331, '<?xml version=': 0, '>': 333, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 30, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5111630', 'n_tokens_mistral': 6570, 'n_tokens_neox': 6256, 'n_words': 1218}