trader/src/main/resources/web/symbol_config.tmpl

<div class="col-md-12 d-flex">
<div class="card flex-fill w-100">
    <div class="card-header">
        <div class="card-actions float-end">
            <div class="dropdown show">
                <a href="#" data-bs-toggle="dropdown" data-bs-display="static">
                    <i class="align-middle" data-feather="more-horizontal"></i>
                </a>

                <div class="dropdown-menu dropdown-menu-end">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </div>
        </div>
        <h5 class="card-title mb-0">Recent Movement</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>
                        <button class="btn btn-default btn-xs pull-right" data-toggle="modal"
                                data-target="#symbolModal"
                                data-action="create_symbol">
                            <span class="glyphicon glyphicon-plus"></span>
                        </button>
                    </th>
                </tr>
                </thead>
                <tbody>
                {{#symbols}}
                <tr>
                    <td>{{.getName()}}</td>
                    <td>{{.getType()}}</td>
                    <td>{{.getDeviceConfig()}}</td>
                    <td>
                        <form method="POST">
                            <input type="hidden" name="id" value="{{.getId()}}">

                            <div class="btn-toolbar pull-right">
                                <button type="button" class="btn btn-default btn-xs" data-toggle="modal"
                                        data-target="#symbolModal"
                                        data-action="modify_symbol"
                                        data-id="{{.getId()}}"
                                        data-name="{{.getName()}}"
                                        data-type="{{.getType()}}"
                                        {{#.getDeviceConfigurator().getConfiguration()}}
                                        data-{{.getName()}}="{{.getString()}}"
                                        {{/.getDeviceConfigurator().getConfiguration()}}
                                >
                                <span class="glyphicon glyphicon-pencil"></span>
                                </button>

                                <button type="submit" class="btn btn-danger btn-xs" name="action" value="remove_symbol">
                                    <span class="glyphicon glyphicon-trash"></span>
                                </button>
                            </div>
                        </form>
                    </td>
                </tr>
                {{/symbols}}
                </tbody>
            </table>
        </div>
    </div>
</div>
</div>

<!------------- MODALS --------------->
<script>
    $(function(){
        initDynamicModalForm("symbolModal");
    });
</script>

<div class="modal fade" id="symbolModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title">Symbol</h4>
            </div>
            <form method="POST">
                <div class="modal-body">
                    <input type="hidden" id="action" name="action">
                    <input type="hidden" id="id" name="id">
                    <div class="form-group">
                        <label class="control-label">Name:</label>
                        <input type="text" class="form-control" name="name">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="reset" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>