{% extends "base.html" %}
{% block title %}Profiles - Postcard Manager{% endblock %}
{% block content %}
<div class="section-header">
    <h1>Profiles</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 %}
<table>
    <thead><tr><th>昵称</th><th>创建时间</th><th>操作</th></tr></thead>
    <tbody>
        {% for p in profiles %}
        <tr>
            <td>
                <span class="nickname-display" id="name-display-{{ p.id }}">{{ p.nickname }}</span>
                <form method="post" action="/profiles/{{ p.id }}/rename" class="inline nickname-edit" 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>
            </td>
            <td>{{ p.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
            <td>
                <a href="/profiles/{{ p.id }}/postcards" class="btn btn-sm">查看</a>
                <button type="button" class="btn btn-sm" onclick="startRename({{ p.id }})">改名</button>
                <form method="post" action="/profiles/{{ p.id }}/delete" class="inline">
                    <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('确定删除该 Profile 及其所有明信片？')">删除</button>
                </form>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% else %}
<p class="empty">还没有 Profile。</p>
{% endif %}
<script>
function startRename(id) {
    document.getElementById('name-display-' + id).style.display = 'none';
    var edit = document.getElementById('name-edit-' + id);
    edit.style.display = 'inline-flex';
    edit.querySelector('input').focus();
}
function cancelRename(id) {
    document.getElementById('name-display-' + id).style.display = '';
    document.getElementById('name-edit-' + id).style.display = 'none';
}
</script>
{% endblock %}