{% extends "base.html" %}

{% block title %}Viewer{% endblock %}
{% block header_title %}Camera Display for {{ address }} <div id="header_extra" style="display: inline-block;"></div>{% endblock %}
{% block id %}viewer{% endblock %}

{% macro information(label, value, id, class=None) %}
    <label for="{{ id }}">{{ label }}:</label>
    <input id="{{ id }}" type="text" readonly="readonly" value="{{ value }}" {% if class %}class="{{ class }}"{% endif %}/>
{% endmacro %}

{% macro checkbox(label, id, selected, disabled=False) %}
    <div data-role="fieldcontain">
        <fieldset data-role="control-group">
            <legend>{{ label }}:</legend>
            <label for="{{ id }}"></label>
            <input 
                    type="checkbox" 
                id="{{ id }}" 
                {% if selected %} checked {% endif %} 
                {% if disabled %} readonly="readonly" {% endif %} 
            />
        </fieldset>
    </div>
{% endmacro %}

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

{% macro button33(options, function) %}
    {% for option in options %}
        <a class="button-33 
            {% if loop.index % 3 == 1 %}
                ui-corner-left
            {% elif loop.index %3 == 0 %}
                ui-corner-right
            {% endif %}
            " data-role="button" href="javascript: {{function}}('{{option}}')"
            {% if option in ["QXGA", "720P"] %} data-icon="alert" {% endif %}
        >{{option}}</a>
    {% endfor %}
{% endmacro %}

{% macro inputbox(label, id, value, disabled=False) %}
    <label for="{{ id }}">{{ label }}:</label>
    <input id="{{ id }}" type="text" {% if disabled %}readonly="readonly" {% endif %} value="{{ value }}" />
{% endmacro %}

{% macro tab_controls() %}
    <div class="inline ui-grid-b">
        <div class="ui-block-a">
            {{ button( "javascript: connect('rfcomm')", "Connect<br>RFComm", theme="b") }}
        </div>
        <div class="ui-block-b">
            {% if l2cap_supported %}
                {% set url="javascript: connect('l2cap')" %}
            {% else %}
                {% set url="javascript: notsupported('l2cap')" %}
            {% endif %}
            {{ button( url, "Connect<br>L2CAP", theme="b") }}
        </div>
        <div class="ui-block-c">
            {{ button( "javascript: disconnect()", "Disconnect<br>", theme="e") }}
        </div>
    </div>

    <div class="inline">
            {{ button( "/setup.html?address="+camera.address, "Setup" ) }}
    </div>

    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-type="horizontal">
            <legend>Resolution:</legend>
            {{ button33(camera.capabilities.size, "switchResolution") }}
        </fieldset>
    </div>

    <div class="pan-control">
        <div class="ui-controlgroup-label" style="float: left;">Pan:</div>
        <div class="ui-controlgroup-controls">
            <div class="ui-grid-b">
                <div class="ui-block-a">
                    <a href="javascript: doConfigure('pan', 'UL')"  data-role="button" data-icon="arrow-u" data-iconpos="notext" class="rotate-45">UL</a>
                </div>
                <div class="ui-block-b">
                    <a href="javascript: doConfigure('pan', 'U')"   data-role="button" data-icon="arrow-u" data-iconpos="notext">U</a>
                </div>
                <div class="ui-block-c">
                    <a href="javascript: doConfigure('pan', 'UR')"  data-role="button" data-icon="arrow-r" data-iconpos="notext" class="rotate-45">UR</a>
                </div>
                <div class="ui-block-a">
                    <a href="javascript: doConfigure('pan', 'L')"   data-role="button" data-icon="arrow-l" data-iconpos="notext">L</a>
                </div>
                <div class="ui-block-b">
                    <a href="javascript: doConfigure('pan', 'N')"   data-role="button" data-icon="delete" data-iconpos="notext">Reset</a>
                </div>
                <div class="ui-block-c">
                    <a href="javascript: doConfigure('pan', 'R')"   data-role="button" data-icon="arrow-r" data-iconpos="notext">R</a>
                </div>
                <div class="ui-block-a">
                    <a href="javascript: doConfigure('pan', 'DL')"  data-role="button" data-icon="arrow-l" data-iconpos="notext" class="rotate-45">DL</a>
                </div>
                <div class="ui-block-b">
                    <a href="javascript: doConfigure('pan', 'D')"   data-role="button" data-icon="arrow-d" data-iconpos="notext">D</a>
                </div>
                <div class="ui-block-c">
                    <a href="javascript: doConfigure('pan', 'DR')"  data-role="button" data-icon="arrow-d" data-iconpos="notext" class="rotate-45">DR</a>
                </div>
            </div>
        </div>
    </div>

    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-type="horizontal">
            <legend>Flash:</legend>
            <a style="width: 49%" href="javascript: doConfigure('flash', True)" data-role="button">On</a>
            <a style="width: 49%" href="javascript: doConfigure('flash', False)" data-role="button">Off</a>
        </fieldset>
    </div>

    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-type="horizontal">
            <legend>Voice:</legend>
                {% if sco_supported %}
                    {% set url1="javascript: doVoice(True)" %}
                    {% set url2="javascript: doVoice(False)" %}
                {% else %}
                    {% set url1="javascript: notsupported('sco')" %}
                    {% set url2="javascript: notsupported('sco')" %}
                {% endif %}
                <a style="width: 49%" href="{{url1}}" data-role="button" data-icon="alert">On</a>
                <a style="width: 49%" href="{{url2}}" data-role="button" data-icon="alert">Off</a>
        </fieldset>
    </div>

    <div data-role="fieldcontain">
        <fieldset  data-role="controlgroup" data-type="horizontal">
            <legend>Exposure:</legend>
            <a class="button-33" href="javascript: doConfigure('exposure',  1)" data-role="button">66ms</a>
            <a class="button-33" href="javascript: doConfigure('exposure',  2)" data-role="button">135ms</a>
            <a class="button-33 ui-corner-right" href="javascript: doConfigure('exposure',  4)" data-role="button">270ms</a>
            <a class="button-33 ui-corner-left" href="javascript: doConfigure('exposure',  8)" data-role="button">533ms</a>
            <a class="button-33" href="javascript: doConfigure('exposure',  15)" data-role="button">1 s</a>
            <a class="button-33" href="javascript: doConfigure('exposure',  31)" data-role="button">2 s</a>
        </fieldset>
    </div>
{% endmacro %}

{% macro tab_information() %}
    {{ information("Address", camera.address, "stream-address") }}
    {{ information("Name", camera.name, "stream-name") }}
    {{ information("Type", camera.type, "stream-type") }}
    {{ information("Status", camera.status, "stream-status") }}
    {{ information("Stream URL", "/stream/"+camera.address, "stream-url") }}
    {{ information("Last Connection", camera.last, "stream-last") }}
    {{ information("Transport", camera.transport, "stream-transport") }}
    {{ information("Viewers Count", "", "stream-client_count") }}
    {# 
        {{ information("Automatically Reconnect", camera.reconnect, "stream-reconnect") }}
        {{ information("Reconnect Timeout", camera.reconnect_timeout, "stream-reconnect_timeout") }}
    #}
    {% if pairing_supported %}
        {{ information("Use Device PIN", camera.enable_pincode, "stream-enable_pincode") }}
        {{ information("PIN Code", camera.pincode, "stream-pin") }}
    {% endif %}

    {#
    % if camera.capabilities.battery %}
        {{ information("Battery (mv)", camera.battery, "stream-battery") }}
    {% else %}
        {{ information("Battery (mv)", "Not supported", "stream-battery", class="ui-body-e") }}
    {% endif %
    #}
{% endmacro %}

{% macro tab_sensors() %}
    {{ information("Maker", "Wait...", "sensor-maker") }}
    {{ information("Address", "Wait...", "sensor-address") }}
    {{ information("Camera Date", "Wait...", "sensor-date") }}
    {{ information("Battery", "Wait...", "sensor-battery") }}
    {{ information("Magic Number", "Wait...", "sensor-magic") }}
    {{ information("Case Temperature", "Wait...", "sensor-temperature") }}
    {{ information("Ambient Light", "Wait...", "sensor-ambient") }}
    {{ information("Gravitation", "Wait...", "sensor-gravitation") }}
    {{ information("Compass", "Wait...", "sensor-compass") }}
    {{ information("Extra Information", "Wait...", "sensor-extra") }}
{% endmacro %}

{% block extra_header %}
        <div id="tab" data-role="tabs"> {# style="display: none">#}
                <ul>
                        <li><a href="#tab-video" id="video-link">Video</a></li>
                        <li><a href="#tab-sensors" id="sensors-link">Sensors</a></li>
                        <li><a href="#tab-controls" id="video-controls">Controls</a></li>
                        <li><a href="#tab-information" id="information-link">Information</a></li>
                </ul>
        </div>
{% endblock %}

{% block content %}
<div data-airi="mobile">
    <div id="tab-video" class="video-holder">
        <div id="video-content" class="video-player">
            <span>You don't have Flash installed, you can't use this viewer.</span>
            <br>
            <a href="/stream/{{ camera.address.replace(':', '_')}}">But you can watch the stream here</a>
        </div>
    </div>

    <div id="tab-sensors">
        {{ tab_sensors() }}
    </div>

    <div id="tab-controls">
        {{ tab_controls() }}
    </div>

    <div id="tab-information">
        {{ tab_information() }}
    </div>
</div>

<div data-airi="desktop">
    <div id="video" class="video-holder">
        <div id="flash_container" style="display: none"></div>
        <div id="video-content" class="video-player">
            <span>You don't have Flash installed, you can't use this viewer.</span>
            <br>
            <a href="/stream/{{ camera.address.replace(':', '_')}}">But you can watch the stream here</a>
        </div>
    </div>

    <div id="controls" class="video-controls ui-body ui-body-b">
        <form>
            <div data-role="collapsible-set">
                <div data-role="collapsible" data-collapsed="true">
                    <h4>Device Information</h4>
                    {{ tab_information () }}
                </div>
                <div data-role="collapsible" data-collapsed="true">
                    <h4>Camera Management</h4>
                    {{ tab_controls() }}
                </div>
                <div data-role="collapsible" data-collapsed="false">
                    <h4>Camera Sensors</h4>
                    {{ tab_sensors() }}
                </div>
            </div>
        </form>
    </div>
</div>
{% endblock %}

