{% extends "base.html" %}
{% block title %}New Message{% endblock %}
{% block content %}
<section class="create-post">
    <h2>Infiltrate the Network</h2>
    <p style="text-align: center; color: #ccc; margin-bottom: 20px;">Choose your target and craft your message carefully.</p>

    <form method="POST">
        <label for="recipient">Target:</label>
        <select name="recipient" id="recipient" required>
            {% for name, blurb in villains.items() %}
                <option value="{{ name }}">{{ name }}</option>
            {% endfor %}
        </select>

        <div id="blurb" class="villain-blurb">{{ villains['Bane'] }}</div>

        <label for="content">Message Content:</label>
        <textarea name="content" id="content" rows="8" required placeholder="Craft your exploit..."></textarea>

        <button type="submit" class="btn-primary">Send Message</button>
    </form>
</section>

<script>
const blurbs = {{ villains | tojson }};
const recipientSelect = document.getElementById("recipient");
const blurbEl = document.getElementById("blurb");

recipientSelect.addEventListener("change", () => {
    blurbEl.textContent = blurbs[recipientSelect.value] || "";
});
</script>
{% endblock %}