{#if _isInput()}

{field.label}

{#if field.type === "textarea"}

{:else if field.type === "text"}
            <input
              type="text"
              class={"input" + (!field.disabled && (field.error || _error) ? " is-danger" : "")}
              placeholder={field.placeholder}
              bind:value={data}
              on:input={_onInput}
              disabled={field.disabled}
            />
          {:else if field.type === "number"}
            <input
              type="text"
              data-type="number"
              class={"input" + (!field.disabled && (field.error || _error) ? " is-danger" : "")}
              placeholder={field.placeholder}
              bind:value={numericData}
              on:input={_onInput}
              disabled={field.disabled}
              maxlength="15"
              {min}
              {max}
            />
          {:else if field.type === "password"}
            <input
              type="password"
              class={"input" + (!field.disabled && (field.error || _error) ? " is-danger" : "")}
              placeholder={field.placeholder}
              bind:value={data}
              on:input={_onInput}
              disabled={field.disabled}
            />
            <span
              style="position: absolute; top: 50%; right: 15px; transform: translateY(-50%); cursor: pointer;"
              on:click={e => {
                showPassword = !showPassword;

const span =
                  e.target instanceof HTMLSpanElement
                    ? e.target
                    : e.target instanceof HTMLElement
                    ? e.target.parentElement
                    : null;

if (span?.previousElementSibling instanceof HTMLInputElement) {
                  span.previousElementSibling.type = showPassword ? "text" : "password";
                }
              }}
            >
              <i class={"fas " + (!showPassword ? "far fa-eye-slash" : "fa-eye")} />
            </span>
          {/if}
        </div>
        {#if !field.disabled && (field.error || _error)}
          <p class="help is-danger">
            {field.error || _error}
          </p>
        {/if}
      </div>
    {:else if field.type === "checkbox"}
      <div style="display: flex; align-items: center;" class="mb-2">
        <label class="switch">
          <input class="switch__input" type="checkbox" bind:checked={data} {id} on:input disabled={field.disabled} />
          <span class="slider" />
        </label>
        <label for={id} class="label ml-2" style="cursor: pointer;">
          {field.label}
        </label>
      </div>
    {:else if field.type === "select"}
      {#if field.label}
        <p class="label">{field.label}</p>
      {/if}
      <div
        class={"select mb-2" + (!field.disabled && (field.error || _error) ? " is-danger" : "")}
        style="width: 100%;"
        {id}
      >
        <select disabled={field.disabled} style="width: 100%;" bind:value={data} on:change={_onSelectChange}>
          {#each field.options as option (option.value)}
            <option value={option.value} selected={option.selected} disabled={option.disabled}>
              {option.label}
            </option>
          {/each}
        </select>
        {#if !field.disabled && (field.error || _error)}
          <p class="help is-danger">
            {field.error || _error}
          </p>
        {/if}
      </div>
    {/if}

{#if field.tooltip}
      <span class="tooltip__text">
        {field.tooltip}
      </span>
    {/if}
  </div>
{/if}