---
import FormGroup from '@ui/FormGroup.astro'
import Icon from '@ui/Icon.astro'
import Wysiwyg from '@ui/Wysiwyg.astro'
---

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

<div class="modal-body">
  <form>
    <FormGroup label="To" for="new-email-to">
      <input type="text" id="new-email-to" class="form-control" placeholder="Example@email.com" />
    </FormGroup>
    <FormGroup label="Subject" for="new-email-subject">
      <input type="text" id="new-email-subject" class="form-control" placeholder="Your subject" />
    </FormGroup>
    <FormGroup label="Message" for="hugerte-email-message" class="">
      <Wysiwyg id="email-message" />
    </FormGroup>
  </form>
</div>
<div class="modal-footer">
  <button type="button" class="btn" data-bs-dismiss="modal">Cancel</button>
  <button type="button" class="btn btn-primary ms-auto" data-bs-dismiss="modal">
    <Icon name="send" /> Send Message
  </button>
</div>