{% extends 'base.html' %}
{% load static %}

{% block js %}
	urls['state'] = '{% url 'lights_state' %}';
	urls['set_ring_program'] = '{% url 'set_ring_program' %}';
	urls['set_ring_brightness'] = '{% url 'set_ring_brightness' %}';
	urls['set_ring_monochrome'] = '{% url 'set_ring_monochrome' %}';
    urls['set_wled_led_count'] = '{% url 'set_wled_led_count' %}';
    urls['set_wled_ip'] = '{% url 'set_wled_ip' %}';
    urls['set_wled_port'] = '{% url 'set_wled_port' %}';
    urls['set_wled_program'] = '{% url 'set_wled_program' %}';
    urls['set_wled_brightness'] = '{% url 'set_wled_brightness' %}';
    urls['set_wled_monochrome'] = '{% url 'set_wled_monochrome' %}';
	urls['set_strip_program'] = '{% url 'set_strip_program' %}';
	urls['set_strip_brightness'] = '{% url 'set_strip_brightness' %}';
	urls['adjust_screen'] = '{% url 'adjust_screen' %}';
	urls['set_screen_program'] = '{% url 'set_screen_program' %}';
	urls['set_program_speed'] = '{% url 'set_program_speed' %}';
	urls['set_fixed_color'] = '{% url 'set_fixed_color' %}';
{% endblock %}

{% block content %}
<ul class="list-group" id="ring_options">
	<li class="list-group-item list_header">
		Ring
	</li>
	<li class="list-group-item list_item">
		<span class="description">Program</span>
		<select class="form-control" id="ring_program">
			{% for program_name in color_program_names %}
			<option>{{ program_name }}</option>
			{% endfor %}
		</select>
	</li>
	<li class="list-group-item list_item">
		<span class="description">Brightness</span>
		<input type="range" id="ring_brightness" min="0" max="1" step="0.01">
	</li>
	<li class="list-group-item list_item">
		<span class="description">Monochrome</span>
		<input type="checkbox" id="ring_monochrome">
	</li>
</ul>

<ul class="list-group" id="wled_options">
    <li class="list-group-item list_header">
        WLED
    </li>
    <li class="list-group-item list_item">
        <span class="description">LED count</span>
        <input id="wled_led_count"/>
    </li>
    <li class="list-group-item list_item">
        <span class="description">IP</span>
        <input id="wled_ip"/>
    </li>
    <li class="list-group-item list_item">
        <span class="description">Port</span>
        <input id="wled_port"/>
    </li>
    <li class="list-group-item list_item">
        <span class="description">Program</span>
        <select class="form-control" id="wled_program">
            {% for program_name in color_program_names %}
                <option>{{ program_name }}</option>
            {% endfor %}
        </select>
    </li>
    <li class="list-group-item list_item">
        <span class="description">Brightness</span>
        <input type="range" id="wled_brightness" min="0" max="1" step="0.01">
    </li>
    <li class="list-group-item list_item">
        <span class="description">Monochrome</span>
        <input type="checkbox" id="wled_monochrome">
    </li>
</ul>

<ul class="list-group" id="strip_options">
	<li class="list-group-item list_header">
		Strip
	</li>
	<li class="list-group-item list_item">
		<span class="description">Program</span>
		<select class="form-control" id="strip_program">
			{% for program_name in color_program_names %}
			<option>{{ program_name }}</option>
			{% endfor %}
		</select>
	</li>
	<li class="list-group-item list_item">
		<span class="description">Brightness</span>
		<input type="range" id="strip_brightness" min="0" max="1" step="0.01">
	</li>
</ul>

<ul class="list-group" id="screen_options">
	<li class="list-group-item list_header">
		Screen
		<i class="fas fa-sync" id="adjust_screen"></i>
	</li>
	<li class="list-group-item list_item">
		<span class="description">Program</span>
		<select class="form-control" id="screen_program">
			{% for program_name in screen_program_names %}
			<option>{{ program_name }}</option>
			{% endfor %}
		</select>
	</li>
</ul>

<ul class="list-group" id="program_options">
	<li class="list-group-item list_header">
		Program Options
	</li>
	<li class="list-group-item list_item">
		<span class="description">Rainbow Speed</span>
		<input type="range" id="program_speed" min="0" max="1" step="0.01">
	</li>
	<li class="list-group-item list_item">
		<span class="description">Fixed Color</span>
		<input type="color" id="fixed_color">
	</li>
</ul>
{% endblock %}
