{{template "base" .}}
{{define "content"}}
<div class="dashboard">
    <div class="dashboard-header">
        <h2>Your Documents</h2>
        <div style="display:flex;align-items:center;gap:1rem">
            <div class="view-toggle">
                <button id="btn-cards" title="Card view" onclick="setView('cards')">⊞</button>
                <button id="btn-list" title="List view" onclick="setView('list')">≡</button>
            </div>
            <a href="/docs/new" class="btn">New Document</a>
        </div>
    </div>
    <div class="repo-list" id="doc-list">
        {{range .Content.OwnDocs}}
        <a href="/docs/{{.RKey}}" class="repo-card">
            <h3>{{.Title}}</h3>
            {{if .UpdatedAt}}
            <time>Updated {{.UpdatedAt | fmtdate}}</time>
            {{else}}
            <time>Created {{.CreatedAt | fmtdate}}</time>
            {{end}}
        </a>
        {{else}}
        <div class="empty-state">
            <p>No documents yet.</p>
            <a href="/docs/new" class="btn">Create your first document</a>
        </div>
        {{end}}
    </div>

    {{if .Content.SharedDocs}}
    <div class="dashboard-header" style="margin-top:2rem">
        <h2>Documents Shared with You</h2>
    </div>
    <div class="repo-list" id="shared-list">
        {{range .Content.SharedDocs}}
        <a href="/docs/{{.OwnerDID}}/{{.RKey}}" class="repo-card">
            <h3>{{.Title}}</h3>
            {{if .UpdatedAt}}
            <time>Updated {{.UpdatedAt | fmtdate}}</time>
            {{else}}
            <time>Created {{.CreatedAt | fmtdate}}</time>
            {{end}}
        </a>
        {{end}}
    </div>
    {{end}}
</div>
{{end}}
{{define "scripts"}}
<script>
(function() {
    function setView(v) {
        var lists = [document.getElementById('doc-list'), document.getElementById('shared-list')];
        var btnCards = document.getElementById('btn-cards');
        var btnList = document.getElementById('btn-list');
        lists.forEach(function(list) {
            if (!list) return;
            if (v === 'list') {
                list.classList.add('list-view');
            } else {
                list.classList.remove('list-view');
            }
        });
        if (v === 'list') {
            btnList.classList.add('active');
            btnCards.classList.remove('active');
        } else {
            btnCards.classList.add('active');
            btnList.classList.remove('active');
        }
        localStorage.setItem('docView', v);
    }
    window.setView = setView;
    setView(localStorage.getItem('docView') || 'cards');
})();
</script>
{{end}}