{% extends "base.html" %}

{% block title %}Devices{% endblock %}
{% block header_title %}Devices{% endblock %}

{% block content %}
<ul data-role="listview" data-dividertheme="d" style="margin-top: 0;" data-split-icon="gear">
    <li data-role="list-divider">Registered Cameras<span class="ui-li-count">{{ devices|length}}</span></li>
    {% for camera in devices %}
            <li {% if camera.status %} data-theme="b" {% else %} data-theme="d" {% endif %}>
            <a href="/stream.html?address={{camera.address}}">
                <img style="height: 100%;" src="/stream/{{camera.address}}?thumbnail=True"/>
                <h3>{{ camera.name }}</h3>
                <p>{{ camera.address }}</p>
                <span class="ui-li-count">Been viewed by: {{ camera.viewers|length }}</span>
            </a>
            <a href="/setup.html?address={{camera.address}}">Configure</a>
        </li>
    {% endfor %}
    <li data-role="list-divider">Server Setup</li>
    <li><a href="/scan.html" data-icon="search">
        <h3>Scan for new Devices</h3>
        <p>Allows to register new cameras to the system</p>
        </a>
    </li>
    <li>
        <a href="/server-setup.html" data-icon="gear">
            <h3>Server Setup</h3>
            <p>Here you can configure things like automated PIN codes, etc</p>
		</a>
	<li>
		<h3>Server Status</h3>
		{% if pairing_supported %}	
		<span>Pairing Manager: <strong>Running</strong></span>
		<br>
		{% endif %}
		<span>Version: <strong>{{ version }}</strong></span>
	</li>	
</ul>
{% endblock %}

