---
import Button from '@ui/Button.astro'
import Datepicker from '@ui/Datepicker.astro'
import FormGroup from '@ui/FormGroup.astro'
---

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

<div class="modal-body">
  <form>
    <FormGroup label="Title" for="event-title">
      <input class="form-control" id="event-title" type="text" placeholder="Event title" />
    </FormGroup>
    <FormGroup label="Description" for="event-description">
      <textarea class="form-control" id="event-description" rows="3" placeholder="Event description"></textarea>
    </FormGroup>
    <div class="row">
      <div class="col">
        <FormGroup label="Start" for="datepicker-event-start">
          <Datepicker layout="icon" id="event-start" value="2020-06-20" />
        </FormGroup>
      </div>
      <div class="col">
        <FormGroup label="End" for="datepicker-event-end">
          <Datepicker layout="icon" id="event-end" value="2020-06-20" />
        </FormGroup>
      </div>
    </div>
    <Button type="submit" text="Create event" color="primary" block />
  </form>
</div>