<script lang="ts">
    import { editorStore } from "$lib/stores/editor.svelte";
    import { KvButton } from "$lib/components/kuldvillak/ui";
    import * as m from "$lib/paraglide/messages";

    // Icons as components for cleaner markup
    const RemoveIcon = `<path d="M6.6188 19.4811L4.5188 17.3811L9.9188 11.9811L4.5188 6.61855L6.6188 4.51855L12.0188 9.91855L17.3813 4.51855L19.4813 6.61855L14.0813 11.9811L19.4813 17.3811L17.3813 19.4811L12.0188 14.0811L6.6188 19.4811Z"/>`;
    const AddIcon = `<path d="M22.2857 25.7143H12V22.2857H22.2857V12H25.7143V22.2857H36V25.7143H25.7143V36H22.2857V25.7143Z"/>`;
</script>

<div class="flex items-center gap-2 flex-wrap">
    {#each editorStore.teams as team (team.id)}
        <div class="flex items-center h-12 border-4 border-kv-black px-2">
            <input
                type="text"
                value={team.name}
                oninput={(e) =>
                    editorStore.updateTeamName(team.id, e.currentTarget.value)}
                class="bg-transparent border-none outline-none font-kv-body text-xl text-kv-text uppercase min-w-[80px] max-w-[120px] kv-shadow-text"
            />
            {#if editorStore.canRemoveTeam}
                <KvButton
                    variant="icon"
                    size="icon"
                    onclick={() => editorStore.removeTeam(team.id)}
                    ariaLabel={m.kv_edit_remove_team()}
                    class="w-8 h-8"
                >
                    <svg
                        viewBox="0 0 24 24"
                        fill="currentColor"
                        class="w-6 h-6"
                    >
                        {@html RemoveIcon}
                    </svg>
                </KvButton>
            {/if}
        </div>
    {/each}

    {#if editorStore.canAddTeam}
        <KvButton
            variant="icon"
            size="icon"
            onclick={() => editorStore.addTeam()}
            ariaLabel={m.kv_edit_add_team()}
        >
            <svg viewBox="0 0 48 48" fill="currentColor" class="w-8 h-8">
                {@html AddIcon}
            </svg>
        </KvButton>
    {/if}
</div>
