{%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">
            <li class="list-group-item" draggable="true">Item A</li>
            <li class="list-group-item" draggable="true">Item B</li>
            <li class="list-group-item" draggable="true">Item C</li>
        </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">
            <li class="mb-2">
                <label>S-Tier Range:</label>
                <input type="number" id="s-tier-end" class="form-control" placeholder="Enter last rank for S-Tier">
            </li>
            <li class="mb-2">
                <label>A-Tier Range:</label>
                <input type="number" id="a-tier-end" class="form-control" placeholder="Enter last rank for A-Tier">
            </li>
            </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.js') }}"></script>
{%endblock%}