{{define "page-overview"}}
<div class="page active" id="page-overview">
    <div class="dashboard-header">
        <div>
            <h1 class="dashboard-title">Dashboard</h1>
            <p class="dashboard-subtitle">Manage your Nylas CLI configuration</p>
        </div>
        <div class="status-badge connected">
            <span class="status-dot"></span>
            Connected
        </div>
    </div>

    <div class="warning-msg overview-warning" id="setup-warning-banner"></div>

    <div class="dashboard-grid three-col">
        <!-- Configuration Card -->
        <div class="glass-card card">
            <h3 class="card-title">CONFIGURATION</h3>
            <div class="card-divider"></div>
            <div class="config-list">
                <div class="config-row">
                    <span class="config-label">Region</span>
                    <span class="config-badge" id="config-region">{{if .Region}}{{.Region | upper}}{{else}}US{{end}}</span>
                </div>
                <div class="config-row">
                    <span class="config-label">Client ID</span>
                    <span class="config-value mono" id="config-client">{{if .ClientID}}{{slice .ClientID 0 12}}...{{else}}Not Set{{end}}</span>
                </div>
                <div class="config-row">
                    <span class="config-label">API Key</span>
                    <span class="config-value mono">{{if .HasAPIKey}}********{{else}}Not Set{{end}}</span>
                </div>
            </div>
        </div>

        <!-- Accounts Card -->
        <div class="glass-card card">
            <h3 class="card-title">CONNECTED ACCOUNTS</h3>
            <div class="card-divider"></div>
            <div class="accounts-list" id="accounts-list">
                {{range $index, $grant := .Grants}}
                <div class="account-item">
                    <div class="account-avatar">{{slice .Email 0 1 | upper}}</div>
                    <div class="account-info">
                        <div class="account-email">{{.Email}}</div>
                        <div class="account-provider">{{.Provider}}</div>
                    </div>
                    {{if eq .ID $.DefaultGrant}}
                    <span class="account-badge">DEFAULT</span>
                    {{else}}
                    <button class="account-action" onclick="setDefaultGrant('{{.ID}}')">Set Default</button>
                    {{end}}
                </div>
                {{else}}
                <div class="empty-state">No accounts connected yet</div>
                {{end}}
            </div>
            <p class="accounts-hint">Add more accounts with <code>nylas auth login</code></p>
        </div>

        <!-- Resources Card -->
        <div class="glass-card card">
            <h3 class="card-title">RESOURCES</h3>
            <div class="card-divider"></div>
            <div class="resources-list">
                <a href="https://developer.nylas.com/" target="_blank" class="resource-item">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M4 19.5A2.5 2.5 0 016.5 17H20"/>
                        <path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/>
                    </svg>
                    <div class="resource-info">
                        <span class="resource-title">Documentation</span>
                        <span class="resource-desc">API reference & guides</span>
                    </div>
                </a>
                <a href="https://cli.nylas.com/docs/commands" target="_blank" class="resource-item">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polyline points="16 18 22 12 16 6"/>
                        <polyline points="8 6 2 12 8 18"/>
                    </svg>
                    <div class="resource-info">
                        <span class="resource-title">CLI Command Reference</span>
                        <span class="resource-desc">Commands & flags</span>
                    </div>
                </a>
                <a href="https://github.com/nylas" target="_blank" class="resource-item">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"/>
                    </svg>
                    <div class="resource-info">
                        <span class="resource-title">GitHub</span>
                        <span class="resource-desc">SDKs & examples</span>
                    </div>
                </a>
                <a href="https://support.nylas.com" target="_blank" class="resource-item">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="12" cy="12" r="10"/>
                        <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"/>
                        <line x1="12" y1="17" x2="12.01" y2="17"/>
                    </svg>
                    <div class="resource-info">
                        <span class="resource-title">Support</span>
                        <span class="resource-desc">Get help from our team</span>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <!-- Quick Commands -->
    <div class="glass-card commands-card">
        <h3 class="card-title">QUICK COMMANDS</h3>
        <div class="card-divider"></div>
        <div class="commands-grid">
            <div class="cmd-card" onclick="copyText('nylas auth status')">
                <code>nylas auth status</code>
                <span>Check authentication</span>
            </div>
            <div class="cmd-card" onclick="copyText('nylas email list')">
                <code>nylas email list</code>
                <span>List recent emails</span>
            </div>
            <div class="cmd-card" onclick="copyText('nylas calendar list')">
                <code>nylas calendar list</code>
                <span>List calendars</span>
            </div>
            <div class="cmd-card" onclick="copyText('nylas calendar events')">
                <code>nylas calendar events</code>
                <span>View calendar events</span>
            </div>
        </div>
    </div>
</div>
{{end}}
