{texts.title}

{#each keys as key (key)}

{#each key as k (k)} {#if k.type === 'color' || k.type === 'date' || k.type === 'datetime-local' || k.type === 'number' || k.type === 'tel' || k.type === 'text'} target[k.key] ?? k.default, (v) => onBindChange(k.key, v, k.options)} label={k.label} required={k.options?.required} dynamicWidth={k.options?.dynamicWidth} /> {:else if k.type === 'textarea'}

target[k.key] ?? k.default, (v) => onBindChange(k.key, v, k.options)}
                  label={k.label}
                  required={k.options?.required}
                  rows={k.options?.rows}
                  dynamicWidth={k.options?.dynamicWidth}
                />
              {:else if k.type === 'checkbox'}
                <Checkbox
                  bind:checked={() => target[k.key] ?? k.default, (v) => onBindChange(k.key, v, k.options)}
                  label={k.label}
                  required={k.options?.required}
                />
              {:else if k.type === 'user-search'}
                <UserSearch
                  bind:value={
                    () =>
                      target[k.key] ? (target[k.key]['username'] ?? null) : k.default ? k.default['username'] : null,
                    (v) =>
                      k.options.mustMatch
                        ? onBindChange(k.key, { id: null, username: null }, k.options)
                        : onBindChange(k.key, { id: null, username: v }, k.options)
                  }
                  onSubmit={(user) => onBindChange(k.key, user, k.options)}
                  label={k.label}
                  required={k.options?.required}
                  mustMatch={k.options?.mustMatch}
                />
              {:else if k.type === 'team-search'}
                <TeamSearch
                  bind:value={
                    () => (target[k.key] ? (target[k.key]['name'] ?? null) : k.default ? k.default['name'] : null),
                    (v) =>
                      k.options.mustMatch
                        ? onBindChange(k.key, { id: null, name: null, color: null }, k.options)
                        : onBindChange(k.key, { id: null, name: v, color: null }, k.options)
                  }
                  onSubmit={(team) => onBindChange(k.key, team, k.options)}
                  label={k.label}
                  required={k.options?.required}
                  mustMatch={k.options?.mustMatch}
                />
              {:else if k.type === 'password'}
                <Password
                  bind:value={() => target[k.key] ?? k.default, (v) => onBindChange(k.key, v, k.options)}
                  label={k.label}
                  required={k.options?.required}
                />
              {:else if k.type === 'bit-badge'}
                <BitBadge
                  available={k.options?.available}
                  bind:value={
                    () => (target[k.key] ? (target[k.key]['name'] ?? target[k.key]) : k.default),
                    (v) => onBindChange(k.key, v, k.options)
                  }
                />
              {/if}
            {/each}
          </div>
        {/each}
      </div>
      <div>
        <button
          class="btn btn-success"
          class:disabled={!submitEnabled}
          disabled={!submitEnabled}
          onclick={onSaveButtonClick}>{texts.submitButtonTitle}</button
        >
        <button class="btn btn-error" type="button" onclick={onCancelButtonClick}>Abbrechen</button>
      </div>
    </div>
  </form>
  <form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
    <button class="!cursor-default">close</button>
  </form>
</dialog>