{% extends "base.html" %}

{% block title %}{{ npc.name }} - Code of Conquest{% endblock %}

{% block extra_head %}
<!-- Play screen styles for NPC chat -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/play.css') }}">
{% endblock %}

{% block content %}
<div class="npc-chat-page">
    {# Page Header with Back Button #}
    <div class="npc-chat-header">
        <a href="{{ url_for('game.play_session', session_id=session_id) }}" class="npc-chat-back-btn">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M19 12H5M12 19l-7-7 7-7"/>
            </svg>
            Back
        </a>
        <h1 class="npc-chat-title">{{ npc.name }}</h1>
    </div>

    {# Include shared NPC chat content #}
    {% include 'game/partials/npc_chat_content.html' %}
</div>
{% endblock %}

{% block scripts %}
<script>
// Clear chat input after submission
document.body.addEventListener('htmx:afterSwap', function(e) {
    if (e.target.closest('.chat-history')) {
        const form = document.querySelector('.chat-input-form');
        if (form) {
            const input = form.querySelector('.chat-input');
            if (input) {
                input.value = '';
                input.focus();
            }
        }
    }
});
</script>
{% endblock %}