<commit_before><template>
    <div :id="id" class="category-header handle category-handle" :class="{ 'null-category': !category.title }">
        <div class="item-header-bar">
            <div class="rb-category-title">
                <button v-if="category.title" :aria-label="`Color Picker voor ${category.title || 'Criteria'}`" :aria-expanded="isColorPickerOpened ? 'true' : 'false'" :aria-controls="id + '--swatches'" class="btn-color" :style="{'background-color': category.color}" @click="openColorPickerForCategory(category)"></button>
                <h2 class="title" @dblclick.stop="startEditing">{{ category.title || 'Lijst met criteria' }}</h2>
            </div>
            <button class="item-actions" :class="{'show-menu': showMenuActions}" @click.stop="$emit('item-actions', id)"><i :class="showMenuActions ? 'fa fa-close' : 'fa fa-ellipsis-h'"/></button>
            <div class="action-menu" :class="{'show-menu': showMenuActions}">
                <ul class="action-menu-list">
                    <li @click.stop="startEditing" @keyup.space.enter="startEditing" class="action-menu-list-item" tabindex="0"><i class="fa fa-pencil" /><span>{{ category.title ? 'Wijzig naam' : 'Wijzig naar categorie' }}</span></li>
                    <li @click.stop="$emit('remove', category)" @keyup.space.enter="$emit('remove', category)" class="action-menu-list-item" tabindex="0"><i class="fa fa-remove" /><span>Verwijder</span></li>
                </ul>
            </div>
        </div>
        <swatches :id="id + '--swatches'" :swatches="swatchColors" v-if="isColorPickerOpened" v-model="category.color" background-color="transparent" show-border swatch-size="20" inline @input="closeColorPicker"></swatches>
        <div v-if="isEditing" class="edit-title">
            <div class="cover"></div>
            <name-input class="item-new" ok-title="Wijzig" @ok="finishEditing" @cancel="cancel" allow-empty="true" placeholder="Titel voor categorie" v-model="newTitle"/>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Prop, Watch, Vue} from 'vue-property-decorator';
    import Category from '../Domain/Category';
    import NameInput from './NameInput.vue';
    import Swatches from 'vue-swatches';<commit_msg>Indicate 'no color' in category view button.<commit_after><template>
    <div :id="id" class="category-header handle category-handle" :class="{ 'null-category': !category.title }">
        <div class="item-header-bar">
            <div class="rb-category-title">
                <button v-if="category.title" :aria-label="`Color Picker voor ${category.title || 'Criteria'}`" :aria-expanded="isColorPickerOpened ? 'true' : 'false'" :aria-controls="id + '--swatches'" class="btn-color" :class="{ 'vue-swatches__diagonal': category.color === '' }" :style="{'background-color': category.color}" @click="openColorPickerForCategory(category)"></button>
                <h2 class="title" @dblclick.stop="startEditing">{{ category.title || 'Lijst met criteria' }}</h2>
            </div>
            <button class="item-actions" :class="{'show-menu': showMenuActions}" @click.stop="$emit('item-actions', id)"><i :class="showMenuActions ? 'fa fa-close' : 'fa fa-ellipsis-h'"/></button>
            <div class="action-menu" :class="{'show-menu': showMenuActions}">
                <ul class="action-menu-list">
                    <li @click.stop="startEditing" @keyup.space.enter="startEditing" class="action-menu-list-item" tabindex="0"><i class="fa fa-pencil" /><span>{{ category.title ? 'Wijzig naam' : 'Wijzig naar categorie' }}</span></li>
                    <li @click.stop="$emit('remove', category)" @keyup.space.enter="$emit('remove', category)" class="action-menu-list-item" tabindex="0"><i class="fa fa-remove" /><span>Verwijder</span></li>
                </ul>
            </div>
        </div>
        <swatches :id="id + '--swatches'" :swatches="swatchColors" v-if="isColorPickerOpened" v-model="category.color" background-color="transparent" show-border swatch-size="20" inline @input="closeColorPicker"></swatches>
        <div v-if="isEditing" class="edit-title">
            <div class="cover"></div>
            <name-input class="item-new" ok-title="Wijzig" @ok="finishEditing" @cancel="cancel" allow-empty="true" placeholder="Titel voor categorie" v-model="newTitle"/>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Prop, Watch, Vue} from 'vue-property-decorator';
    import Category from '../Domain/Category';
    import NameInput from './NameInput.vue';
    import Swatches from 'vue-swatches';
{'fraction_non_alphanumeric': 0.19551979121357113, 'fraction_numerical': 0.0026098303610265334, 'mean_word_length': 3.6360887096774195, 'pattern_counts': {'":': 0, '<': 77, '<?xml version=': 0, '>': 77, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7595094', 'n_tokens_mistral': 1441, 'n_tokens_neox': 1407, 'n_words': 274}