{#if expanded}

translationsStore.markDirty(lang, item.key, event.currentTarget.value)}
        />
        <div class="admin-translation-base">
          <small>{baseKind(item, lang)}</small>
          <span title={baseValue(item, lang)}>{baseValue(item, lang) || "-"}</span>
        </div>
        {#if overridden || dirty}
          <AdminButton
            size="sm"
            variant="ghost"
            onclick={() => translationsStore.resetField(lang, item.key, overridden)}
          >
            <X size={12} />
            {at("reset", {}, "Reset")}
          </AdminButton>
        {/if}
      </div>
    {/if}
  </div>
{/snippet}

{#snippet renderTranslationItem(item, group)}
  {@const audience = itemAudience(item, group)}
  <div class="admin-translation-row">
    <div class="admin-setting-meta">
      <strong>
        {item.key}
        <AdminBadge variant={audience === "internal" ? "warning" : "success"}>
          {audienceLabel(audience)}
        </AdminBadge>
        {#if itemHasOverride(item, translationsDirty, translationLanguages)}
          <AdminBadge variant="success">{at("settings_badge_override", {}, "Override")}</AdminBadge>
        {/if}
        {#if itemHasDirty(item, translationsDirty, translationLanguages)}
          <AdminBadge variant="warning">{at("settings_badge_dirty", {}, "Dirty")}</AdminBadge>
        {/if}
      </strong>
      <code>{item.key}</code>
      <small>{effectiveValue(item, translationLanguages[0]?.code)}</small>
    </div>
    <div class="admin-translation-locales">
      {#each translationLanguages as language (language.code)}
        {@render renderLocaleEditor(item, language)}
      {/each}
    </div>
  </div>
{/snippet}

{#if translationsLoading || !translationGroups.length}
  {@render renderTranslationsSkeleton()}
{:else}
  <div class="admin-translations-toolbar">
    <label class="admin-translations-search">
      <Search size={15} />
      <Input
        bind:value={search}
        class="input"
        type="text"
        placeholder={at("translations_search_placeholder", {}, "Search keys and text")}
      />
    </label>
    <div class="admin-translations-actions">
      <AdminButton size="sm" variant="ghost" onclick={toggleAllGroups}>
        {allOpen ? at("collapse_all", {}, "Collapse all") : at("expand_all", {}, "Expand all")}
      </AdminButton>
      {#if Object.keys(translationsDirty).length > 0}
        <AdminButton
          size="sm"
          variant="primary"
          onclick={() => translationsStore.saveTranslations(onTranslationsSaved)}
          disabled={translationsSaving}
        >
          {translationsSaving ? at("saving", {}, "Saving...") : at("save", {}, "Save")}
        </AdminButton>
      {/if}
    </div>
  </div>

<div class="admin-translations-language-panel">
    <div class="admin-translations-language-head">
      <Languages size={17} />
      <strong>{at("translations_languages_title", {}, "Languages")}</strong>
      <small>{at("translations_languages_hint", {}, "Override any locale code")}</small>
    </div>
    <div class="admin-translations-language-list">
      {#each translationLanguages as language (language.code)}
        <span class="admin-translations-language-chip" class:is-custom={!language.base}>
          <strong>{language.label}</strong>
          <code>{language.code}</code>
        </span>
      {/each}
    </div>
    <form
      class="admin-translations-language-add"
      onsubmit={(event) => {
        event.preventDefault();
        addLanguage();
      }}
    >
      <Input
        bind:value={newLanguageCode}
        class="input"
        type="text"
        inputmode="latin"
        placeholder={at("translations_language_placeholder", {}, "de, uk, pt-BR")}
      />
      <AdminButton type="submit" size="sm" disabled={!canAddLanguage(newLanguageCode)}>
        <Plus size={14} />
        {at("add", {}, "Add")}
      </AdminButton>
    </form>
  </div>

<div class="admin-translations-audience-tabs" role="tablist">
    {#each AUDIENCE_FILTERS as option (option)}
      <button
        type="button"
        class:is-active={audienceFilter === option}
        onclick={() => {
          audienceFilter = option;
          openGroups = [];
        }}
      >
        {audienceLabel(option)}
      </button>
    {/each}
  </div>

<p class="admin-muted admin-translations-path">
    {at(
      "translations_hint",
      { path: translationsPath },
      `Overrides are stored in DB and mirrored to ${translationsPath}.`
    )}
  </p>

{#if audienceSections.length}
    <div class="admin-translations-accordion-root">
      {#each audienceSections as section (section.id)}
        <section class="admin-translations-audience-section">
          <div class="admin-translations-audience-head">
            <span>
              <strong>{section.title}</strong>
              <small>{section.hint}</small>
            </span>
            <AdminBadge variant={section.id === "internal" ? "warning" : "success"}>
              {section.groups.reduce((count, group) => count + group.items.length, 0)}
            </AdminBadge>
          </div>
          <div class="admin-accordion">
            {#each section.groups as group (groupPanelId(section.id, group.id))}
              {@const dirtyCount = groupDirtyCount(group, translationsDirty, translationLanguages)}
              {@const overrideCount = groupOverrideCount(
                group,
                translationsDirty,
                translationLanguages
              )}
              {@const panelId = groupPanelId(section.id, group.id)}
              {@const groupOpen = openGroupSet.has(panelId)}
              {@const groupReady = readyGroupSet.has(panelId)}
              <div
                class="admin-accordion-item admin-card"
                data-state={groupOpen ? "open" : "closed"}
              >
                <div class="admin-accordion-header">
                  <button
                    type="button"
                    class="admin-accordion-trigger"
                    data-state={groupOpen ? "open" : "closed"}
                    aria-expanded={groupOpen}
                    onclick={() => toggleGroup(panelId)}
                  >
                    <span class="admin-accordion-title admin-translation-title-line">
                      {groupTitle(group)}
                      <AdminBadge variant={section.id === "internal" ? "warning" : "success"}>
                        {section.title}
                      </AdminBadge>
                    </span>
                    <span class="admin-accordion-meta">
                      {at(
                        "translations_keys_count",
                        { count: group.items.length },
                        `${group.items.length} keys`
                      )}{#if overrideCount}
                        / {at(
                          "settings_overridden_count",
                          { count: overrideCount },
                          `${overrideCount} override`
                        )}{/if}{#if dirtyCount}
                        / {at(
                          "settings_dirty_count",
                          { count: dirtyCount },
                          `${dirtyCount} changed`
                        )}
                      {/if}
                    </span>
                    <ChevronRight size={16} class="admin-accordion-chev" />
                  </button>
                </div>
                {#if groupOpen}
                  <div
                    class="admin-accordion-content"
                    data-state="open"
                    transition:slide={{ duration: 140 }}
                  >
                    {#if groupReady}
                      {#if groupDescription(group)}
                        <p class="admin-muted admin-translation-group-description">
                          {groupDescription(group)}
                        </p>
                      {/if}
                      <div class="admin-translation-list">
                        {#each group.items as item (item.key)}
                          {@render renderTranslationItem(item, group)}
                        {/each}
                      </div>
                    {:else}
                      {@render renderGroupSkeleton(group)}
                    {/if}
                  </div>
                {/if}
              </div>
            {/each}
          </div>
        </section>
      {/each}
    </div>
  {:else}
    <AdminEmptyState>{at("translations_no_matches", {}, "No matching strings")}</AdminEmptyState>
  {/if}
{/if}