{% extends "base.html" %}


{% block content %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/relative_rank.css') }}">
<div class="flex-container">
    <div class="unranked-items">
        <h2>Unranked Items</h2>
        <div>
            <button id="add-btn">Add Item</button>
            <button id="clear-btn">Clear All</button>
        </div>

        <ul id="unranked-items">
            {% for i in range(10)%}
            <li id="{{i}}-item" draggable="true" class="item">Item {{i}}
                <button id="{{i}}-delete" class="delete" onclick="deleteItem(id)">X</button>
            </li>
            {% endfor %}
        </ul>
    </div>

    <div id="drop-target" class="ranked-items">
        <h2>Ranked Items</h2>
        <div>
            <button id="lock-rank-btn" class="rank-btns">Lock Ranks</button>
        </div>
        <ul id="ranked-items">

        </ul>
    </div>

    <div id="ranks-container" class="ranks-container">
        <h2>Ranks</h2>
        <div>
            <button id="add-rank-btn" class="rank-btns">Add Rank</button>
            <button id="save-rank-btn"class="rank-btns">Save Ranks</button>
        </div>
        <ul id="ranks">
            {% set colors = ["gold", "green", "blue", "yellow", "red"] -%}
            {%for x in ["S", "A", "B", "C", "F"]%}
            <li id="{{loop.index}}-rank" class="rank" draggable="true" style="background: {{colors[loop.index-1]}};">{{x}}-Rank</li>
            {%endfor%}
        </ul>
    </div>
</div>
<script src="{{ url_for('static', filename='js/ranking.js') }}"></script>
{% endblock %}