</div>
  <div class="hulyModal-content__settingsSet">
    <div class="hulyModal-content__settingsSet-line">
      <span class="label"><Label label={getEmbeddedLabel('Status Category')} /></span>
      <ButtonMenu
        items={categories}
        selected={category}
        disabled={!allowEditCategory}
        icon={categories.find((it) => it.id === category)?.icon}
        label={categories.find((it) => it.id === category)?.label}
        kind={'secondary'}
        size={'medium'}
        on:selected={(it) => {
          category = it.detail
        }}
      />
    </div>
  </div>
  <div class="hulyModal-content__settingsSet table">
    <div class="hulyTableAttr-container">
      <div class="hulyTableAttr-header font-medium-12 withButton">
        <ButtonMenu
          {items}
          {selected}
          icon={IconSettings}
          label={items[selected].label}
          kind={'secondary'}
          size={'small'}
          on:selected={(event) => {
            if (event.detail) {
              selected = items.findIndex((it) => it.id === event.detail)
              if (selected === 1) {
                icon = undefined
              }
            }
          }}
        />
        {#if icon === iconWithEmoji}
          <IconWithEmoji icon={color ?? 0} size={'medium'} />
        {/if}
      </div>
      <div class="hulyTableAttr-content" class:mb-2={selected === 1}>
        {#if selected === 0}
          <ColorsPopup
            selected={getPlatformColorDef(color ?? 0, $themeStore.dark).name}
            embedded
            columns={'auto'}
            on:close={(evt) => {
              color = evt.detail
              icon = undefined
            }}
          />
        {:else}
          <EmojiPopup
            embedded
            selected={String.fromCodePoint(color ?? 0)}
            on:close={(evt) => {
              color = evt.detail.codePointAt(0)
              icon = iconWithEmoji
            }}
          />
        {/if}
      </div>
    </div>
  </div>
</Modal>