{{define "title"}}Email {{.Email.ID}} - CMC Sales{{end}}

{{define "content"}}
<div class="level">
    <div class="level-left">
        <div class="level-item">
            <nav class="breadcrumb" aria-label="breadcrumbs">
                <ul>
                    <li><a href="/emails">Emails</a></li>
                    <li class="is-active"><a href="#" aria-current="page">Email {{.Email.ID}}</a></li>
                </ul>
            </nav>
        </div>
    </div>
    <div class="level-right">
        <div class="level-item">
            <div class="buttons">
                {{if .Email.GmailMessageID}}
                <a href="/api/v1/emails/{{.Email.ID}}/stream" target="_blank" class="button is-success">
                    <span class="icon">
                        <i class="fas fa-external-link-alt"></i>
                    </span>
                    <span>View in Gmail</span>
                </a>
                {{end}}
                <a href="/emails" class="button">
                    <span class="icon">
                        <i class="fas fa-arrow-left"></i>
                    </span>
                    <span>Back to Emails</span>
                </a>
            </div>
        </div>
    </div>
</div>

<div class="columns">
    <div class="column is-8">
        <!-- Email Details -->
        <div class="box">
            <h2 class="title is-4">
                {{if .Email.Subject}}{{.Email.Subject}}{{else}}<em>(No Subject)</em>{{end}}
            </h2>
            
            <div class="content">
                <div class="columns is-multiline">
                    <div class="column is-6">
                        <strong>From:</strong>
                        {{if .Email.User}}
                            {{.Email.User.Email}} ({{.Email.User.FirstName}} {{.Email.User.LastName}})
                        {{else}}
                            <span class="has-text-grey">Unknown sender</span>
                        {{end}}
                    </div>
                    <div class="column is-6">
                        <strong>Date:</strong> {{.Email.Created.Format "2006-01-02 15:04:05"}}
                    </div>
                    <div class="column is-6">
                        <strong>Type:</strong>
                        {{if .Email.GmailMessageID}}
                            <span class="tag is-link">
                                <span class="icon is-small">
                                    <i class="fab fa-google"></i>
                                </span>
                                <span>Gmail</span>
                            </span>
                            {{if and .Email.IsDownloaded (not .Email.IsDownloaded)}}
                                <span class="tag is-warning">Remote</span>
                            {{else}}
                                <span class="tag is-success">Downloaded</span>
                            {{end}}
                        {{else}}
                            <span class="tag is-success">Local Email</span>
                        {{end}}
                    </div>
                    <div class="column is-6">
                        <strong>Attachments:</strong>
                        {{if gt (len .Attachments) 0}}
                            <span class="tag is-info">{{len .Attachments}} files</span>
                        {{else}}
                            <span class="has-text-grey">None</span>
                        {{end}}
                    </div>
                    {{if .Email.GmailMessageID}}
                    <div class="column is-12">
                        <strong>Gmail Message ID:</strong> 
                        <code class="is-size-7">{{.Email.GmailMessageID}}</code>
                    </div>
                    {{end}}
                    {{if .Email.GmailThreadID}}
                    <div class="column is-12">
                        <strong>Gmail Thread ID:</strong> 
                        <code class="is-size-7">{{.Email.GmailThreadID}}</code>
                    </div>
                    {{end}}
                </div>
            </div>
        </div>

        <!-- Email Content -->
        {{if .Email.GmailMessageID}}
        <div class="box">
            <h3 class="title is-5">Email Content</h3>
            <div id="email-content-container"
                 hx-get="/api/v1/emails/{{.Email.ID}}/content"
                 hx-trigger="load">
                <div class="notification is-info">
                    <div class="is-flex is-align-items-center">
                        <span class="loader mr-3"></span>
                        <span>Loading email content...</span>
                    </div>
                </div>
            </div>
        </div>
        {{end}}

        <!-- Attachments -->
        {{if gt (len .Attachments) 0}}
        <div class="box">
            <h3 class="title is-5">Attachments</h3>
            <div class="table-container">
                <table class="table is-fullwidth">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Size</th>
                            <th>Date</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{range .Attachments}}
                        <tr>
                            <td>
                                {{if .IsMessageBody}}
                                    <span class="icon has-text-info">
                                        <i class="fas fa-envelope"></i>
                                    </span>
                                {{else}}
                                    <span class="icon has-text-grey">
                                        <i class="fas fa-paperclip"></i>
                                    </span>
                                {{end}}
                                {{.Name}}
                            </td>
                            <td>
                                <span class="tag is-light">{{.Type}}</span>
                            </td>
                            <td>{{.Size}} bytes</td>
                            <td class="is-size-7">
                                {{.Created.Format "2006-01-02 15:04"}}
                            </td>
                            <td>
                                {{if .GmailAttachmentID}}
                                    <a href="/api/v1/emails/{{$.Email.ID}}/attachments/{{.ID}}/stream" 
                                       target="_blank" class="button is-small is-info">
                                        <span class="icon">
                                            <i class="fas fa-download"></i>
                                        </span>
                                        <span>Download</span>
                                    </a>
                                {{else}}
                                    <a href="/api/v1/emails/{{$.Email.ID}}/attachments/{{.ID}}" 
                                       target="_blank" class="button is-small is-success">
                                        <span class="icon">
                                            <i class="fas fa-download"></i>
                                        </span>
                                        <span>Download</span>
                                    </a>
                                {{end}}
                            </td>
                        </tr>
                        {{end}}
                    </tbody>
                </table>
            </div>
        </div>
        {{else if .Email.GmailMessageID}}
        <!-- Gmail Attachments Check -->
        <div class="box">
            <h3 class="title is-5">Attachments</h3>
            <div id="gmail-attachments-container"
                 hx-get="/api/v1/emails/{{.Email.ID}}/attachments"
                 hx-trigger="load"
                 hx-swap="outerHTML">
                <div class="notification is-info is-light">
                    <div class="is-flex is-align-items-center">
                        <span class="loader mr-3"></span>
                        <span>Checking for Gmail attachments...</span>
                    </div>
                </div>
            </div>
        </div>
        {{end}}
    </div>

    <div class="column is-4">
        <!-- Associated Records -->
        <div class="box">
            <h3 class="title is-5">Associated Records</h3>
            
            {{if .Email.Enquiries}}
            <div class="field">
                <label class="label">Enquiries</label>
                <div class="tags">
                    {{range .Email.Enquiries}}
                    <a href="/enquiries/{{.}}" class="tag is-primary">
                        ENQ-{{.}}
                    </a>
                    {{end}}
                </div>
            </div>
            {{end}}

            {{if .Email.Invoices}}
            <div class="field">
                <label class="label">Invoices</label>
                <div class="tags">
                    {{range .Email.Invoices}}
                    <a href="/invoices/{{.}}" class="tag is-warning">
                        INV-{{.}}
                    </a>
                    {{end}}
                </div>
            </div>
            {{end}}

            {{if .Email.PurchaseOrders}}
            <div class="field">
                <label class="label">Purchase Orders</label>
                <div class="tags">
                    {{range .Email.PurchaseOrders}}
                    <a href="/purchase-orders/{{.}}" class="tag is-info">
                        PO-{{.}}
                    </a>
                    {{end}}
                </div>
            </div>
            {{end}}

            {{if .Email.Jobs}}
            <div class="field">
                <label class="label">Jobs</label>
                <div class="tags">
                    {{range .Email.Jobs}}
                    <a href="/jobs/{{.}}" class="tag is-success">
                        JOB-{{.}}
                    </a>
                    {{end}}
                </div>
            </div>
            {{end}}

            {{if and (not .Email.Enquiries) (not .Email.Invoices) (not .Email.PurchaseOrders) (not .Email.Jobs)}}
            <div class="notification is-warning is-light">
                <p><strong>No associations found</strong></p>
                <p class="is-size-7">This email is not associated with any enquiries, invoices, purchase orders, or jobs.</p>
            </div>
            {{end}}
        </div>

        <!-- Quick Actions -->
        <div class="box">
            <h3 class="title is-5">Quick Actions</h3>
            <div class="buttons is-vertical is-fullwidth">
                <button class="button is-info is-outlined">
                    <span class="icon">
                        <i class="fas fa-link"></i>
                    </span>
                    <span>Associate with Record</span>
                </button>
                <button class="button is-warning is-outlined">
                    <span class="icon">
                        <i class="fas fa-flag"></i>
                    </span>
                    <span>Mark for Review</span>
                </button>
                {{if .Email.GmailMessageID}}
                <button class="button is-success is-outlined"
                        hx-post="/api/v1/emails/{{.Email.ID}}/download"
                        hx-confirm="Download this email and attachments locally?">
                    <span class="icon">
                        <i class="fas fa-download"></i>
                    </span>
                    <span>Download Locally</span>
                </button>
                {{end}}
            </div>
        </div>
    </div>
</div>
{{end}}