{% block head %}
    <!--suppress XmlDuplicatedId -->
    <title>{{ player_name }}&apos;s Keys Tracker</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles/trackers/playerTracker.css') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles/tooltip.css') }}" />
    <script type="application/ecmascript" src="{{ url_for('static', filename='assets/trackers/zeldaKeysTracker.js') }}"/></script>
{% endblock %}

{# this tracker is mostly similar to the generic player tracker but
also adds a table with the key and checks counts for each region in the middle #}

{% block body %}

<div id="tracker-wrapper" class="{{ theme }}-wrapper" data-tracker="{{ room.tracker|suuid }}/{{ team }}/{{ player }}">
    <a href="/generic_tracker/{{ room.tracker|suuid }}/{{ team }}/{{ player }}" class="button-link">
        Go to Generic Tracker
    </a>
    <h1>Items</h1>
    <div id="items-container">
        {% for item in icons %}
            {% if item not in ['Small Key', 'Big Key'] %}
                <div class="image-container tooltip" id="{{ item }}" data-tooltip="{{ item }}">
                    <img
                        src="{{ icons[item] }}"
                        class="icon tooltip {{ 'acquired' if item in received_items }}"
                    />
                </div>
            {% endif %}
        {% endfor %}
    </div>

        <div class="total-checks" id="total-checks">
            Total Checks Done: {{ checked_locations|length }}/{{ locations|length }}
        </div>

        <table id="regions-column">
            <tr class="keys-icons">
                <td><img src="{{icons['Small Key']}}" class="icon tooltip acquired" id="small-key-icon"/></td>
                <td><img src="{{icons['Big Key']}}" class="icon tooltip acquired" id="big-key-icon"/></td>
                <td class="right-align">Total</td>
            </tr>
        {% for region in regions %}
            <tr class="regions-column" id="{{ region }}">
                <td id="{{ region }}-header">{{ region }} ▼</td>
                {% if region in region_keys %}
                    {%- if region_keys[region]|length > 1 %}
                    <td class="smallkeys">{{ received_items[region_keys[region][0]] if region_keys[region][0] in received_items else '-' }}</td>
                    <td class="bigkeys">{{ received_items[region_keys[region][1]] if region_keys[region][1] in received_items else '-' }}</td>
                    {%- else %}
                        {% if 'Small Key' in region_keys[region][0] %}
                    <td class="smallkeys">{{ received_items[region_keys[region][0]] if region_keys[region][0] in received_items else '-' }}</td>
                    <td class="bigkeys">-</td>
                        {% else %}
                    <td class="smallkeys">-</td>
                    <td class="bigkeys">{{ received_items[region_keys[region][0]] if region_keys[region][0] in received_items else '-' }}</td>
                        {% endif %}
                    {%- endif%}
                {% else %}
                <td class="smallkeys">-</td>
                <td class="bigkeys">-</td>
                {% endif %}
                <td class="counter">{{ checks_done[region]|length }} / {{ regions[region]|length }}</td>
            </tr>
            <tbody class="locations hidden" id="{{ region }}-locations">
            {% for location in regions[region] %}
                <tr>
                    <td class="location {{ 'acquired' if location in checked_locations }}" id="{{ location }}">
                    {{ location }}
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        {% endfor %}
    </div>
</div>

{% endblock %}