{{define "title"}}Emails - CMC Sales{{end}}

{{define "content"}}
<div class="level">
    <div class="level-left">
        <div class="level-item">
            <h1 class="title">Emails</h1>
        </div>
    </div>
    <div class="level-right">
        <div class="level-item">
            <div class="field has-addons">
                <div class="control">
                    <div class="select">
                        <select id="email-filter">
                            <option value="">All Emails</option>
                            <option value="downloaded">Downloaded</option>
                            <option value="gmail">Gmail Only</option>
                            <option value="unassociated">Unassociated</option>
                        </select>
                    </div>
                </div>
                <div class="control">
                    <button class="button is-info" id="apply-filter">
                        <span class="icon">
                            <i class="fas fa-filter"></i>
                        </span>
                        <span>Filter</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Search Box -->
<div class="box">
    <div class="field has-addons">
        <div class="control has-icons-left is-expanded">
            <input class="input" type="text" placeholder="Search emails by subject or content..." 
                   name="search" id="email-search"
                   hx-get="/emails/search" 
                   hx-trigger="keyup changed delay:500ms" 
                   hx-target="#email-table-container">
            <span class="icon is-left">
                <i class="fas fa-search"></i>
            </span>
        </div>
        <div class="control">
            <button class="button is-info" onclick="document.getElementById('email-search').value=''; document.getElementById('email-search').dispatchEvent(new Event('keyup'));">
                Clear
            </button>
        </div>
    </div>
</div>

<!-- Email Table Container -->
<div id="email-table-container">
    {{template "email-table" .}}
</div>
{{end}}

{{define "scripts"}}
<script>
document.getElementById('apply-filter').addEventListener('click', function() {
    const filter = document.getElementById('email-filter').value;
    const search = document.getElementById('email-search').value;
    
    let url = '/emails';
    const params = new URLSearchParams();
    
    if (filter) params.append('filter', filter);
    if (search) params.append('search', search);
    
    if (params.toString()) {
        url += '?' + params.toString();
    }
    
    htmx.ajax('GET', url, {target: '#email-table-container'});
});
</script>
{{end}}