{% extends 'base.html' %}
{% block title %}IvoryOS | Controller for {{instrument}}{% endblock %}
{% block body %}
    <div id="overlay" class="overlay">
        <div>
            <h3 id="overlay-text"></h3>
            <div class="spinner-border" role="status"></div>
        </div>
    </div>
    <h1>{{instrument}} controller</h1>
    {% set hidden = session.get('hidden_functions', {}) %}
    <div class="grid-container" id="sortable-grid">
        {% for function, form in forms.items() %}

            {% set hidden_instrument = hidden.get(instrument, []) %}
            {% if function not in hidden_instrument %}
                <div class="card" id="{{function}}">
                    <div class="bg-white rounded shadow-sm flex-fill">
                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" data-bs-placement="top" title='{{ form.hidden_name.description or "Docstring is not available" }}' ></i>
                        <a style="float: right" aria-label="Close" href="{{ url_for('control.hide_function', instrument=instrument, function=function) }}"><i class="bi bi-eye-slash-fill"></i></a>
                        <div class="form-control" style="border: none">
                            <form role="form" method='POST' name="{{function}}" id="{{function}}">
                                <div class="form-group">
                                    {{ form.hidden_tag() }}
                                    {% for field in form %}
                                        {% if field.type not in ['CSRFTokenField', 'HiddenField'] %}
                                            <div class="input-group mb-3">
                                                <label class="input-group-text">{{ field.label.text }}</label>
                                                {% if field.type == "SubmitField" %}
                                                    {{ field(class="btn btn-dark") }}
                                                {% elif field.type == "BooleanField" %}
                                                    {{ field(class="form-check-input") }}
                                                {% else %}
                                                    {{ field(class="form-control") }}
                                                {% endif %}
                                            </div>
                                        {% endif %}
                                    {% endfor %}
                                </div>
                                <div class="input-group mb-3">
                                    <button type="submit" name="{{ function }}" id="{{ function }}" class="form-control" style="background-color: #a5cece;">{{format_name(function)}} </button>

                                </div>

                            </form>
                        </div>
                    </div>
                </div>
            {% endif %}
        {% endfor %}
    </div>
    <div class="accordion accordion-flush" id="accordionActions" >
        <div class="accordion-item">
            <h4 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#hidden">
                    Hidden functions
                </button>
            </h4>
        </div>
        <div id="hidden" class="accordion-collapse collapse" data-bs-parent="#accordionActions">
            <div class="accordion-body">
                {% set hidden_instrument = hidden.get(instrument, []) %}
                {% for function in hidden_instrument %}
                    <div>
                        {{ function }} <a href="{{ url_for('control.remove_hidden', instrument=instrument, function=function) }}"><i class="bi bi-eye-fill"></i></a>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <script>
        const saveOrderUrl = `{{ url_for('control.save_order', instrument=instrument) }}`;
        const buttonIds = {{ session['card_order'][instrument] | tojson }};
    </script>
    <script src="{{ url_for('static', filename='js/sortable_card.js') }}"></script>
    <script src="{{ url_for('static', filename='js/overlay.js') }}"></script>
{% endblock %}
