{% extends "base.html" %}

{% block title %}{{ t('boards.heading', 'Message Boards') }} - {{ config.BBS_NAME }}{% endblock %}

{% block content %}
<div class="bbs-header d-flex justify-content-between align-items-center flex-wrap">
    <h1 class="mb-0"><i class="bi bi-chat-left-text"></i> {{ t('boards.heading', 'Message Boards') }}</h1>
    <form method="get" action="{{ url_for('boards.search_posts') }}" class="d-flex">
        <input type="text" name="q" class="form-control form-control-sm me-2"
               placeholder="{{ t('boards.search_placeholder', 'Search posts…') }}" style="min-width:220px;">
        <button class="btn btn-outline-primary btn-sm">{{ t('boards.search', 'Search') }}</button>
    </form>
</div>

<div class="mb-3 small">
    {{ t('boards.sort', 'Sort:') }}
    <a href="{{ url_for('boards.list_boards') }}"
       class="{{ 'fw-bold' if sort_mode != 'activity' else '' }}">{{ t('boards.category', 'Category') }}</a>
    &middot;
    <a href="{{ url_for('boards.list_boards', sort='activity') }}"
       class="{{ 'fw-bold' if sort_mode == 'activity' else '' }}">{{ t('boards.recent_activity', 'Recent Activity') }}</a>
</div>

{% if boards %}
    {% for cat, blist in grouped %}
    <div class="card mb-3">
        <div class="card-header">
            <i class="bi bi-collection"></i> {{ cat }}
            <span class="badge bg-secondary ms-1">{{ blist | length }}</span>
        </div>
        <div class="table-responsive">
            <table class="table table-striped mb-0">
                <thead>
                    <tr>
                        <th>{{ t('boards.board', 'Board') }}</th>
                        <th>{{ t('boards.description', 'Description') }}</th>
                        <th class="text-center">{{ t('boards.topics', 'Topics') }}</th>
                        <th class="text-center">{{ t('boards.replies', 'Replies') }}</th>
                        <th class="text-center">{{ t('boards.last_activity', 'Last Activity') }}</th>
                    </tr>
                </thead>
                <tbody>
                {% for board in blist %}
                    <tr>
                        <td>
                            <a href="{{ url_for('boards.view_board', board_id=board.id) }}"><strong>{{ board.name }}</strong></a>
                            {% if current_user.is_authenticated and board_stats[board.id].unread %}
                                <span class="badge bg-warning ms-2">{{ t('boards.new_count_one' if board_stats[board.id].unread == 1 else 'boards.new_count', '{count} new', count=board_stats[board.id].unread) }}</span>
                            {% endif %}
                        </td>
                        <td>{{ board.description }}</td>
                        <td class="text-center">{{ board_stats[board.id].post_count }}</td>
                        <td class="text-center">{{ board_stats[board.id].reply_count }}</td>
                        <td class="text-center small text-muted">
                            {{ board_stats[board.id].last_activity|eastern('%Y-%m-%d %H:%M', '—') }}
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endfor %}
{% else %}
    <p>{{ t('boards.no_boards', 'No boards available.') }}</p>
{% endif %}
{% endblock %}