---
import ModalHeader from './ModalHeader.astro'
import AvatarUpload from '@ui/AvatarUpload.astro'
import FormGroup from '@ui/FormGroup.astro'
import InputColor from '../parts/form/InputColor.astro'
---

<ModalHeader title="Add a new team" titleId="modal-team-title" />
<div class="modal-body">
  <div class="row mb-3 align-items-end">
    <div class="col-auto">
      <AvatarUpload class="rounded" size="xl" />
    </div>
    <div class="col">
      <label class="form-label">Name</label>
      <input type="text" class="form-control" />
    </div>
  </div>

  <InputColor label="Pick your team color" />

  <FormGroup label="Additional info" for="team-additional-info" class="">
    <textarea id="team-additional-info" class="form-control"></textarea>
  </FormGroup>
</div>

<div class="modal-footer">
  <button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
  <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Add Team</button>
</div>