{% extends 'base.html' %}
{% block title %}IvoryOS | Devices{% endblock %}
{% block body %}
    <div class="row">
    {% if defined_variables %}
        {% for instrument in defined_variables %}
            <div class="col-xl-3 col-lg-4 col-md-6 mb-4 ">
                <div class="bg-white rounded shadow-sm position-relative">
{#                    {% if not deck %}#}
{#                        <a href="{{ url_for('control.disconnect', instrument=instrument) }}" class="stretched-link controller-card" style="float: right;color: red; position: relative;">Disconnect <i class="bi bi-x-square"></i></a>#}
                        <div class="p-4 controller-card">
                            <h5 class=""><a href="{{ url_for('control.controllers', instrument=instrument) }}" class="text-dark stretched-link">{{instrument.split(".")[1]}}</a></h5>
                        </div>
{#                    {% else %}#}
{#                        <div class="p-4 controller-card">#}
{#                            <h5 class=""><a href="{{ url_for('control.controllers', instrument=instrument) }}" class="text-dark stretched-link">{{instrument}}</a></h5>#}
{#                        </div>#}
{#                    {% endif %}#}
                </div>
            </div>
        {% endfor %}
        <div class="d-flex mb-3">
            <a href="{{ url_for('design.download', filetype='proxy') }}" class="btn btn-outline-primary">
                <i class="bi bi-download"></i> Download remote control script
            </a>
        </div>
        {% if not deck %}
            <div class="col-xl-3 col-lg-4 col-md-6 mb-4 ">
                <div class="bg-white rounded shadow-sm position-relative">
                    <div class="p-4 controller-card" >
                        {% if deck %}
{#                            todo disconnect for imported deck #}
{#                            <h5> <a href="{{ url_for("disconnect") }}" class="stretched-link" style="color: orangered">Disconnect deck</a></h5>#}
                        {% else %}
                            <h5><a href="{{ url_for('control.new_controller') }}" style="color: orange" class="stretched-link">New connection</a></h5>
                        {% endif %}
                    </div>
                </div>
            </div>
        {% endif %}
    {% else %}
        <div class="col-xl-3 col-lg-4 col-md-6 mb-4 ">
            <div class="bg-white rounded shadow-sm position-relative">
                <div class="p-4 controller-card" >
                    {% if deck %}
                        <h5><a data-bs-toggle="modal" href="#importModal" class="stretched-link"><i class="bi bi-folder-plus"></i> Import deck </a></h5>
                    {% else %}
                        <h5><a href="{{ url_for('control.new_controller') }}" style="color: orange" class="stretched-link">New connection</a></h5>
                    {% endif %}
                </div>
            </div>
        </div>
    {% endif %}
    </div>
{% endblock %}
