{%extends "base.html"%}

{%block content%}
<h1>Relative Ranking</h1>

<div class="row">
    <!-- Items to rank -->
    <div class="col-md-4">
        <h4>Items Pool</h4>
        <ul id="items-pool" class="list-group">
            {%for item in ["A", "B", "C", "D", "E", "F"] %}
            <li class="list-group-item" draggable="true">Item {{item}}</li>
            {%endfor%}
        </ul>
        <button class="btn btn-primary mt-2" id="add-item-btn">Add Item</button>
    </div>

    <!-- Ranking area -->
    <div class="col-md-4">
        <h4>Ranking Area</h4>
        <ul id="ranking-area" class="list-group border"></ul>
    </div>

    <!-- Tier settings -->
    <div class="col-md-4">
        <h4>Tier Settings</h4>
        <div id="tiers">
            <ul id="ranks">
            {%for rank in ["S", "A", "B", "C", "F"] %}
            <li class="mb-2">
                <label>{{rank}}-Tier Range:</label>
                <input type="number" id="{{rank}}-tier-end" class="form-control" placeholder="Enter last rank for {{rank}}-Tier">
            </li>
            {%endfor%}
            
            </ul>
            <!-- Add more tiers as needed -->
        </div>
        <button class="btn btn-success mt-2" id="add-rank-btn">New Ranking</button>
        <button class="btn btn-success mt-2" id="save-btn">Save Rankings</button>
    </div>
</div>

<script src="{{ url_for('static', filename='js/ranking_ai.js') }}"></script>
{%endblock%}