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

<div class="container">
    <div style="font-weight: bold;width: 15rem; margin: 1rem">Device ID</div>
    <div style="font-weight: bold;width: 10rem; margin: 1rem; padding-right: 5rem">Link Status</div>
    <div style="font-weight: bold;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">
        <div style="margin: 2rem">{{ form.hidden_tag() }}</div>
        <div style="margin: 2rem">{{ form.deviceId.label }}</div>
        <div style="margin: 2rem">{{ form.deviceId(size=32) }}</div>
        <div style="margin: 2rem">{{ form.submit() }}</div>
    </div> 
    </form>

{% endblock %}