<script>
  let {
    username = $bindable(),
    password = $bindable(),
    legend = 'sign in',
    disabled,
    onsubmit
  } = $props();
</script>

<div class="card m-4 p-4">
  <form {onsubmit}>
    <label class="label" for="username">
      username
      <input
        class="input"
        name="username"
        type="text"
        placeholder="username"
        bind:value={username}
        {disabled}
      />
    </label>
    <label class="label" for="password">
      password
      <input
        class="input"
        name="password"
        type="password"
        placeholder="password"
        bind:value={password}
        {disabled}
      />
    </label>
    <button class="btn variant-filled" type="submit">
      {legend}
    </button>
  </form>
</div>
