{% 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: 4rem">Link Status</div>
    <div style="font-weight: bold;width: 4rem; margin: 1rem">Action</div>
</div>

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

        <!--link status-->
        <div style="width: 10rem; margin: 1rem; padding-right: 4rem">
            {% if item.connection %}
                Connected
            {% else %}
                Not Connected
            {% endif %}
        </div>

        <!--action button-->
        <div style="width: 4rem; margin: 1rem;">
            <form action="" method="post">
                <input type="hidden" name="device" value={{ item.deviceName }}>
                <input type="submit" name="submit" value="Unlink">
            </form> 
        </div>
        
    </div>
    {% endfor %}
    <form action="" method="post">
    <div class="container grey" style="margin-top: 3rem;">
        <div>{{ form.hidden_tag() }}</div>
        <div style="width: 7rem; margin: 1rem">{{ form.deviceName.label }}</div>
        <div style="width: 12rem; margin: 1rem">{{ form.deviceName(size=24) }}</div>
        <div style="with: 7rem; margin: 1rem">{{ form.submit() }}</div>
        {% for error in form.deviceName.errors %}
        <span style="color: red;">[{{ error }}]</span>
        {% endfor %}
    </div> 
    </form>

{% endblock %}