<div class="col-md-12 d-flex">
    <div class="card flex-fill w-100">
        <div class="card-header">
            <h5 class="card-title mb-0">Exchange Instances</h5>
        </div>

        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover table-sm">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Type</th>
                        <th>Configuration</th>
                        <th class="text-end">
                            <div class="card-actions float-end">
                                <div class="btn-group float-end" role="group">
                                    <button type="button" class="btn btn-success btn-sm"
                                            data-bs-toggle="modal" data-bs-target="#exchangeModal" data-action="create_exchange">
                                        <i class="bi bi-plus"></i>
                                    </button>
                                </div>
                            </div>
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    {{#exchanges}}
                    <tr>
                        <td>{{.getName()}}</td>
                        <td>{{.getClass().getSimpleName()}}</td>
                        <td>{{.getDeviceConfig()}}</td>
                        <td class="text-end">
                            <form method="POST">
                                <input type="hidden" name="id" value="{{.getId()}}">

                                <div class="btn-group float-right">
                                    <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#exchangeModal"
                                            data-action="modify_exchange"
                                            data-id="{{.getId()}}"
                                            data-name="{{.getName()}}"
                                            data-type="{{.getObjectClass()}}"
                                            {{#.getObjectConfigurator().getConfiguration()}}
                                            data-{{.getName()}}="{{.getString()}}"
                                            {{/.getObjectConfigurator().getConfiguration()}}
                                    >
                                        <i class="bi bi-pencil"></i>
                                    </button>

                                    <button type="submit" class="btn btn-danger btn-sm" name="action" value="remove_exchange">
                                        <i class="bi bi-small bi-trash"></i>
                                    </button>
                                </div>
                            </form>
                        </td>
                    </tr>
                    {{/exchanges}}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

<!------------- MODALS --------------->
<script>
    $(function(){
        initDynamicModalForm("exchangeModal", "exchange-conf-inputs", "exchange-conf-template");
    });
</script>

<div class="modal fade" id="exchangeModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Exchange</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST">
                <div class="modal-body">
                    <input type="hidden" id="action" name="action">
                    <input type="hidden" id="id" name="id">
                    <div>
                        <label for="input-name" class="form-label">Name:</label>
                        <input id="input-name" type="text" name="name" class="form-control">
                    </div>

                    <div>
                        <label for="input-type" class="form-label">Type:</label>
                        <select id="input-type" name="type" class="form-control" >
                            {{#exchangeConfigClasses}}
                            <option>{{.getName()}}</option>
                            {{/exchangeConfigClasses}}
                        </select>
                    </div>
                    <hr>
                    <div id="exchange-conf-inputs">
                        <!-- Dynamic form -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="reset" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="exchange-conf-template" class="hidden">
    {{#exchangeObjectConfigs}}
    <div id="{{.clazz.getName()}}">
        {{#.params}}
        <div class="form-group">
            <label for="input-{{.getName()}}" class="form-label">{{.getNiceName()}}:</label>

            {{#.isTypeString()}}<input id="input-{{.getName()}}" type="text" class="form-control" name="{{.getName()}}">{{/#.isTypeString()}}
            {{#.isTypeNumber()}}<input id="input-{{.getName()}}" type="number" class="form-control" name="{{.getName()}}">{{/#.isTypeNumber()}}
            {{#.isTypeBoolean()}}<input id="input-{{.getName()}}" type="checkbox" name="{{.getName()}}" value="true">{{/#.isTypeBoolean()}}
            {{#.isTypeSelection()}}
            <select id="input-{{.getName()}}" class="form-control" name="{{.getName()}}">
                {{#.getPossibleValues()}}<option>{{.}}</option>{{/.getPossibleValues()}}
            </select>
            {{/#.isTypeSelection()}}

            {{#.getDescription()}}
            <div class="form-text">{{.getDescription()}}</div>
            {{/#.getDescription()}}
        </div>
        {{/.params}}
    </div>
    {{/exchangeObjectConfigs}}
</div>