Vue.component('class-filter', {
  methods: {
    changeClassFilter(key) {
      this.$emit('change_class_filter', key)
    }
  },
  props: ['class_filters', 'current_filter'],
  template: `
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    <i class="bi bi-funnel"></i> {{class_filters.find(e => e.key === current_filter)?.label || 'Select Filter'}}
  </button>
  <ul class="dropdown-menu" style='max-height:300px;overflow-y:auto;'>
    <li><a @click="changeClassFilter('all')" :class="['dropdown-item', current_filter === 'all' ? 'active' : '']" href="javascript:void(0)">All Users</a></li>
    <li><a @click="changeClassFilter('0')" :class="['dropdown-item', current_filter === '0' ? 'active' : '']" href="javascript:void(0)">No Class</a></li>
    <li><hr class="dropdown-divider"></li>
    
    <!-- Dynamic filters for teachers and classes -->
    <template v-for="filter in class_filters" v-if="!['all', '0'].includes(filter.key)">
      <li v-if="filter.isHeader" class="dropdown-header">{{ filter.label }}</li>
      <li v-else>
        <a @click="changeClassFilter(filter.key)" :class="['dropdown-item', current_filter === filter.key ? 'active' : '']" href="javascript:void(0)">
          {{ filter.label }}
        </a>
      </li>
    </template>
  </ul>
</div>
  `
})