{% extends "sidebar.html" %}
{% block body%}

<div class="container">
    <div style="width: 15rem; margin: 1rem">Device ID</div>
    <div style="width: 10rem; margin: 1rem; padding-right: 5rem">Link Status</div>
    <div style="width: 2rem; margin: 1rem">Action</div>
</div>

    {% for item in devices %}
    <div class="container">
        <!--Name-->
        <div style="width: 15rem; margin: 1rem;">{{ item.deviceId }}</div>

        <!--Toggle-->
        <div style="width: 10rem; margin: 1rem; padding-right: 5rem">
           Connected 
        </div>

        <!--Color Selector-->
        <div style="width: 2rem; margin: 1rem;">
            <button type="button">Unlink</button>
        </div>
        
    </div>
    {% endfor %}
    <form action="" method="post">
    <div class="container">
        {{ form.hidden_tag() }}
        {{ form.deviceId.label }}
        {{ form.deviceId(size=32) }}
        {{ form.submit() }}
    </div> 
    </form>

{% endblock %}