{% extends "base.html" %}

{% block title %}Shoutbox{% endblock %}

{% block content %}
<div class="bbs-header">
    <h1><i class="bi bi-megaphone-fill"></i> Shoutbox</h1>
    <p>Quick site-wide chatter — one-liners, ≤280 chars.</p>
</div>

<form method="post" class="card mb-3">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <div class="card-body">
        <div class="input-group">
            <input type="text" name="text" class="form-control" required
                   maxlength="280" placeholder="Shout something…">
            <button class="btn btn-primary"><i class="bi bi-send"></i> Shout</button>
        </div>
    </div>
</form>

<div class="card">
    <div class="card-body p-0">
    {% if posts %}
        <ul class="list-group list-group-flush">
        {% for p in posts %}
            <li class="list-group-item d-flex justify-content-between align-items-start">
                <div>
                    <strong>{{ p.user.username }}</strong>
                    <span class="text-muted small ms-2">{{ p.created_at.strftime('%Y-%m-%d %H:%M') }}</span>
                    <div>{{ p.text }}</div>
                </div>
                {% if p.user_id == current_user.id or current_user.is_admin %}
                <form method="post" action="{{ url_for('shoutbox.delete', post_id=p.id) }}">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button class="btn btn-link btn-sm text-danger p-0"
                            onclick="return confirm('Delete this shout?')">
                        <i class="bi bi-x"></i>
                    </button>
                </form>
                {% endif %}
            </li>
        {% endfor %}
        </ul>
    {% else %}
        <div class="p-3 text-muted">No shouts yet — be the first.</div>
    {% endif %}
    </div>
</div>
{% endblock %}