{% extends "objects/base.html" %}
{% load customfilters %}
{% load customtags %}
{% load static %}
{% load i18n %}

{% block styles %}
    <link href="{% static "css/address_editor.css" %}" rel="stylesheet">
{% endblock styles %}

{%  block content %}
    <div class="main-panel-header">
        <a href="{% url 'box' box_id=box %}">{% trans "DB Box" %} {{ box }} ({{ box_name }})</a>
        <img src="{% static "img/dot_black.png" %}">
        <a href="{% url 'module' box_id=box module_id=module %}">{% trans "Module" %} {{ module }}</a>
        <img src="{%  static "img/dot_black.png" %}">
        <a href="{% url 'channel' box_id=box module_id=module channel_id=channel %}">{% trans "Channel" %} {{ channel }}</a>
        <img src="{%  static "img/dot_black.png" %}">
        {% trans "tools_address_editor" %}
    </div>

    <table class="data-fields">
        <tr>
            <td class="field-name">{% trans "tools_address_editor_old_level" %}</td>
            <td class="field-value">
                {% cookie 'common-level' 1 as common_level %}
                <input id="common-level" type="range" min="0" max="254" value="{{ common_level }}"
                       onchange="setCommonLevels(this)"
                       oninput="onLevelInput(this)"/>
            </td>
            <td><label for="common-level">{{ common_level }}</label></td>
        </tr>
        <tr>
            <td class="field-name">{% trans "tools_address_editor_new_level" %}</td>
            <td class="field-value">
                {% cookie 'complete-level' 200 as complete_level %}
                <input id="complete-level" type="range" min="0" max="254" value="{{ complete_level }}"
                       onchange="setCommonLevels(this)"
                       oninput="onLevelInput(this)"/>
            </td>
            <td><label for="complete-level">{{ complete_level }}</label></td>
        </tr>
        <tr>
            <td class="field-name">{% trans "tools_address_editor_current_level" %}</td>
            <td class="field-value">
                {% cookie 'current-level' 254 as current_level %}
                <input id="current-level" type="range" min="0" max="254" value="{{ current_level }}"
                       onchange="setCommonLevels(this)"
                       oninput="onLevelInput(this)"/>
            </td>
            <td><label for="current-level">{{ current_level }}</label></td>
        </tr>
    </table>

    <button id="start-button" onclick="start(this);">{% trans "Start" %}</button>

    <table id="work-table" class="work" hidden>
        <tr>
            <td><select id="wanted">
                {% for i in addresses %}
                    <option value="{{ i }}">{{ i }}</option>
                {% endfor %}
            </select></td>
            <td><button id="prev" onclick="setCurrent(-1);" oncontextmenu="setCurrent(1)" ondblclick="event.preventDefault()">PREV</button></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <select id="current" onchange="console.log(location.href)).searchParams.get('current'))">
                    {% for i in addresses %}
                        <option value="{{ i }}">{{ i }}</option>
                    {% endfor %}
                </select>
            </td>
        </tr>
        <tr>
            <td><button id="set" onclick="setAddress();">SET</button></td>
            <td><button id="next" onclick="setCurrent(1);" oncontextmenu="setCurrent(-1); event.preventDefault();" ondblclick="event.preventDefault();">NEXT</button></td>
        </tr>
    </table>

{%  endblock content %}

{% block scripts %}
    <script>const room = '{{ room }}'</script>
    <script src="{% static "js/address_editor.js" %}"></script>
{% endblock scripts %}