{% if player.previous_role == "deep" %}
<div class="deep-upkeep-view text-center">
    <h2>Resting Deep Upkeep</h2>
    <p class="description">Select which cards you want to keep and which you want to discard. Drag cards between the boxes, then click "Confirm Hand Refresh". You will draw back up to your maximum hand size of {{ player.rank + 1 }} cards.</p>
    
    <div class="upkeep-drag-container">
        <!-- Keep Box -->
        <div class="card glass-panel upkeep-box" id="keep-box" ondragover="allowDrop(event)" ondrop="dropToKeep(event)">
            <h3>Keep (Current Hand)</h3>
            <div class="hand-flex upkeep-flex" id="keep-list">
                {% for card in hand %}
                    {% set parsed = parse_card(card) %}
                    <div class="card-large suit-{{ parsed.suit.lower() }} {% if parsed.is_joker %}joker-card{% endif %}"
                         draggable="true"
                         ondragstart="drag(event)"
                         id="card-{{ card }}"
                         data-card-code="{{ card }}">
                        <div class="card-corner top-left">
                            <span class="val">{{ parsed.value }}</span>
                            <span class="suit">{{ parsed.symbol }}</span>
                        </div>
                        <div class="card-center">
                            {% if parsed.is_joker %}
                                🃏
                            {% else %}
                                <span class="giant-symbol">{{ parsed.symbol }}</span>
                            {% endif %}
                        </div>
                        <div class="card-corner bottom-right">
                            <span class="val">{{ parsed.value }}</span>
                            <span class="suit">{{ parsed.symbol }}</span>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
        
        <!-- Discard Box -->
        <div class="card glass-panel upkeep-box" id="discard-box" ondragover="allowDrop(event)" ondrop="dropToDiscard(event)">
            <h3 style="color: var(--red-suit);">Discard</h3>
            <div class="hand-flex upkeep-flex" id="discard-list">
                <!-- Drop discarded cards here -->
            </div>
        </div>
    </div>
    
    <div class="action-box margin-top">
        {% if player.is_ready %}
            <div class="waiting-box" style="justify-content: center;">
                <p>Upkeep confirmed! Waiting for other resting Deep players...</p>
                <div class="spinner-small"></div>
            </div>
        {% else %}
            <form id="confirm-refresh-form" hx-post="/game/{{ game.id }}/player/{{ player.id }}/confirm-refresh" hx-target="#game-view" hx-swap="innerHTML">
                <!-- Hidden input to submit which cards are discarded -->
                <input type="hidden" name="discard_cards" id="discard-input" value="[]">
                <button type="submit" class="btn btn-primary btn-large glow-effect">Confirm Hand Refresh</button>
            </form>
        {% endif %}
    </div>
</div>

<script>
    function allowDrop(ev) {
        ev.preventDefault();
    }
    
    function drag(ev) {
        ev.dataTransfer.setData("text/plain", ev.currentTarget.id);
    }
    
    function dropToKeep(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text/plain");
        var cardEl = document.getElementById(data);
        if (cardEl) {
            document.getElementById("keep-list").appendChild(cardEl);
            updateInputs();
        }
    }
    
    function dropToDiscard(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text/plain");
        var cardEl = document.getElementById(data);
        if (cardEl) {
            document.getElementById("discard-list").appendChild(cardEl);
            updateInputs();
        }
    }
    
    function updateInputs() {
        var discardList = document.getElementById("discard-list");
        var discards = [];
        for (var i = 0; i < discardList.children.length; i++) {
            var code = discardList.children[i].getAttribute("data-card-code");
            if (code) {
                discards.push(code);
            }
        }
        document.getElementById("discard-input").value = JSON.stringify(discards);
    }
</script>
{% else %}
<div class="deep-upkeep-waiting text-center glass-panel" style="max-width:600px; margin:4rem auto; padding:3rem;">
    <h2>🌊 Resting Deep Upkeep</h2>
    <p class="description">The players who controlled the Deep in the previous scene are currently refreshing their hands.</p>
    <div class="waiting-box" style="justify-content: center; margin-top:2rem;">
        <p>Waiting for resting Deep players to confirm their hand refreshes...</p>
        <div class="spinner"></div>
    </div>
</div>
{% endif %}

<!-- Hidden phase-check trigger -->
<div hx-get="/game/{{ game.id }}/player/{{ player.id }}/phase-check?current={{ game.phase }}"
     hx-trigger="every 2s"
     hx-swap="none"
     style="display:none;"></div>

{% include "header_status_snippet.html" %}