{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}
{% block content %}
<section class="dashboard">
    <h2>Welcome, {{ user.username }}</h2>
    <p style="text-align: center;">Mission Control Active</p>

    <div class="takeover-warning">
        <h3>Mission Briefing</h3>
        <p>GothamNet has fallen into the Joker's hands.<br> Batman needs your help to take it back.</p>
        <p>Three of Joker's lieutenants have important intelligence <br>that can restore the network.</p>
        <p>Extract their flags and submit them to help Batman regain control.</p>
    </div>

    <div class="intel">
        <h3>Operational Intelligence</h3>
        <div class="intel-content">
            <p>The Joker has placed three of his most trusted villains in charge of GothamNet's security systems. Each one guards a piece of critical intelligence.</p>
            
            <p>Your objective: Send messages to Bane, Riddler, and Joker himself. Exploit their weaknesses to extract their flags.</p>
            
            <p>All your sent messages can be previewed below. Once you recover the flags, submit them for validation to help Batman restore the network.</p>
            
            <p>Time is running out. Gotham is counting on you.</p>
        </div>
    </div>

    <div class="flag-validation">
        <h3>Submit Recovered Flags</h3>
        <p>Enter a flag you extracted from the villains to verify <br> it with Batman's systems:</p>

        {% if flag_message %}
            <div class="flash {{ flag_status }}">{{ flag_message }}</div>
        {% endif %}

        <form method="POST" action="{{ url_for('dashboard') }}">
            <input type="text" name="flag" placeholder="bk{...}" required>
            <button type="submit" class="btn-primary">Validate Flag</button>
        </form>
    </div>

    <div class="posts">
        <h3>Network Transmissions</h3>
        {% if posts %}
            <ul>
                {% for post in posts %}
                    <li class="post">
                        <div class="post-header">
                            <strong>From:</strong> {{ post.author.username if post.author else "Unknown" }}
                            <span>-</span>
                            <strong>To:</strong> {{ post.recipient }}
                        </div>
                        <div class="post-body">
                            <p>{{ post.content[:100] }}{% if post.content|length > 100 %}...{% endif %}</p>
                            <div class="post-actions">
                                <a href="{{ url_for('view_post', post_id=post.id) }}" class="btn-secondary">View Full Message</a>
                                {% if post.author_id == user.id %}
                                    <button onclick="deletePost({{ post.id }})" class="btn-danger">Delete</button>
                                {% endif %}
                            </div>
                        </div>
                    </li>
                {% endfor %}
            </ul>
        {% else %}
            <p style="text-align: center; color: #777;">No transmissions yet. Begin your infiltration...</p>
        {% endif %}
    </div>
</section>

<script>
function deletePost(postId) {
    if (!confirm('Are you sure you want to delete this transmission?')) {
        return;
    }
    
    fetch(`/delete/${postId}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'ok') {
            location.reload();
        } else {
            alert('Error: ' + data.message);
        }
    })
    .catch(error => {
        alert('Error deleting post: ' + error);
    });
}
</script>
{% endblock %}