---
import Button from '@ui/Button.astro'
import Datepicker from '@ui/Datepicker.astro'
import FormGroup from '@ui/FormGroup.astro'
import DataSelect from '@shared/components/demo/DataSelect.astro'
---

<div class="modal-header">
  <h4 class="modal-title" id="modal-new-task-title">New task</h4>
  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>

<div class="modal-body">
  <form>
    <FormGroup label="Task name" for="task-name" class="mb-4">
      <input class="form-control" id="task-name" type="text" placeholder="Enter task name" />
    </FormGroup>
    <FormGroup label="Description" for="task-description" class="mb-4">
      <textarea class="form-control" id="task-description" rows="3" placeholder="Enter task description"></textarea>
    </FormGroup>
    <div class="row">
      <div class="col-md-6">
        <FormGroup label="Assigned to" for="select-task-assigned" class="mb-4">
          <DataSelect key="people" id="task-assigned" indicator="avatar" />
        </FormGroup>
      </div>
      <div class="col-md-6">
        <FormGroup label="Priority" for="task-priority" class="mb-4">
          <select class="form-select" id="task-priority">
            <option value="low">Low</option>
            <option value="medium" selected>Medium</option>
            <option value="high">High</option>
          </select>
        </FormGroup>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <FormGroup label="Due date" for="datepicker-task-due-date" class="mb-4">
          <Datepicker layout="icon" id="task-due-date" value="2020-06-20" />
        </FormGroup>
      </div>
      <div class="col-md-6">
        <FormGroup label="Category / Tags" for="select-task-category" class="mb-4">
          <DataSelect key="tags" id="task-category" />
        </FormGroup>
      </div>
    </div>
    <Button type="submit" text="Create task" color="primary" block class="mt-4" />
  </form>
</div>