{include:head.html}
{include:header.html}
<link rel="stylesheet" href="/static/member/member.css">

<div class="main">
    <div class="container member-container">
        <div class="member-layout">
            <aside class="member-sidebar">
                {raw:member_sidebar}
            </aside>
            <main class="member-content">
                <div class="contribution-wrap">
                    <div class="contribution-header">
                        <h1>我的收藏</h1>
                    </div>
                    <div class="contribution-stats">
                        共 <strong>{var:total}</strong> 篇收藏
                    </div>
                    {raw:list_html}
                    {raw:pagination}
                </div>
            </main>
        </div>
    </div>
</div>

{include:footer.html}

<style>
.member-fav-list { display: flex; flex-direction: column; gap: 10px; }
.member-fav-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border: 1px solid #f0f0f0; border-radius: 8px;
    transition: box-shadow 0.2s;
}
.member-fav-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.fav-thumb-wrap { width: 60px; height: 45px; flex-shrink: 0; border-radius: 4px; overflow: hidden; background: #f5f5f5; }
.fav-thumb-wrap:empty { display: none; }
.fav-thumb { width: 100%; height: 100%; object-fit: cover; }
.fav-info { flex: 1; min-width: 0; }
.fav-title {
    display: block; font-size: 14px; color: #333; text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 4px;
}
.fav-title:hover { color: #4A6CF7; }
.fav-time { font-size: 12px; color: #999; }
.fav-actions { display: flex; gap: 8px; flex-shrink: 0; }
</style>

<script>
function unfavoriteArticle(articleId, btn) {
    if (!confirm('确定要取消收藏这篇文章吗？')) return;
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/index.php?c=Article&a=favorite', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            try {
                var res = JSON.parse(xhr.responseText);
                if (res.success) {
                    var card = btn.closest('.member-fav-card');
                    if (card) {
                        card.style.transition = 'opacity 0.3s';
                        card.style.opacity = '0';
                        setTimeout(function() { card.remove(); }, 300);
                    }
                    alert(res.message || '已取消收藏');
                } else {
                    alert(res.message || '操作失败');
                }
            } catch(e) {
                alert('网络错误，请稍后重试');
            }
        }
    };
    xhr.send('id=' + articleId + '&action=unfavorite');
}
</script>