{% extends "base.html" %}
{% block title %}Profile - 星笺{% endblock %}
{% block content %}
<div class="section-header">
    <h1>Profile</h1>
</div>
<div class="inline-form">
    <form method="post" action="/profiles" class="form-row">
        <input type="text" name="nickname" placeholder="新 Profile 昵称" required>
        <button type="submit" class="btn btn-primary">+ 新建</button>
    </form>
</div>
{% if profiles %}
<div class="profile-grid">
    {% for p in profiles %}
    {% set e = extras[p.id] %}
    <div class="profile-card">
        <div class="profile-card-header">
            <h3 class="profile-card-name">
                <span id="name-display-{{ p.id }}">{{ p.nickname }}</span>
                <button type="button" class="icon-btn" onclick="startRename({{ p.id }})" title="改名">✏️</button>
            </h3>
            <form method="post" action="/profiles/{{ p.id }}/rename" class="rename-form" id="name-edit-{{ p.id }}" style="display:none">
                <input type="text" name="nickname" value="{{ p.nickname }}" required>
                <button type="submit" class="btn btn-primary btn-sm">✓</button>
                <button type="button" class="btn btn-sm" onclick="cancelRename({{ p.id }})">✕</button>
            </form>
        </div>
        <div class="profile-card-stats">
            <div class="stat">
                <span class="stat-value">{{ e.total }}</span>
                <span class="stat-label">总计</span>
            </div>
            <div class="stat">
                <span class="stat-value badge-sent-text">{{ e.sent }}</span>
                <span class="stat-label">已寄出</span>
            </div>
            <div class="stat">
                <span class="stat-value badge-delivered-text">{{ e.delivered }}</span>
                <span class="stat-label">已送达</span>
            </div>
            <div class="stat">
                <span class="stat-value badge-received-text">{{ e.received }}</span>
                <span class="stat-label">已收到</span>
            </div>
            <div class="stat">
                <span class="stat-value">{{ e.countries }}</span>
                <span class="stat-label">国家</span>
            </div>
        </div>
        <div class="profile-card-notes" style="padding:.5rem .75rem">
            <form method="post" action="/profiles/{{ p.id }}/notes" style="display:flex;align-items:center;gap:.4rem">
                <textarea name="notes" rows="1" placeholder="备注（仅自己可见）" style="flex:1;padding:.3rem .5rem;border:1px solid var(--border);border-radius:6px;font-size:.8rem;resize:none;font-family:inherit;line-height:1.4;min-height:1.6rem">{{ p.notes }}</textarea>
                <button type="submit" class="btn btn-sm" style="flex-shrink:0;margin-top:0">保存</button>
            </form>
        </div>
        <div class="profile-card-footer">
            <span class="profile-card-date">创建于 {{ p.created_at.strftime('%Y-%m-%d') }}</span>
            <div class="profile-card-actions">
                <a href="/profiles/{{ p.id }}/postcards" class="btn btn-primary btn-sm">查看</a>
                <form method="post" action="/profiles/{{ p.id }}/delete" class="inline">
                    <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('确定删除「{{ p.nickname }}」及其所有明信片？')">删除</button>
                </form>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="empty-state">
    <div class="empty-icon">📮</div>
    <p>还没有 Profile</p>
    <p class="empty-sub">创建一个 Profile 来管理你的明信片吧</p>
</div>
{% endif %}
<script>
function startRename(id) {
    document.getElementById('name-display-' + id).style.display = 'none';
    var form = document.getElementById('name-edit-' + id);
    form.style.display = 'inline-flex';
    form.querySelector('input').focus();
}
function cancelRename(id) {
    var form = document.getElementById('name-edit-' + id);
    form.style.display = 'none';
    document.getElementById('name-display-' + id).style.display = '';
}
</script>
{% endblock %}