{% 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">
        Unranked Items
        <ul>
            <li draggable="true" id="src_move" class="item" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);">Item A</li>
            <li draggable="true" id="src_move" class="item" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);">Item B</li>
        </ul>
    </div>

    <div id="drop-target" class="ranked-items" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">
        Ranked Items
    </div>
</div>
<script src="{{ url_for('static', filename='js/ranking.js') }}"></script>
{% endblock %}