{% extends "adminlte/page.html" %}
{% load static %}

{% block page_title %}Compose{% endblock %}

{% block breadcrumb %}
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item">
    <a href="/mailbox/inbox">Mailbox</a>
  </li>
  <li class="breadcrumb-item active" aria-current="page">Compose</li>
{% endblock %}

{% block content %}
  <div class="card">
    <div class="card-header">
      <h3 class="card-title">New Message</h3>
    </div>
    <div class="card-body">
      <form class="row g-3">
        <div class="col-12">
          <label class="form-label" for="mail-to">To</label>
          <input
            type="email"
            class="form-control"
            id="mail-to"
            placeholder="recipient@example.com"
          />
        </div>
        <div class="col-md-6">
          <label class="form-label" for="mail-cc">Cc</label>
          <input type="text" class="form-control" id="mail-cc" />
        </div>
        <div class="col-md-6">
          <label class="form-label" for="mail-bcc">Bcc</label>
          <input type="text" class="form-control" id="mail-bcc" />
        </div>
        <div class="col-12">
          <label class="form-label" for="mail-subject">Subject</label>
          <input type="text" class="form-control" id="mail-subject" />
        </div>
        <div class="col-12">
          <label class="form-label" for="mail-body">Message</label>
          <textarea
            id="mail-body"
            class="form-control"
            rows="12"
            placeholder="Write your message…"
            style="min-height: 16rem"
          ></textarea>
          <small class="text-secondary">
            Hook up a rich-text editor such as
            <a href="https://quilljs.com/" target="_blank" rel="noopener">Quill</a>
            or
            <a
              href="https://github.com/Ionaru/easy-markdown-editor"
              target="_blank"
              rel="noopener"
              >EasyMDE</a
            >
            to upgrade this textarea.
          </small>
        </div>
        <div class="col-12">
          <label class="form-label" for="mail-attach">Attachments</label>
          <input type="file" class="form-control" id="mail-attach" multiple />
        </div>
      </form>
    </div>
    <div class="card-footer d-flex gap-2">
      <button class="btn btn-primary" type="button">
        <i class="bi bi-send me-1" aria-hidden="true"></i>Send
      </button>
      <button class="btn btn-outline-secondary" type="button">
        <i class="bi bi-file-earmark me-1" aria-hidden="true"></i>
        Save draft
      </button>
      <button class="btn btn-outline-danger ms-auto" type="button">
        <i class="bi bi-x-lg me-1" aria-hidden="true"></i>Discard
      </button>
    </div>
  </div>
{% endblock %}