{#
Narrative Panel - Middle section
Displays location header, ambient details, and DM response
#}
<div class="narrative-panel">
    {# Location Header #}
    <div class="location-header">
        <div class="location-top">
            <span class="location-type-badge location-type-badge--{{ location.location_type }}">
                {{ location.location_type }}
            </span>
            <h2 class="location-name">{{ location.name }}</h2>
        </div>
        <div class="location-meta">
            <span class="location-region">{{ location.region }}</span>
            <span class="turn-counter">Turn {{ session.turn_number }}</span>
        </div>
    </div>

    {# Ambient Details (Collapsible) #}
    {% if location.ambient_description %}
    <div class="ambient-section">
        <button class="ambient-toggle" onclick="toggleAmbient()">
            <span>Ambient Details</span>
            <span class="ambient-icon">▼</span>
        </button>
        <div class="ambient-content">
            {{ location.ambient_description }}
        </div>
    </div>
    {% endif %}

    {# DM Response Area #}
    <div class="narrative-content" id="narrative-content">
        <div class="dm-response">
            {{ dm_response }}
        </div>
    </div>

    {# Player Input Area #}
    <div class="player-input-area">
        <form class="player-input-form"
              hx-post="{{ url_for('game.take_action', session_id=session_id) }}"
              hx-target="#narrative-content"
              hx-swap="innerHTML"
              hx-disabled-elt="find button">
            <label for="player-action" class="player-input-label">What will you do?</label>
            <div class="player-input-row">
                <input type="hidden" name="action_type" value="text">
                <textarea id="player-action"
                          name="action_text"
                          class="player-input-textarea"
                          placeholder="Describe your action... (e.g., 'I draw my sword and approach the tavern keeper')"
                          rows="2"
                          required></textarea>
                <button type="submit" class="player-input-submit">
                    <span class="submit-text">Act</span>
                    <span class="submit-icon">→</span>
                </button>
            </div>
            <div class="player-input-hint">
                Press Enter to submit, Shift+Enter for new line
            </div>
        </form>
    </div>
</div>