{#
NPC Chat Modal (Expanded)
Shows NPC profile with portrait, relationship meter, and conversation interface
#}
<div class="modal-overlay" onclick="if(event.target === this) closeModal()">
    <div class="modal-content modal-content--lg">
        {# Modal Header #}
        <div class="modal-header">
            <h3 class="modal-title">{{ npc.name }}</h3>
            <button class="modal-close" onclick="closeModal()">&times;</button>
        </div>

        {# Modal Body - Two Column Layout #}
        <div class="modal-body npc-modal-body">
            {# Left Column: NPC Profile #}
            <div class="npc-profile">
                {# NPC Portrait #}
                <div class="npc-portrait">
                    {% if npc.image_url %}
                        <img src="{{ npc.image_url }}" alt="{{ npc.name }}">
                    {% else %}
                        <div class="npc-portrait-placeholder">
                            {{ npc.name[0] }}
                        </div>
                    {% endif %}
                </div>

                {# NPC Info #}
                <div class="npc-profile-info">
                    <div class="npc-profile-role">{{ npc.role }}</div>
                    {% if npc.appearance %}
                    <div class="npc-profile-appearance">{{ npc.appearance }}</div>
                    {% endif %}
                </div>

                {# NPC Tags #}
                {% if npc.tags %}
                <div class="npc-profile-tags">
                    {% for tag in npc.tags %}
                    <span class="npc-profile-tag">{{ tag }}</span>
                    {% endfor %}
                </div>
                {% endif %}

                {# Relationship Meter #}
                <div class="npc-relationship">
                    <div class="relationship-header">
                        <span class="relationship-label">Relationship</span>
                        <span class="relationship-value">{{ relationship_level|default(50) }}/100</span>
                    </div>
                    <div class="relationship-bar">
                        <div class="relationship-fill" style="width: {{ relationship_level|default(50) }}%"></div>
                    </div>
                    <div class="relationship-status">
                        {% set level = relationship_level|default(50) %}
                        {% if level >= 80 %}
                            <span class="status-friendly">Trusted Ally</span>
                        {% elif level >= 60 %}
                            <span class="status-friendly">Friendly</span>
                        {% elif level >= 40 %}
                            <span class="status-neutral">Neutral</span>
                        {% elif level >= 20 %}
                            <span class="status-unfriendly">Wary</span>
                        {% else %}
                            <span class="status-unfriendly">Hostile</span>
                        {% endif %}
                    </div>
                </div>

                {# Interaction Stats #}
                <div class="npc-interaction-stats">
                    <div class="interaction-stat">
                        <span class="stat-label">Conversations</span>
                        <span class="stat-value">{{ interaction_count|default(0) }}</span>
                    </div>
                </div>
            </div>

            {# Right Column: Conversation #}
            <div class="npc-conversation">
                {# Conversation History #}
                <div class="chat-history" id="chat-history-{{ npc.npc_id }}">
                    {% if conversation_history %}
                        {% for msg in conversation_history %}
                        <div class="chat-message chat-message--{{ msg.speaker }}">
                            <strong>{{ msg.speaker_name }}:</strong> {{ msg.text }}
                        </div>
                        {% endfor %}
                    {% else %}
                    <div class="chat-empty-state">
                        Start a conversation with {{ npc.name }}
                    </div>
                    {% endif %}
                </div>

                {# Chat Input #}
                <form class="chat-input-form"
                      hx-post="{{ url_for('game.talk_to_npc', session_id=session_id, npc_id=npc.npc_id) }}"
                      hx-target="#chat-history-{{ npc.npc_id }}"
                      hx-swap="beforeend">
                    <input type="text"
                           name="player_response"
                           class="chat-input"
                           placeholder="Say something..."
                           autocomplete="off"
                           autofocus>
                    <button type="submit" class="chat-send-btn">Send</button>
                    <button type="button"
                            class="chat-greet-btn"
                            hx-post="{{ url_for('game.talk_to_npc', session_id=session_id, npc_id=npc.npc_id) }}"
                            hx-vals='{"topic": "greeting"}'
                            hx-target="#chat-history-{{ npc.npc_id }}"
                            hx-swap="beforeend">
                        Greet
                    </button>
                </form>
            </div>
        </div>

        {# Modal Footer #}
        <div class="modal-footer">
            <button class="btn btn--secondary" onclick="closeModal()">
                End Conversation
            </button>
        </div>
    </div>
</div>
