2 <html lang="en" xmlns:th="http://www.thymeleaf.org">
5 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6 <title>Demo: Multidimensional Map With Dynamic Binding</title>
7 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
10 <nav class="navbar navbar-dark bg-primary navbar-expand navbar-dark flex-column">
11 <h1 class="navbar-brand">Demo: Multidimensional Map With Dynamic Binding</h1>
13 <main class="container mt-5">
14 <form action="#" th:action="@{/}" th:object="${form}" method="get">
15 <div class="card my-3" th:each="card : *{cards.entrySet()}">
16 <div class="card-header"><h2 th:text="|Card #${card.key}|">Card #X</h2></div>
17 <div class="card-body">
18 <div class="card-text">
19 <div class="form-group" th:each="row : ${card.value.entrySet()}">
20 <input type="checkbox" id="x" class="form-control" th:field="*{cards[__${card.key}__][__${row.key}__]}" />
21 <label for="x" th:for="${#ids.prev('cards[__${card.key}__][__${row.key}__]')}" th:text="${row.value}">ROW_NAME</label>
22 <button type="submit" name="remove" class="btn btn-primary" th:value="|${card.key}:${row.key}|">Remove</button>
24 <div class="form-group">
25 <input type="text" th:field="*{names[__${card.key}__]}" />
26 <button type="submit" name="add" th:value="${card.key}" class="btn btn-primary">Add Row</button>
29 <div class="card-footer">
30 <button type="submit" name="card" th:value="${card.key}" class="btn btn-primary">Remove Card</button>
34 <div class="card my-3">
35 <div class="card-header"><h2>Add A New Card...</h2></div>
36 <div class="card-body">
37 <div class="card-text">
38 <input type="text" th:field="*{names[0]}" />
39 <button type="submit" name="card" value="add" class="btn btn-primary my-3">Add Card</button>