{% extends "base.html" %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="fas fa-users me-2"></i>Author Personas</h2>
    <a href="{{ url_for('new_persona') }}" class="btn btn-primary"><i class="fas fa-plus me-2"></i>Create New Persona</a>
</div>

<div class="row">
    {% for name, p in personas.items() %}
    <div class="col-md-4 mb-4">
        <div class="card shadow-sm h-100">
            <div class="card-body">
                <h5 class="card-title">{{ p.name }}</h5>
                <h6 class="card-subtitle mb-2 text-muted">{{ p.age }} {{ p.gender }} | {{ p.nationality }}</h6>
                <p class="card-text small">{{ p.bio[:150] }}...</p>
            </div>
            <div class="card-footer bg-white border-top-0 d-flex justify-content-between">
                <a href="{{ url_for('edit_persona', name=name) }}" class="btn btn-sm btn-outline-primary">Edit</a>
                <form action="{{ url_for('delete_persona', name=name) }}" method="POST" onsubmit="return confirm('Delete this persona?');">
                    <button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
                </form>
            </div>
        </div>
    </div>
    {% else %}
    <div class="col-12">
        <div class="alert alert-info">No personas found. Create one to define a writing voice.</div>
    </div>
    {% endfor %}
</div>
{% endblock %}