{#
Quests Accordion Content
Shows active quests with objectives and progress
Enhanced with HTMX for live updates and clickable quest details
#}
<div id="quest-list-container"
     hx-get="{{ url_for('game.quests_accordion', session_id=session_id) }}"
     hx-trigger="questAccepted from:body, questCompleted from:body, questAbandoned from:body, combatEnded from:body"
     hx-swap="innerHTML">

{% if quests %}
<div class="quest-list">
    {% for quest in quests %}
    <div class="quest-item {% if quest.is_complete %}quest-item--ready{% endif %}"
         hx-get="{{ url_for('game.quest_detail', session_id=session_id, quest_id=quest.quest_id) }}"
         hx-target="#modal-container"
         hx-swap="innerHTML"
         role="button"
         tabindex="0"
         aria-label="View quest details: {{ quest.name }}">

        {# Ready to Complete Banner #}
        {% if quest.is_complete %}
        <div class="quest-ready-banner">
            <span class="ready-icon">&#10003;</span>
            <span class="ready-text">Ready to Turn In!</span>
        </div>
        {% endif %}

        <div class="quest-header">
            <span class="quest-name">{{ quest.name }}</span>
            <span class="quest-difficulty quest-difficulty--{{ quest.difficulty }}">
                {{ quest.difficulty }}
            </span>
        </div>

        {% if quest.quest_giver %}
        <div class="quest-giver">From: {{ quest.quest_giver }}</div>
        {% endif %}

        <div class="quest-objectives">
            {% for objective in quest.objectives %}
            <div class="quest-objective {% if objective.is_complete %}objective-complete{% endif %}">
                <span class="quest-objective-check">
                    {% if objective.is_complete %}&#10003;{% else %}&#9675;{% endif %}
                </span>
                <span class="quest-objective-text {% if objective.is_complete %}text-strikethrough{% endif %}">
                    {{ objective.description }}
                </span>
                {% if objective.required > 1 %}
                <span class="quest-objective-progress">
                    {{ objective.current }}/{{ objective.required }}
                </span>
                {% endif %}
            </div>
            {% endfor %}
        </div>

        {# Progress Bar for Multi-objective Quests #}
        {% if quest.objectives|length > 1 %}
        {% set completed_count = quest.objectives|selectattr('is_complete')|list|length %}
        {% set total_count = quest.objectives|length %}
        <div class="quest-overall-progress">
            <div class="mini-progress-bar">
                <div class="mini-progress-fill"
                     style="width: {{ (completed_count / total_count * 100)|int }}%">
                </div>
            </div>
            <span class="mini-progress-text">{{ completed_count }}/{{ total_count }}</span>
        </div>
        {% endif %}
    </div>
    {% endfor %}
</div>
{% else %}
<div class="quest-empty">
    <span class="empty-icon">&#128220;</span>
    <p class="empty-text">No active quests.</p>
    <p class="empty-hint">Talk to NPCs to find adventures!</p>
</div>
{% endif %}

</div>