<!DOCTYPE html>
<html lang="en">
<head>
    <title>{{ player_name }}&apos;s Tracker</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles/supermetroidTracker.css') }}"/>
    <script type="application/ecmascript" src="{{ url_for('static', filename='assets/supermetroidTracker.js') }}"></script>
</head>

<body>
    {# TODO: Replace this with a proper wrapper for each tracker when developing TrackerAPI. #}
    <div style="margin-bottom: 0.5rem">
        <a href="{{ url_for("get_generic_game_tracker", tracker=room.tracker, tracked_team=team, tracked_player=player) }}">Switch To Generic Tracker</a>
    </div>

    <div id="player-tracker-wrapper" data-tracker="{{ room.tracker|suuid }}">
        <table id="inventory-table">
            <tr>
                <td><img src="{{ icons['Charge Beam'] }}" class="{{ 'acquired' if 'Charge Beam' in acquired_items }}" title="Charge Beam" /></td>
                <td><img src="{{ icons['Ice Beam'] }}" class="{{ 'acquired' if 'Ice Beam' in acquired_items }}" title="Ice Beam" /></td>
                <td><img src="{{ icons['Wave Beam'] }}" class="{{ 'acquired' if 'Wave Beam' in acquired_items }}" title="Wave Beam" /></td>
                <td><img src="{{ icons['Spazer'] }}" class="{{ 'acquired' if 'Spazer' in acquired_items }}" title="S p a z e r" /></td>
                <td><img src="{{ icons['Plasma Beam'] }}" class="{{ 'acquired' if 'Plasma Beam' in acquired_items }}" title="Plasma Beam" /></td>
                <td><img src="{{ icons['Varia Suit'] }}" class="{{ 'acquired' if 'Varia Suit' in acquired_items }}" title="Varia Suit" /></td>
                <td><img src="{{ icons['Gravity Suit'] }}" class="{{ 'acquired' if 'Gravity Suit' in acquired_items }}" title="Gravity Suit" /></td>
            </tr>
            <tr>
               <td><img src="{{ icons['Morph Ball'] }}" class="{{ 'acquired' if 'Morph Ball' in acquired_items }}" title="Morph Ball" /></td>
                <td><img src="{{ icons['Bomb'] }}" class="{{ 'acquired' if 'Bomb' in acquired_items }}" title="Bomb" /></td>
                <td><img src="{{ icons['Spring Ball'] }}" class="{{ 'acquired' if 'Spring Ball' in acquired_items }}" title="Spring Ball" /></td>
                <td><img src="{{ icons['Screw Attack'] }}" class="{{ 'acquired' if 'Screw Attack' in acquired_items }}" title="Screw Attack" /></td>
                <td><img src="{{ icons['Hi-Jump Boots'] }}" class="{{ 'acquired' if 'Hi-Jump Boots' in acquired_items }}" title="Hi-Jump Boots" /></td>
                <td><img src="{{ icons['Space Jump'] }}" class="{{ 'acquired' if 'Space Jump' in acquired_items }}" title="Space Jump" /></td>
                <td><img src="{{ icons['Speed Booster'] }}" class="{{ 'acquired' if 'Speed Booster' in acquired_items }}" title="Speed Booster" /></td>


            </tr>
            <tr>
                <td>
                    <div class="counted-item">
                        <img src="{{ icons['Energy Tank'] }}" class="{{ 'acquired' if energy_count > 0 }}" title="Energy Tank" />
                        <div class="item-count">{{ energy_count }}</div>
                    </div>
                </td>
                <td>
                    <div class="counted-item">
                        <img src="{{ icons['Reserve Tank'] }}" class="{{ 'acquired' if reserve_count > 0 }}" title="Reserve Tank" />
                        <div class="item-count">{{ reserve_count }}</div>
                    </div>
                </td>
                <td>
                    <div class="counted-item">
                        <img src="{{ icons['Missile'] }}" class="{{ 'acquired' if missile_count > 0 }}" title="Missile ({{missile_count * 5}})" />
                        <div class="item-count">{{ missile_count }}</div>
                    </div>
                </td>
                <td>
                    <div class="counted-item">
                        <img src="{{ icons['Super Missile'] }}" class="{{ 'acquired' if super_count > 0 }}" title="Super Missile ({{super_count * 5}})" />
                        <div class="item-count">{{ super_count }}</div>
                    </div>
                </td>
                <td>
                    <div class="counted-item">
                        <img src="{{ icons['Power Bomb'] }}" class="{{ 'acquired' if power_count > 0 }}" title="Power Bomb ({{power_count * 5}})" />
                        <div class="item-count">{{ power_count }}</div>
                    </div>
                </td>
                <td><img src="{{ icons['Grappling Beam'] }}" class="{{ 'acquired' if 'Grappling Beam' in acquired_items }}" title="Grappling Beam" /></td>
                <td><img src="{{ icons['X-Ray Scope'] }}" class="{{ 'acquired' if 'X-Ray Scope' in acquired_items }}" title="X-Ray Scope" /></td>
            </tr>
        </table>
        <table id="location-table">
            {% for area in checks_done %}
            <tr class="location-category" id="{{area}}-header">
                <td>{{ area }} {{'▼' if area != 'Total'}}</td>
                <td class="counter">{{ checks_done[area] }} / {{ checks_in_area[area] }}</td>
            </tr>
            <tbody class="locations hide" id="{{area}}">
                {% for location in location_info[area] %}
                <tr>
                    <td class="location-name">{{ location }}</td>
                    <td class="counter">{{ '✔' if location_info[area][location] else '' }}</td>
                </tr>
                {% endfor %}
            </tbody>
            {% endfor %}
        </table>
    </div>
</body>
</html>
