{% extends 'base-app.html' %}

{% block appmain_attrs %} x-data="axCompose()"{% endblock %}

{% block main %}

        <!-- ════════════════ APP HEAD · status + actions (the app bar names the app) ════════════════ -->
        <div class="ax-apphead">
          <p class="ax-apphead__status" x-text="saved ? 'Draft saved · ' + savedAt : 'Compose a new email — drafts autosave as you type.'"></p>
          <div class="ax-apphead__actions">
            <a class="ax-btn ax-btn--ghost" href="/apps/email/">
              <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l14 0"/><path d="M5 12l6 6"/><path d="M5 12l6 -6"/></svg>
              <span class="ax-btn__label">Back to inbox</span>
            </a>
            <button type="button" class="ax-btn ax-btn--secondary ax-btn--pill" @click="saveDraft()">
              <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2"/><path d="M12 14a2 2 0 1 0 0 -4a2 2 0 0 0 0 4"/><path d="M14 4l0 4l-6 0l0 -4"/></svg>
              <span class="ax-btn__label">Save draft</span>
            </button>
          </div>
        </div>

        <div class="ax-dash-grid">
          <!-- ════════════════ COMPOSE FORM ════════════════ -->
          <form class="ax-card ax-col--8" role="region" aria-label="Compose message"
                @submit.prevent="send()" novalidate>
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Compose</span>
                <h2 class="ax-card__title">Draft a message</h2>
              </div>
              <div class="ax-card__actions">
                <span class="ax-num" x-show="saved" x-transition style="font-size:var(--ax-text-xs);color:var(--ax-viz-emerald);display:inline-flex;align-items:center;gap:5px;">
                  <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l5 5l10 -10"/></svg>Saved
                </span>
              </div>
            </div>

            <div class="ax-card__body" style="display:flex;flex-direction:column;gap:0;padding-top:0;">
              <!-- To row with chips -->
              <div style="display:flex;align-items:flex-start;gap:var(--ax-space-3);padding-block:var(--ax-space-3);border-bottom:1px solid var(--ax-border);">
                <label for="to-input" class="ax-label" style="width:48px;padding-top:7px;flex:0 0 auto;">To</label>
                <div class="ax-tags" style="flex:1 1 auto;border:0;background:transparent;padding:0;min-height:auto;">
                  <template x-for="(c,i) in to" :key="c.email">
                    <span class="ax-badge ax-badge--soft ax-badge--pill" style="gap:6px;padding-inline-start:3px;">
                      <span class="ax-avatar ax-avatar--xs" :style="`background:color-mix(in oklab,${c.color} 22%,transparent);color:${c.color};`"><b style="font-size:9px;" x-text="c.initials"></b></span>
                      <span x-text="c.name"></span>
                      <button type="button" class="ax-badge__remove" @click="to.splice(i,1)" :aria-label="`Remove ${c.name}`">
                        <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6l-12 12"/><path d="M6 6l12 12"/></svg>
                      </button>
                    </span>
                  </template>
                  <input id="to-input" type="text" class="ax-tags__input" placeholder="Add recipient…" x-model="toDraft" @keydown.enter.prevent="addTo()" @keydown.backspace="!toDraft && to.pop()" autocomplete="off">
                </div>
                <div class="ax-cluster" style="gap:var(--ax-space-2);padding-top:4px;">
                  <button type="button" class="ax-btn ax-btn--link ax-btn--sm" @click="showCc = !showCc" :style="showCc ? 'color:var(--ax-accent);' : ''">Cc</button>
                  <button type="button" class="ax-btn ax-btn--link ax-btn--sm" @click="showBcc = !showBcc" :style="showBcc ? 'color:var(--ax-accent);' : ''">Bcc</button>
                </div>
              </div>

              <!-- Cc -->
              <div class="ax-flex" x-show="showCc" x-collapse style="align-items:center;gap:var(--ax-space-3);padding-block:var(--ax-space-3);border-bottom:1px solid var(--ax-border);">
                <label for="cc-input" class="ax-label" style="width:48px;flex:0 0 auto;">Cc</label>
                <input id="cc-input" type="text" class="ax-input" placeholder="carbon-copy@example.com" style="border:0;background:transparent;padding-inline:0;">
              </div>
              <!-- Bcc -->
              <div class="ax-flex" x-show="showBcc" x-collapse style="align-items:center;gap:var(--ax-space-3);padding-block:var(--ax-space-3);border-bottom:1px solid var(--ax-border);">
                <label for="bcc-input" class="ax-label" style="width:48px;flex:0 0 auto;">Bcc</label>
                <input id="bcc-input" type="text" class="ax-input" placeholder="blind-copy@example.com" style="border:0;background:transparent;padding-inline:0;">
              </div>

              <!-- Subject -->
              <div style="display:flex;align-items:center;gap:var(--ax-space-3);padding-block:var(--ax-space-3);border-bottom:1px solid var(--ax-border);">
                <label for="subject" class="ax-label" style="width:48px;flex:0 0 auto;">Subject</label>
                <input id="subject" type="text" class="ax-input" placeholder="Add a subject" x-model="subject" @input="touch()" style="border:0;background:transparent;padding-inline:0;font-weight:500;color:var(--ax-text-strong);">
              </div>

              <!-- formatting toolbar -->
              <div role="toolbar" aria-label="Formatting" class="ax-cluster" style="gap:2px;padding-block:var(--ax-space-2);border-bottom:1px solid var(--ax-border);flex-wrap:wrap;">
                <template x-for="b in tools" :key="b.label">
                  <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" :aria-label="b.label" x-html="b.icon"></button>
                </template>
                <span class="ax-divider--vertical" aria-hidden="true" style="width:1px;height:20px;background:var(--ax-border);margin-inline:6px;"></span>
                <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" aria-label="Insert link"><svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 15l6 -6"/><path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464"/><path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463"/></svg></button>
                <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" aria-label="Insert emoji"><svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/><path d="M9 10l.01 0"/><path d="M15 10l.01 0"/><path d="M9.5 15a3.5 3.5 0 0 0 5 0"/></svg></button>
              </div>

              <!-- body -->
              <label for="body" class="ax-visually-hidden">Message body</label>
              <textarea id="body" class="ax-textarea" x-model="body" @input="touch()" rows="11" placeholder="Write your message…"
                        style="border:0;background:transparent;padding-inline:0;resize:vertical;min-height:240px;line-height:1.7;"></textarea>

              <!-- attachment dropzone -->
              <div class="ax-dropzone" style="margin-top:var(--ax-space-3);">
                <label class="ax-dropzone__area" for="attach"
                       style="display:flex;flex-direction:column;align-items:center;gap:var(--ax-space-2);padding:var(--ax-space-5);border:1.5px dashed var(--ax-border-strong);border-radius:var(--ax-radius-md);cursor:pointer;text-align:center;color:var(--ax-text-muted);">
                  <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="color:var(--ax-text-subtle);"><path d="M15 7l-6.5 6.5a1.5 1.5 0 0 0 3 3l6.5 -6.5a3 3 0 0 0 -6 -6l-6.5 6.5a4.5 4.5 0 0 0 9 9l6.5 -6.5"/></svg>
                  <span style="font-size:var(--ax-text-sm);"><b style="color:var(--ax-accent);">Click to attach</b> or drop files here</span>
                  <span style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Max 25 MB per file</span>
                  <input id="attach" type="file" multiple class="ax-visually-hidden">
                </label>
                <ul class="ax-dropzone__list" style="list-style:none;margin:var(--ax-space-3) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--ax-space-2);">
                  <template x-for="(f,i) in files" :key="f.name">
                    <li class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;padding:var(--ax-space-2) var(--ax-space-3);border:1px solid var(--ax-border);border-radius:var(--ax-radius-sm);background:var(--ax-surface-subtle);">
                      <span class="ax-avatar ax-avatar--sm ax-avatar--squircle" :style="`background:color-mix(in oklab,${f.color} 18%,transparent);color:${f.color};`"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M5 21v-16a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"/></svg></span>
                      <div style="flex:1 1 auto;min-width:0;">
                        <div class="ax-text-truncate" style="font-weight:500;color:var(--ax-text-strong);font-size:var(--ax-text-sm);" x-text="f.name"></div>
                        <div class="ax-cluster" style="gap:var(--ax-space-2);margin-top:3px;">
                          <div class="ax-progress ax-progress--xs" style="flex:1 1 auto;"><div class="ax-progress__track"><div class="ax-progress__fill" :style="`width:${f.pct}%;`"></div></div></div>
                          <span class="ax-num" style="font-size:var(--ax-text-2xs);color:var(--ax-text-subtle);" x-text="f.pct === 100 ? f.size : f.pct + '%'"></span>
                        </div>
                      </div>
                      <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" @click="files.splice(i,1)" :aria-label="`Remove ${f.name}`"><svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6l-12 12"/><path d="M6 6l12 12"/></svg></button>
                    </li>
                  </template>
                </ul>
              </div>
            </div>

            <!-- footer action bar -->
            <div class="ax-card__footer" style="display:flex;align-items:center;gap:var(--ax-space-2);border-top:1px solid var(--ax-border);">
              <button type="submit" class="ax-btn ax-btn--primary" :disabled="sending" :aria-busy="sending">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14l11 -11"/><path d="M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5"/></svg>
                <span class="ax-btn__label" x-text="sending ? 'Sending…' : 'Send'"></span>
              </button>
              <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon" aria-label="Schedule send">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"/><path d="M12 7v5l3 3"/></svg>
              </button>
              <span style="flex:1 1 auto;"></span>
              <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon" aria-label="Discard draft" @click="discard()">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7l16 0"/><path d="M10 11l0 6"/><path d="M14 11l0 6"/><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"/><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"/></svg>
              </button>
            </div>
          </form>

          <!-- ════════════════ SIDE RAIL ════════════════ -->
          <aside class="ax-col--4" style="display:flex;flex-direction:column;gap:var(--ax-space-6);">
            <!-- send-as -->
            <section class="ax-card" role="region" aria-label="Send options">
              <div class="ax-card__header"><div class="ax-card__titles"><h2 class="ax-card__title">Sending as</h2></div></div>
              <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-4);">
                <div class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;">
                  <span class="ax-avatar ax-avatar--md ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-accent) 20%,transparent);color:var(--ax-accent);"><b>JA</b></span>
                  <div style="min-width:0;"><div style="font-weight:600;color:var(--ax-text-strong);">Jawad Ahbab</div><div class="ax-num" style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">jawad@vireo.app</div></div>
                </div>
                <div class="ax-field">
                  <label class="ax-label" for="from-select">From address</label>
                  <select id="from-select" class="ax-select">
                    <option>jawad@vireo.app</option>
                    <option>support@vireo.app</option>
                    <option>billing@vireo.app</option>
                  </select>
                </div>
                <label class="ax-check"><input type="checkbox" class="ax-checkbox" checked><span style="font-size:var(--ax-text-sm);color:var(--ax-text);">Request read receipt</span></label>
                <label class="ax-check"><input type="checkbox" class="ax-checkbox"><span style="font-size:var(--ax-text-sm);color:var(--ax-text);">Send a copy to myself</span></label>
              </div>
            </section>

            <!-- signature preview -->
            <section class="ax-card" role="region" aria-label="Signature">
              <div class="ax-card__header">
                <div class="ax-card__titles"><h2 class="ax-card__title">Signature</h2></div>
                <a class="ax-btn ax-btn--link ax-btn--sm" href="/apps/email-settings/">Edit</a>
              </div>
              <div class="ax-card__body" style="padding-top:0;">
                <div style="padding:var(--ax-space-3) var(--ax-space-4);border-inline-start:2px solid var(--ax-accent);background:var(--ax-surface-subtle);border-radius:var(--ax-radius-sm);font-size:var(--ax-text-sm);line-height:1.6;">
                  <b style="color:var(--ax-text-strong);">Jawad Ahbab</b><br>
                  <span style="color:var(--ax-text-muted);">Product Lead · Vireo</span><br>
                  <span class="ax-num" style="color:var(--ax-text-subtle);font-size:var(--ax-text-xs);">+1 (415) 555-0142 · vireo.app</span>
                </div>
              </div>
            </section>

            <!-- tip -->
            <section class="ax-card ax-card--accent-edge" role="region" aria-label="Tip">
              <div class="ax-card__body" style="display:flex;gap:var(--ax-space-3);align-items:flex-start;">
                <span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:color-mix(in oklab,var(--ax-viz-cyan) 18%,transparent);color:var(--ax-viz-cyan);flex:0 0 auto;"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3a6 6 0 0 1 6 6c0 2 -1 3.5 -2.5 5c-.5 .5 -.5 1 -.5 1.5h-6c0 -.5 0 -1 -.5 -1.5c-1.5 -1.5 -2.5 -3 -2.5 -5a6 6 0 0 1 6 -6"/><path d="M9.7 17l4.6 0"/><path d="M10 21l4 0"/></svg></span>
                <p style="margin:0;font-size:var(--ax-text-sm);color:var(--ax-text-muted);line-height:1.6;">Press <kbd class="ax-kbd">⌘</kbd> <kbd class="ax-kbd">↵</kbd> to send, or <kbd class="ax-kbd">Esc</kbd> to save and close. Drafts autosave every few seconds.</p>
              </div>
            </section>
          </aside>
        </div>
      
{% endblock %}

{% block scripts %}
<script>
    function axCompose() {
      const ic = (p) => `<svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${p}</svg>`;
      return {
        showCc:false, showBcc:false, toDraft:'', subject:'Q3 forecast — final review before Thursday', body:'',
        saved:false, savedAt:'', sending:false, _t:null,
        to:[ {name:'Maya Lindqvist', email:'maya.l@northwind.co', initials:'ML', color:'#34D399'},
              {name:'Tomás Herrera', email:'tomas@brightline.io', initials:'TH', color:'#A78BFA'} ],
        files:[ {name:'Q3-Forecast-v4.xlsx', size:'248 KB', pct:100, color:'#34D399'},
                {name:'board-deck.pdf', size:'1.2 MB', pct:64, color:'#FB7185'} ],
        tools:[
          {label:'Bold', icon: ic('<path d="M7 5h6a3.5 3.5 0 0 1 0 7h-6z"/><path d="M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7"/>')},
          {label:'Italic', icon: ic('<path d="M11 5l6 0"/><path d="M7 19l6 0"/><path d="M14 5l-4 14"/>')},
          {label:'Underline', icon: ic('<path d="M7 5v5a5 5 0 0 0 10 0v-5"/><path d="M5 19h14"/>')},
          {label:'Bulleted list', icon: ic('<path d="M9 6l11 0"/><path d="M9 12l11 0"/><path d="M9 18l11 0"/><path d="M5 6l0 .01"/><path d="M5 12l0 .01"/><path d="M5 18l0 .01"/>')},
          {label:'Numbered list', icon: ic('<path d="M11 6h9"/><path d="M11 12h9"/><path d="M12 18h8"/><path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4"/><path d="M6 10v-6l-2 2"/>')},
          {label:'Quote', icon: ic('<path d="M10 11h-4a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h3a1 1 0 0 1 1 1v6c0 2.667 -1.333 4.333 -4 5"/><path d="M19 11h-4a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h3a1 1 0 0 1 1 1v6c0 2.667 -1.333 4.333 -4 5"/>')},
        ],
        addTo() {
          const v = this.toDraft.trim(); if (!v) return;
          const name = v.includes('@') ? v.split('@')[0] : v;
          this.to.push({ name, email: v.includes('@') ? v : v+'@example.com', initials: name.slice(0,2).toUpperCase(), color:'#38BDF8' });
          this.toDraft = ''; this.touch();
        },
        touch() { clearTimeout(this._t); this.saved=false; this._t = setTimeout(()=>this.saveDraft(), 1200); },
        saveDraft() { this.saved = true; this.savedAt = new Date().toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'}); },
        send() { this.sending = true; setTimeout(()=>{ this.sending=false; window.location.href='/apps/email/'; }, 900); },
        discard() { this.subject=''; this.body=''; this.to=[]; this.files=[]; this.saved=false; },
      };
    }
  </script>
{% endblock %}