{% extends "base.html" %}
{% block content %}
<div class="darkbg settings-container">
  <h1>Change topics order</h1>
  <p>Drag topic titles to reoder them. Press submit when done. The topics will appear to users in the order set here.</p>
  <form method="post" id=topics-container>
      {% for topic in topics %}
        <div draggable="true" class="draggable-topic" ondragover="dragOver(event)" ondragstart="dragStart(event)" ondragend="dragEnd()">
          <div class="thread-title">{{ topic['name'] }}</div>
          <div>{{ topic.description }}</div>
          <input type="hidden" name="{{ topic['id'] }}" value="{{ topic['sort-order'] }}" class="topic-input">
        </div>
      {% endfor %}
      <input type=submit value="Save order">
    </form>
</div>
<script src="/static/js/sort-topics.js"></script>
{% endblock %}