{% extends "base.html" %}
{% block title %}Arduinozore{% end %}
{% block subtitle %}<div class="active item">Accueil</div><a class="item" href="/settings">Paramètres</a>{% end %}
{% block head %}
{% end %}
{% block body %}
{% if devices is not None and len(devices) is not 0 %}
<div class="ui link cards">
    {%for d in devices%}
    <a class="card" href="/device/{{ url_escape(d) }}">
        <div class="image dimmable">
            <div class="ui blurring inverted dimmer transition hidden">
                <div class="content">
                    <div class="center">
                        <div class="ui teal button">Watch details</div>
                    </div>
                </div>
            </div>
            <img src="https://www.arduino.cc/en/uploads/Trademark/ArduinoCommunityLogo.png">
        </div>
        <div class="content">
            {% if devices[d] is not None%}
            <div class="header">
                {{ escape(devices[d].card.name) }}
            </div>
            <div class="meta">
                {{ escape(devices[d].name) }}
            </div>
            {% end %}
            <div class="meta">
                {{ escape(d) }}
            </div>
            {% if devices[d] is not None%}
            <div class="description">Cliquer pour afficher plus de détails pour ce device</div>
            {% else %}
            <div class="description">Cliquer pour configurer ce device</div>
            {% end %}
        </div>
        <div class="extra content">
            <span class="right floated">
                <i class="lightbulb outline icon"></i>
                Nombre de capteurs disponibles: {{ '0' if devices[d] is None else len(devices[d].ports['input'] + devices[d].ports['output']) }}
            </span>
        </div>
    </a>
    {%end%}
</div>
{% else %}
<h2>Pas de device connecté.</h2>
{% end %}
{% end %}
