{{define "email-table"}}
<div class="table-container">
    <table class="table is-fullwidth is-striped is-hoverable">
        <thead>
            <tr>
                <th>ID</th>
                <th>Subject</th>
                <th>From</th>
                <th>Date</th>
                <th>Attachments</th>
                <th>Type</th>
                <th>Associated</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {{range .Emails}}
            <tr>
                <td>{{.ID}}</td>
                <td>
                    <a href="/emails/{{.ID}}" class="has-text-weight-semibold">
                        {{if .Subject}}{{.Subject}}{{else}}<em>(No Subject)</em>{{end}}
                    </a>
                </td>
                <td>
                    {{if .UserEmail}}
                        {{.UserEmail}}
                    {{else}}
                        <span class="has-text-grey">Unknown</span>
                    {{end}}
                </td>
                <td>
                    <span class="is-size-7">
                        {{.Created.Format "2006-01-02 15:04"}}
                    </span>
                </td>
                <td>
                    {{if gt .AttachmentCount 0}}
                        <span class="tag is-info is-light">
                            <span class="icon is-small">
                                <i class="fas fa-paperclip"></i>
                            </span>
                            <span>{{.AttachmentCount}}</span>
                        </span>
                    {{else}}
                        <span class="has-text-grey">None</span>
                    {{end}}
                </td>
                <td>
                    {{if .GmailMessageID}}
                        <span class="tag is-link is-light">
                            <span class="icon is-small">
                                <i class="fab fa-google"></i>
                            </span>
                            <span>Gmail</span>
                        </span>
                        {{if and .IsDownloaded (not .IsDownloaded)}}
                            <span class="tag is-warning is-light">
                                <span class="icon is-small">
                                    <i class="fas fa-cloud"></i>
                                </span>
                                <span>Remote</span>
                            </span>
                        {{end}}
                    {{else}}
                        <span class="tag is-success is-light">
                            <span class="icon is-small">
                                <i class="fas fa-envelope"></i>
                            </span>
                            <span>Local</span>
                        </span>
                    {{end}}
                </td>
                <td>
                    <span class="tag is-light">Associations TBD</span>
                </td>
                <td>
                    <div class="buttons are-small">
                        <a href="/emails/{{.ID}}" class="button is-info is-outlined">
                            <span class="icon">
                                <i class="fas fa-eye"></i>
                            </span>
                        </a>
                        {{if gt .AttachmentCount 0}}
                        <button class="button is-link is-outlined" 
                                hx-get="/emails/{{.ID}}/attachments" 
                                hx-target="#attachment-modal-content"
                                onclick="document.getElementById('attachment-modal').classList.add('is-active')">
                            <span class="icon">
                                <i class="fas fa-paperclip"></i>
                            </span>
                        </button>
                        {{end}}
                        {{if .GmailMessageID}}
                        <a href="/api/v1/emails/{{.ID}}/stream" target="_blank" class="button is-success is-outlined">
                            <span class="icon">
                                <i class="fas fa-external-link-alt"></i>
                            </span>
                        </a>
                        {{end}}
                    </div>
                </td>
            </tr>
            {{else}}
            <tr>
                <td colspan="8" class="has-text-centered">
                    <p class="has-text-grey">No emails found</p>
                </td>
            </tr>
            {{end}}
        </tbody>
    </table>
</div>

<!-- Pagination -->
{{if .Emails}}
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
    <a class="pagination-previous" {{if eq .Page 1}}disabled{{end}}
       hx-get="/emails?page={{.PrevPage}}" 
       hx-target="#email-table-container">Previous</a>
    <a class="pagination-next" {{if not .HasMore}}disabled{{end}}
       hx-get="/emails?page={{.NextPage}}" 
       hx-target="#email-table-container">Next</a>
    <ul class="pagination-list">
        <li><span class="pagination-ellipsis">Page {{.Page}} of {{.TotalPages}}</span></li>
    </ul>
</nav>
{{end}}

<!-- Attachment Modal -->
<div class="modal" id="attachment-modal">
    <div class="modal-background" onclick="document.getElementById('attachment-modal').classList.remove('is-active')"></div>
    <div class="modal-card">
        <header class="modal-card-head">
            <p class="modal-card-title">Email Attachments</p>
            <button class="delete" aria-label="close" onclick="document.getElementById('attachment-modal').classList.remove('is-active')"></button>
        </header>
        <section class="modal-card-body" id="attachment-modal-content">
            <!-- Attachment list will be loaded here -->
        </section>
    </div>
</div>
{{end}}