{% extends "base.html" %}

{% block title %}{{ b.title }}{% endblock %}

{% block content %}
<div class="bbs-header">
    <h1>
        {% if b.is_pinned %}<i class="bi bi-pin-fill text-warning"></i>{% endif %}
        {{ b.title }}
    </h1>
    <p class="text-muted">Posted {{ b.created_at.strftime('%Y-%m-%d %H:%M') }}</p>
</div>

<div class="card">
    <div class="card-body">
        <button type="button" id="bToggleMd" class="btn btn-link btn-sm p-0 mb-2">
            <i class="bi bi-markdown"></i> Toggle Markdown view
        </button>
        <pre id="bPlain" style="white-space:pre-wrap;font-family:inherit;">{{ b.content }}</pre>
        <div id="bMd" style="display:none;">{{ b.content | markdown }}</div>
    </div>
</div>
<script>
(function() {
    const btn = document.getElementById('bToggleMd');
    const plain = document.getElementById('bPlain');
    const md = document.getElementById('bMd');
    if (!btn || !plain || !md) return;
    btn.addEventListener('click', () => {
        const showMd = plain.style.display !== 'none';
        plain.style.display = showMd ? 'none' : '';
        md.style.display = showMd ? '' : 'none';
    });
})();
</script>

<div class="mt-3">
    <a href="{{ url_for('bulletins.index') }}" class="btn btn-link">← All bulletins</a>
</div>
{% endblock %}