{% extends "webmail/base.html" %}

{% block title %}Compose — ign8mail{% endblock %}

{% block extra_css %}
<style>
  .compose {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 880px;
    flex: 1;
  }
  .field { display: flex; flex-direction: column; gap: 0.3rem; }
  .field label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .field input, .field select, .field textarea {
    background: var(--bg);
    border: 1px solid var(--border2);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.86rem;
    font-family: var(--mono);
    padding: 0.55rem 0.75rem;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
  }
  .field input:focus, .field select:focus, .field textarea:focus {
    border-color: var(--accent);
  }
  .field textarea {
    min-height: 280px;
    resize: vertical;
    font-family: var(--mono);
    line-height: 1.55;
  }
  .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
  }
  .send-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-top: 0.5rem;
  }
  .send-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.55rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--sans);
  }
  .send-btn:hover { opacity: 0.9; }
  .alert {
    padding: 0.65rem 0.85rem;
    border-radius: 6px;
    font-size: 0.82rem;
  }
  .alert-error { background: rgba(239,68,68,.1); color: var(--red); border: 1px solid rgba(239,68,68,.25); }
  .alert-success { background: rgba(34,197,94,.1); color: var(--green); border: 1px solid rgba(34,197,94,.25); }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
  <h1>Compose</h1>
  <span class="sub">from {{ user }}@{{ domain }}</span>
</div>
<form method="post" action="{% url 'compose' %}" class="compose" enctype="multipart/form-data">
  {% csrf_token %}
  {% if sent %}<div class="alert alert-success">Message sent.</div>{% endif %}
  {% if error %}<div class="alert alert-error">{{ error }}</div>{% endif %}

  <div class="row">
    <div class="field">
      <label for="from_addr">From</label>
      <select id="from_addr" name="from_addr">
        {% for addr in allowed_senders %}
          <option value="{{ addr }}" {% if addr == initial.from_addr %}selected{% endif %}>{{ addr }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="field">
      <label for="to">To</label>
      <input id="to" name="to" type="email" required value="{{ initial.to }}">
    </div>
  </div>

  <div class="field">
    <label for="subject">Subject</label>
    <input id="subject" name="subject" type="text" value="{{ initial.subject }}">
  </div>

  <div class="field">
    <label for="body">Message</label>
    <textarea id="body" name="body">{{ initial.body }}</textarea>
  </div>

  <div class="field">
    <label for="attachments">Attachments</label>
    <input id="attachments" name="attachments" type="file" multiple>
  </div>

  <div class="send-row">
    <button class="send-btn" type="submit">Send</button>
    <a class="btn" href="{% url 'index' %}">Cancel</a>
  </div>
</form>
{% endblock %}