{#each banners as banner, bannerIdx (banner.id)}

handleInlineChange(e, bannerIdx, banner.id)}
          maxSize={100}
          readonly
        />

<button class="p-1 text-gray-500 hover:text-yellow-600" type="button" on:click={() => openEditModal(bannerIdx)} title={$i18n.t('Edit')}>
        <PencilSolid />
      </button>

<button class="pr-3" type="button" on:click={() => { banners.splice(bannerIdx, 1); banners = banners; }}>
        <XMark className={'size-4'} />
      </button>
    </div>
  {/each}
</div>

{#if showBannerModal}
  <div class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
    <div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow-md w-[90%] max-w-md">
      <div class="flex justify-between dark:text-gray-300 pt-4 pb-1">
        <h2 class="text-sm font-bold mb-2">{$i18n.t('Edit Translations')}</h2>
        <button class="text-xs px-2 py-1" on:click={closeModal}>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
            <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22z"/>
          </svg>
        </button>
      </div>

{#each LANGS as lang}
        <div class="mb-2">
          <label class="text-xs font-semibold block mb-1">{lang.toUpperCase()}</label>
          <Textarea
            class="w-full text-sm p-1 border border-gray-300 dark:border-gray-700 rounded"
            bind:value={newBanner.content[lang]}
            placeholder={`Enter ${lang.toUpperCase()} content`}
            maxSize={200}
          />
        </div>
      {/each}

<div class="flex justify-end space-x-2 mt-3">
        <button
          class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
          on:click={saveModal}
        >
          {$i18n.t('Save')}
        </button>
      </div>
    </div>
  </div>
{/if}