{% extends "base.html" %}

{% block title %}Setup{% endblock %}
{% block id %}setup{%endblock %}
{% block header_title %}Camera Setup{% endblock %}

{% macro fieldcontain(id, label, type, value, readonly=False) -%}
    <div data-role="fieldcontain">
	<fieldset data-role="controlgroup">
	    <legend>{{ label }}:</legend>
	    <input id="{{ id }}" name="{{ id }}" type="{{ type }}"  value="{{value}}"
	        title="{{ label }}"
        	{% if readonly %} readonly="readonly" {% endif %}
    	    />
    	</fieldset>
    </div>
{%- endmacro %}

{% macro selectfieldcontain(id, label, options, selected, readonly=False) -%}
	<div data-role="fieldcontain">
	    <fieldset data-role="controlgroup">
		<legend>{{label}}</legend>
		<select id="{{ id }}" name="{{ id }}" 
			{% if options|length==0 %}disabled{% endif %} >
		    {% if options|length > 0 %}
			{% if readonly %}readonly="readonly"{% endif %}>
			    {% for option in options %}
				<option value="{{ option }}"
				    {% if selected==option %}selected{% endif %}
				>{{ option }}</option>
			    {% endfor %}
			{% else %}
			    <option>Not supported feature</option>
			{% endif %}
		</select>
	    </fieldset>
	</div>
{%- endmacro %}

{% macro checkfieldcontain(id, label, legend, value, readonly=False) -%}
    <div data-role="fieldcontain">
	<fieldset data-role="controlgroup">
	    <legend>{{ legend }}</legend>
	    <label for="{{ id }}">{{ label }}</label>
	    <input name="{{ id }}" id="{{ id }}" type="hidden" 
		value="false" >
	    <input name="{{ id }}" id="{{ id }}" type="checkbox" 
		class="custom" value="true"
		{% if readonly %} readonly="readonly" {% endif %}
		{% if value==True %} checked {% endif %}
	    />
	</fieldset>
    </div>
{%- endmacro %}

{% block extra_header %}
{% if not new_device %}
    <div id="setup-form-tab" 
            data-role="navbar" 
            data-selector="#setup-form > div">
        <ul>
            <li><a 
                data-href="#info"
                class="ui-btn-active">Information</a></li>
            <li><a 
                data-href="#connection"
                >Connection</a></li>
            <li><a data-href="#camera_setup">Controls</a></li>
            <li><a data-href="#manage">Manage</a></li>
        </ul>
    </div>
{% endif %}
{% endblock %}

{% block content %}
	<form id="setup-form" method="post" 
		action="/setup.html?address={{address}}">

	{% if new_device %}
		<h3>New device configuration</h3>
		{{ fieldcontain("address", "Address", "text", address, True) }}
		{% if not name %}
			{% set name="Unkown Device" %}
		{% endif %}
		{{ fieldcontain("name", "Name", "text", name) }}
		{{ selectfieldcontain("type", "Type",  types, "AIRI") }}
		{% if pairing_supported %}
			{{ checkfieldcontain("enable_pincode", "Use device PIN code", " ",
				False )}}
			{{ fieldcontain ("pincode", "PIN code", "text",  "" ) }}
		{% endif %}
    
		<div class="ui-grid-a">
			<div class="ui-block-a">
				<button type="submit" data-theme="b" name="save" 
					data-icon="check" data-iconpos="right">Save</button>
			</div>
			<div class="ui-block-b">
				{{ button (  "#" , "Cancel" , "arrow-l", "", "ui-btn-left", 
					theme="a", extra='id="cancel_button"') }}
			</div>
		</div>

	{% else %}
		<div id="info">
			{{ fieldcontain("address", "Address", "text", address, True) }}
			{{ fieldcontain("name", "Name", "text", name) }}
			{{ fieldcontain("type", "Type", "text", type , True) }}
			{{ fieldcontain("status", "Status", "text",  status , True) }}
			{{ fieldcontain("last", "Last Connection", "text",  last , True) }}
			<input name="new-device" value="true" type="hidden"/>

			{% if capabilities.battery %}
			{% else %}
				{% set battery="Not supported feature" %}
			{% endif %}
            {{ fieldcontain("battery", "Battery Status (mV)", "text", battery, 
                    True) }}
		</div>

		<div id="connection">
			{#
            {{ checkfieldcontain("reconnect", "Reconnect Automatically", 
                    "Reconnect",  reconnect ) }}
            {{ fieldcontain("reconnect_timeout", "Reconnect After (seconds)", 
			"text",  reconnect_timeout ) }}
			#}
            {{ selectfieldcontain("transport", "Transport",  
                    capabilities.transport ,  transport  ) }}

            {% if pairing_supported %}
                {{ checkfieldcontain("enable_pincode", "Use device PIN code", 
                    " ",  enable_pincode )}}
			    {% if pincode %}
			    {% else %}
				    {% set pincode="" %}
                {% endif %}

			    {{ fieldcontain ("pincode", "PIN code", "text",  pincode ) }}
			    <button type="submit" data-theme="b" name="save" data-icon="check"
					data-iconpos="right">Save</button>
                <button type="submit" data-theme="a" name="cancel" 
                    data-icon="delete" data-iconpos="right">Cancel</button>
            {% endif %}
		</div>

        <div id="camera_setup">
            {{ selectfieldcontain("size", "Resolution", capabilities.size, 
                size)}}

	    <div data-role="fieldcontain">
		<fieldset data-role="controlgroup">
		    <legend>Features:</legend>
		    <label for="flash">Flash</label>
		    {% if capabilities.flash %}
		    <input name="flash" id="flash_" 
		        type="hidden" value="false"/>
		    {% endif %}
            	    <input name="flash" id="flash" value="true"
                        type="checkbox" {% if flash %}checked{% endif %}
                        class="custom" {% if not capabilities.flash %} disabled {% endif %}
                    />
                    <label for="voice">Voice</label>
                    {% if capabilities.voice %}
                    <input name="voice" id="voice_" type="hidden" 
                        value="false" />
                    {% endif %}
                    <input name="voice" id="voice" value="true"
                	type="checkbox" {% if voice %}checked{% endif %}
                        class="custom" {% if not capabilities.voice %} disabled {% endif %}
                    />
                </fieldset>
            </div>

            <div data-role="fieldcontain">
        	<fieldset data-role="controlgroup">
        	    <legend>Exposure Time:</legend>
            	    {% if capabilities.exposure %}
			<input type="range" name="exposure" id="exposure" 
			    value="{{ exposure }}" min="1.0" max="32.0"
			    style="display: none;""/>
            	    {% else %}
                	<input type="text" id="exposure" readonly="readonly" 
                    	    class="ui-body-e" value="Not supported feature"/>
            	    {% endif %}
            	</fieldset>
            </div>

            {{ selectfieldcontain("pan", "Initial Panning",  capabilities.pan, 
                pan ) }}
            <button type="submit" data-theme="b" name="save" data-icon="check"
                data-iconpos="right">Save</button>
            <button type="submit" data-theme="a" name="cancel" 
                data-icon="delete" data-iconpos="right">Cancel</button>
        </div>

        <div id="manage">
            <button onclick="javascript: return confirm('Are you sure you want to delete this camera?')"
                type="submit" data-theme="a" name="delete" data-icon="minus"
                data-iconpos="right">Delete Camera</button>
            <a data-role="button" data-theme="e" 
                href="/stream.html?address={{address}}"
                data-icon="arrow-r" data-iconpos="right">Stream</a>
        </div>
    {% endif %}
    </form>
{% endblock %}