LoopOS UI v1.1.26.2

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
<turbo-frame class="block w-fit" id="lui-model_association_list_pokemon_1_types_token__wrapper_frame">
  <div data-controller="association-overlay-toggle model-association-list"
        data-model-association-list-frame-id-value="lui-model_association_list_pokemon_1_types_token__wrapper_frame"
        data-entangled-group=""
        class="lui-model-association-list">
    <div id="lui-model_association_list_pokemon_1_types_token_" class="lui-token-list lui-token-list--horizontal"
    data-controller="token-list"
    data-token-list-frame-id-value="lui-model_association_list_pokemon_1_types_token__frame"
    data-token-list-model-association-overlay-outlet="#lui-model_association_list_pokemon_1_types_token_ .lui-association-overlay">
      <turbo-frame class="lui-token-list__items" id="lui-model_association_list_pokemon_1_types_token__frame">
        <div data-controller="drag" class="lui-token-list__items">
          <div class="types_pokemon_1__attached_type_4" data-model-association-overlay-target="attachedItem" data-label="grass">
            <form class="flex items-center h-full w-full" action="/loopos_ui/associations" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="delete" autocomplete="off" /><input type="hidden" name="authenticity_token" value="n56mbsyGklTsZwLBHf07mOPxW8zJoxi4U7kgHlvvkeHKnoRxNdnkrxa5Gqo2LeEvniQMFwzCsvtL2XO6w6imuA" autocomplete="off" />
              <input value="njvqODwxo/kMGIS2uAYYJih/dhOFNM2fzRF/q42W9+1kqhmI1kDrhqSBsIprswbPN+RGm4VPdqkfAC2M/ktWANLZtTfrsazGVQ9RqmyRtM25a/Jvqd65nfCa/8V1j+BwWuwjdizfV3lv4KQVxoHTYtTYhonOZqlAgRQyqg6oPXc86BRxmPC61AKnsBQ56clRm5m03wVQ2Yd6kWz4O6G37bTXhCH+JGH0OEgjbdYPuyP/E2SRQpf2DKXtCPTS2dx2bKxRMmXxhrsFzOU7VeC7J/4PGCVphVHzhziJZm+EN5efyv7f0iKuP1tFv3napkWB3FqvglxZPZgsBRvoiGcIb6imDvolA9G82eS+IORwOS+FjN+ZyJBYfMpKE9klYIjUq1MzTx4jyHw0kehm0arvTpTXrhRqwkFOpf+6RSXbhledvca8RehEjEvOmHjc4nQTN6WNQUeVq2cmPnKROSTnzpuisM3ajKghA7bE1O+ndwdkZ2oN2drEQaCBNZg1CQCFNc675PUj3VYfenuNeyq27VIcs/GsRkdaB5yyBCCNbPimgjZv/PC/7Bb31t1lwkvq515T99gpGxi5QXv62AlK41Nd7Mm+uHvCLZtAXDrPyvCxlzjcX85U303FkovK44oKVOidRPitW+XlvQkoVX0HbhqER/zaAUjpLGTiTsyVHkis94I8fD37SPEQyGJ32CRA1qVFsT5/+Ll66J6AHHyB7Td5mUC1XRT5LGrSUJnZ058IqE6HaehxFs83SpBRi2RI9lPumSJyK4GBLNl68tHNwDyy5CEFTWV9V+ZvMqCpTgYZAhv9ERRuI1KLAb8BWQv0le4aEDd/TR4Od3QPxcdSrMlMlP5yVgnGUIo8sckCk3FyDLLAsAYEaP/mkcv+XLakIsMRzzjdSwPD/rHUD+okVGMeJS+VsEM2XJ2JAdvuVQSAHCE28cn1hxL/LyFQao7czu1OYyIL7U/DqF9vMYlX73l9yAZZtzQ/Ud3AdNV1u6KOjhb/LmUi1d6Qqxk+gdVWQWvOZ4dnSmoqSfXNOK8ttjW9B3UAvPI+J1XdpfUU25fOQpXDSBGItLplAb3lXznZ--n9ADRBns2A6Jr71L--BNFYCuyfZ3vOZWkxifhuFw==" autocomplete="off" type="hidden" name="context" id="context" />
              <input value="4" autocomplete="off" type="hidden" name="association_id" id="association_id" />
              <span id="lui-token_6503213766" class="lui-token  lui-entity-token lui-entity-token-general" style="color: #212529; background-color: #F8F9FA;">
                <span class="lui-token__text">grass</span>
                <div class="lui-token__actions">
                  <button class="flex" type="submit"><i class="fa-regular fa-xmark"></i></button>
                </div>
                <div class="lui-token__drag-handle">
                  <div class="lui-icon h-[12px] w-[12px]">
                    <i class="fa-solid fa-grip-dots-vertical lui-icon__icon" style="font-size: 12px; color: ;"></i>
                  </div>
                </div>
              </span>
            </form>
          </div>
          <div class="types_pokemon_1__attached_type_8" data-model-association-overlay-target="attachedItem" data-label="poison">
            <form class="flex items-center h-full w-full" action="/loopos_ui/associations" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="delete" autocomplete="off" /><input type="hidden" name="authenticity_token" value="DZ5C8qFNvK5ATAqeN-WjM0osF-q9f72qmsf1LFK27MtYnmDtWBLKVbqSEvUcNXmEN_lAMXgeF-mCp6aIyvHbkg" autocomplete="off" />
              <input value="njvqODwxo/kMGIS2uAYYJih/dhOFNM2fzRF/q42W9+1kqhmI1kDrhqSBsIprswbPN+RGm4VPdqkfAC2M/ktWANLZtTfrsazGVQ9RqmyRtM25a/Jvqd65nfCa/8V1j+BwWuwjdizfV3lv4KQVxoHTYtTYhonOZqlAgRQyqg6oPXc86BRxmPC61AKnsBQ56clRm5m03wVQ2Yd6kWz4O6G37bTXhCH+JGH0OEgjbdYPuyP/E2SRQpf2DKXtCPTS2dx2bKxRMmXxhrsFzOU7VeC7J/4PGCVphVHzhziJZm+EN5efyv7f0iKuP1tFv3napkWB3FqvglxZPZgsBRvoiGcIb6imDvolA9G82eS+IORwOS+FjN+ZyJBYfMpKE9klYIjUq1MzTx4jyHw0kehm0arvTpTXrhRqwkFOpf+6RSXbhledvca8RehEjEvOmHjc4nQTN6WNQUeVq2cmPnKROSTnzpuisM3ajKghA7bE1O+ndwdkZ2oN2drEQaCBNZg1CQCFNc675PUj3VYfenuNeyq27VIcs/GsRkdaB5yyBCCNbPimgjZv/PC/7Bb31t1lwkvq515T99gpGxi5QXv62AlK41Nd7Mm+uHvCLZtAXDrPyvCxlzjcX85U303FkovK44oKVOidRPitW+XlvQkoVX0HbhqER/zaAUjpLGTiTsyVHkis94I8fD37SPEQyGJ32CRA1qVFsT5/+Ll66J6AHHyB7Td5mUC1XRT5LGrSUJnZ058IqE6HaehxFs83SpBRi2RI9lPumSJyK4GBLNl68tHNwDyy5CEFTWV9V+ZvMqCpTgYZAhv9ERRuI1KLAb8BWQv0le4aEDd/TR4Od3QPxcdSrMlMlP5yVgnGUIo8sckCk3FyDLLAsAYEaP/mkcv+XLakIsMRzzjdSwPD/rHUD+okVGMeJS+VsEM2XJ2JAdvuVQSAHCE28cn1hxL/LyFQao7czu1OYyIL7U/DqF9vMYlX73l9yAZZtzQ/Ud3AdNV1u6KOjhb/LmUi1d6Qqxk+gdVWQWvOZ4dnSmoqSfXNOK8ttjW9B3UAvPI+J1XdpfUU25fOQpXDSBGItLplAb3lXznZ--n9ADRBns2A6Jr71L--BNFYCuyfZ3vOZWkxifhuFw==" autocomplete="off" type="hidden" name="context" id="context" />
              <input value="8" autocomplete="off" type="hidden" name="association_id" id="association_id" />
              <span id="lui-token_2322156580" class="lui-token  lui-entity-token lui-entity-token-general" style="color: #212529; background-color: #F8F9FA;">
                <span class="lui-token__text">poison</span>
                <div class="lui-token__actions">
                  <button class="flex" type="submit"><i class="fa-regular fa-xmark"></i></button>
                </div>
                <div class="lui-token__drag-handle">
                  <div class="lui-icon h-[12px] w-[12px]">
                    <i class="fa-solid fa-grip-dots-vertical lui-icon__icon" style="font-size: 12px; color: ;"></i>
                  </div>
                </div>
              </span>
            </form>
          </div>
        </div>
      </turbo-frame>            
      <div data-model-association-list-target="popover" data-controller="popover" data-popover-open-value="false" data-popover-rotate-toggle-value="false" class="lui-popover">
        <button popovertarget="popover-a59b7c9362b43c89437a-target" data-controller="popover-toggle" data-popover-target="toggle" data-popover-toggle-position-value="bottom_left" data-popover-toggle-anchor-value="top_left" data-popover-toggle-on-close-value="" data-popover-toggle-rotate-value="false" type="button" class="lui-popover-toggle-wrapper">
          <button class="lui-button lui-button--neutral--tertiary lui-button--size-tiny w-fit w-fit" data-controller="lui--button popover-toggle" data-popover-target="toggle" data-popover-toggle-position-value="bottom_left" data-popover-toggle-anchor-value="top_left" data-popover-toggle-on-close-value="" data-popover-toggle-rotate-value="false" popovertarget="popover-a59b7c9362b43c89437a-target">
            <i class="lui-button__icon lui-button__icon--tiny fa-regular fa-plus" data-lui--button-target="leadingIcon"></i>
            <span class="lui-button__text" data-lui--button-target="text">
              Add Option Value
            </span>
          </button>
        </button>  
        <div id="popover-a59b7c9362b43c89437a-target" popover="manual" data-popover-target="popover" class="pointer-events-none w-full h-full bg-transparent overflow-hidden">
          <div class="bg-white lui-popover-inner absolute pointer-events-auto">
            <turbo-frame class="relative" id="types_pokemon_1_">
              <div id="model-association-overlay-a2f8c39196d7e1ebc1a3" class="lui-association-overlay" data-controller="model-association-overlay" data-model-association-overlay-case-sensitive-value="false" data-model-association-overlay-show-results-value="true">
                <div class="lui-association-overlay__selected_list">
                  <div class="flex items-center gap-2 flex-wrap" id="association_overlay_selected_pokemon_1_types_" data-controller="drag">
                    <div class="types_pokemon_1__attached_type_4" data-model-association-overlay-target="attachedItem" data-label="grass">
                      <form class="flex items-center h-full w-full" action="/loopos_ui/associations" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="delete" autocomplete="off" /><input type="hidden" name="authenticity_token" value="uxo_JGAIpnWUNx-SrGCE5atldRONUKrWTR2gBrFVijruGh07mVfQjm7pB_mHsF5S1rAiyEgxAJVVffOiKRK9Yw" autocomplete="off" />
                        <input value="njvqODwxo/kMGIS2uAYYJih/dhOFNM2fzRF/q42W9+1kqhmI1kDrhqSBsIprswbPN+RGm4VPdqkfAC2M/ktWANLZtTfrsazGVQ9RqmyRtM25a/Jvqd65nfCa/8V1j+BwWuwjdizfV3lv4KQVxoHTYtTYhonOZqlAgRQyqg6oPXc86BRxmPC61AKnsBQ56clRm5m03wVQ2Yd6kWz4O6G37bTXhCH+JGH0OEgjbdYPuyP/E2SRQpf2DKXtCPTS2dx2bKxRMmXxhrsFzOU7VeC7J/4PGCVphVHzhziJZm+EN5efyv7f0iKuP1tFv3napkWB3FqvglxZPZgsBRvoiGcIb6imDvolA9G82eS+IORwOS+FjN+ZyJBYfMpKE9klYIjUq1MzTx4jyHw0kehm0arvTpTXrhRqwkFOpf+6RSXbhledvca8RehEjEvOmHjc4nQTN6WNQUeVq2cmPnKROSTnzpuisM3ajKghA7bE1O+ndwdkZ2oN2drEQaCBNZg1CQCFNc675PUj3VYfenuNeyq27VIcs/GsRkdaB5yyBCCNbPimgjZv/PC/7Bb31t1lwkvq515T99gpGxi5QXv62AlK41Nd7Mm+uHvCLZtAXDrPyvCxlzjcX85U303FkovK44oKVOidRPitW+XlvQkoVX0HbhqER/zaAUjpLGTiTsyVHkis94I8fD37SPEQyGJ32CRA1qVFsT5/+Ll66J6AHHyB7Td5mUC1XRT5LGrSUJnZ058IqE6HaehxFs83SpBRi2RI9lPumSJyK4GBLNl68tHNwDyy5CEFTWV9V+ZvMqCpTgYZAhv9ERRuI1KLAb8BWQv0le4aEDd/TR4Od3QPxcdSrMlMlP5yVgnGUIo8sckCk3FyDLLAsAYEaP/mkcv+XLakIsMRzzjdSwPD/rHUD+okVGMeJS+VsEM2XJ2JAdvuVQSAHCE28cn1hxL/LyFQao7czu1OYyIL7U/DqF9vMYlX73l9yAZZtzQ/Ud3AdNV1u6KOjhb/LmUi1d6Qqxk+gdVWQWvOZ4dnSmoqSfXNOK8ttjW9B3UAvPI+J1XdpfUU25fOQpXDSBGItLplAb3lXznZ--n9ADRBns2A6Jr71L--BNFYCuyfZ3vOZWkxifhuFw==" autocomplete="off" type="hidden" name="context" id="context" />
                        <input value="4" autocomplete="off" type="hidden" name="association_id" id="association_id" />
                        <span id="lui-token_8670528836" class="lui-token  lui-entity-token lui-entity-token-general" style="color: #212529; background-color: #F8F9FA;">
                          <span class="lui-token__text">grass</span>
                          <div class="lui-token__actions">
                            <button class="flex" type="submit"><i class="fa-regular fa-xmark"></i></button>
                          </div>
                          <div class="lui-token__drag-handle">
                            <div class="lui-icon h-[12px] w-[12px]">
                              <i class="fa-solid fa-grip-dots-vertical lui-icon__icon" style="font-size: 12px; color: ;"></i>
                            </div>
                          </div>
                        </span>
                      </form>
                    </div>
                    <div class="types_pokemon_1__attached_type_8" data-model-association-overlay-target="attachedItem" data-label="poison">
                      <form class="flex items-center h-full w-full" action="/loopos_ui/associations" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="delete" autocomplete="off" /><input type="hidden" name="authenticity_token" value="txKaYH7M_BGHpuQtH7Dbuf8U8ev7OCb14YDt7ckgYaHiErh_h5OK6n14_EY0YAEOgsGmMD5ZjLb54L5JUWdW-A" autocomplete="off" />
                        <input value="njvqODwxo/kMGIS2uAYYJih/dhOFNM2fzRF/q42W9+1kqhmI1kDrhqSBsIprswbPN+RGm4VPdqkfAC2M/ktWANLZtTfrsazGVQ9RqmyRtM25a/Jvqd65nfCa/8V1j+BwWuwjdizfV3lv4KQVxoHTYtTYhonOZqlAgRQyqg6oPXc86BRxmPC61AKnsBQ56clRm5m03wVQ2Yd6kWz4O6G37bTXhCH+JGH0OEgjbdYPuyP/E2SRQpf2DKXtCPTS2dx2bKxRMmXxhrsFzOU7VeC7J/4PGCVphVHzhziJZm+EN5efyv7f0iKuP1tFv3napkWB3FqvglxZPZgsBRvoiGcIb6imDvolA9G82eS+IORwOS+FjN+ZyJBYfMpKE9klYIjUq1MzTx4jyHw0kehm0arvTpTXrhRqwkFOpf+6RSXbhledvca8RehEjEvOmHjc4nQTN6WNQUeVq2cmPnKROSTnzpuisM3ajKghA7bE1O+ndwdkZ2oN2drEQaCBNZg1CQCFNc675PUj3VYfenuNeyq27VIcs/GsRkdaB5yyBCCNbPimgjZv/PC/7Bb31t1lwkvq515T99gpGxi5QXv62AlK41Nd7Mm+uHvCLZtAXDrPyvCxlzjcX85U303FkovK44oKVOidRPitW+XlvQkoVX0HbhqER/zaAUjpLGTiTsyVHkis94I8fD37SPEQyGJ32CRA1qVFsT5/+Ll66J6AHHyB7Td5mUC1XRT5LGrSUJnZ058IqE6HaehxFs83SpBRi2RI9lPumSJyK4GBLNl68tHNwDyy5CEFTWV9V+ZvMqCpTgYZAhv9ERRuI1KLAb8BWQv0le4aEDd/TR4Od3QPxcdSrMlMlP5yVgnGUIo8sckCk3FyDLLAsAYEaP/mkcv+XLakIsMRzzjdSwPD/rHUD+okVGMeJS+VsEM2XJ2JAdvuVQSAHCE28cn1hxL/LyFQao7czu1OYyIL7U/DqF9vMYlX73l9yAZZtzQ/Ud3AdNV1u6KOjhb/LmUi1d6Qqxk+gdVWQWvOZ4dnSmoqSfXNOK8ttjW9B3UAvPI+J1XdpfUU25fOQpXDSBGItLplAb3lXznZ--n9ADRBns2A6Jr71L--BNFYCuyfZ3vOZWkxifhuFw==" autocomplete="off" type="hidden" name="context" id="context" />
                        <input value="8" autocomplete="off" type="hidden" name="association_id" id="association_id" />
                        <span id="lui-token_9451751915" class="lui-token  lui-entity-token lui-entity-token-general" style="color: #212529; background-color: #F8F9FA;">
                          <span class="lui-token__text">poison</span>
                          <div class="lui-token__actions">
                            <button class="flex" type="submit"><i class="fa-regular fa-xmark"></i></button>
                          </div>
                          <div class="lui-token__drag-handle">
                            <div class="lui-icon h-[12px] w-[12px]">
                              <i class="fa-solid fa-grip-dots-vertical lui-icon__icon" style="font-size: 12px; color: ;"></i>
                            </div>
                          </div>
                        </span>
                      </form>
                    </div>
                  </div>
                </div>
                <div class="lui-association-overlay__divider"></div>
                <div class="lui-association-overlay__search">
                  <i class="fa-regular fa-search text-[8px] font-bold"></i>
                  <input type="text" placeholder="Search or text for new" data-model-association-overlay-target="input">
                </div>
                <div class="lui-association-overlay__divider"></div>
                <div class="lui-association-overlay__results overflow-scroll" id="association_overlay_results_pokemon_1_types_" data-model-association-overlay-target="resultsContainer">
                  <div class="lui-association-overlay__results__cell lui-association-overlay__results__cell--missing" data-model-association-overlay-target="result" data-label="normal" id="types_pokemon_1__missing_type_1">
                    <form class="flex items-center h-full w-full" action="/loopos_ui/associations" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="YHd4ALlhV1INgGsNTyiF9sMhLR9MK0mdUWEeATg85hMajvTf9VgBuPi2ysPEecxDS64k4iSknc4ONTJTF_msZw" autocomplete="off" />
                      <input value="njvqODwxo/kMGIS2uAYYJih/dhOFNM2fzRF/q42W9+1kqhmI1kDrhqSBsIprswbPN+RGm4VPdqkfAC2M/ktWANLZtTfrsazGVQ9RqmyRtM25a/Jvqd65nfCa/8V1j+BwWuwjdizfV3lv4KQVxoHTYtTYhonOZqlAgRQyqg6oPXc86BRxmPC61AKnsBQ56clRm5m03wVQ2Yd6kWz4O6G37bTXhCH+JGH0OEgjbdYPuyP/E2SRQpf2DKXtCPTS2dx2bKxRMmXxhrsFzOU7VeC7J/4PGCVphVHzhziJZm+EN5efyv7f0iKuP1tFv3napkWB3FqvglxZPZgsBRvoiGcIb6imDvolA9G82eS+IORwOS+FjN+ZyJBYfMpKE9klYIjUq1MzTx4jyHw0kehm0arvTpTXrhRqwkFOpf+6RSXbhledvca8RehEjEvOmHjc4nQTN6WNQUeVq2cmPnKROSTnzpuisM3ajKghA7bE1O+ndwdkZ2oN2drEQaCBNZg1CQCFNc675PUj3VYfenuNeyq27VIcs/GsRkdaB5yyBCCNbPimgjZv/PC/7Bb31t1lwkvq515T99gpGxi5QXv62AlK41Nd7Mm+uHvCLZtAXDrPyvCxlzjcX85U303FkovK44oKVOidRPitW+XlvQkoVX0HbhqER/zaAUjpLGTiTsyVHkis94I8fD37SPEQyGJ32CRA1qVFsT5/+Ll66J6AHHyB7Td5mUC1XRT5LGrSUJnZ058IqE6HaehxFs83SpBRi2RI9lPumSJyK4GBLNl68tHNwDyy5CEFTWV9V+ZvMqCpTgYZAhv9ERRuI1KLAb8BWQv0le4aEDd/TR4Od3QPxcdSrMlMlP5yVgnGUIo8sckCk3FyDLLAsAYEaP/mkcv+XLakIsMRzzjdSwPD/rHUD+okVGMeJS+VsEM2XJ2JAdvuVQSAHCE28cn1hxL/LyFQao7czu1OYyIL7U/DqF9vMYlX73l9yAZZtzQ/Ud3AdNV1u6KOjhb/LmUi1d6Qqxk+gdVWQWvOZ4dnSmoqSfXNOK8ttjW9B3UAvPI+J1XdpfUU25fOQpXDSBGItLplAb3lXznZ--n9ADRBns2A6Jr71L--BNFYCuyfZ3vOZWkxifhuFw==" autocomplete="off" type="hidden" name="context" id="context" />
                      <input value="1" autocomplete="off" type="hidden" name="association_id" id="association_id" />
                      <button name="button" type="submit" class="flex items-center w-full h-full">
                        <span id="lui-token_1569762617" class="lui-token locked lui-entity-token lui-entity-token-general" style="color: #212529; background-color: #F8F9FA;">
                          <span class="lui-token__text">normal</span>
                          <div class="lui-token__actions">
                          </div>
                        </span>
                      </button></form>
                  </div>
                  <div class="lui-association-overlay__results__cell lui-association-overlay__results__cell--missing" data-model-association-overlay-target="result" data-label="fire" id="types_pokemon_1__missing_type_2">
                    <form class="flex items-center h-full w-full" action="/loopos_ui/associations" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="_qwvAriJ3XzxlE2ryw4gVUiL-pGrbvufVoCcFV2w0KGEVaPd9LCLlgSi7GVAX2ngwATzbMPhL8wJ1LBHcnWa1Q" autocomplete="off" />
                      <input value="njvqODwxo/kMGIS2uAYYJih/dhOFNM2fzRF/q42W9+1kqhmI1kDrhqSBsIprswbPN+RGm4VPdqkfAC2M/ktWANLZtTfrsazGVQ9RqmyRtM25a/Jvqd65nfCa/8V1j+BwWuwjdizfV3lv4KQVxoHTYtTYhonOZqlAgRQyqg6oPXc86BRxmPC61AKnsBQ56clRm5m03wVQ2Yd6kWz4O6G37bTXhCH+JGH0OEgjbdYPuyP/E2SRQpf2DKXtCPTS2dx2bKxRMmXxhrsFzOU7VeC7J/4PGCVphVHzhziJZm+EN5efyv7f0iKuP1tFv3napkWB3FqvglxZPZgsBRvoiGcIb6imDvolA9G82eS+IORwOS+FjN+ZyJBYfMpKE9klYIjUq1MzTx4jyHw0kehm0arvTpTXrhRqwkFOpf+6RSXbhledvca8RehEjEvOmHjc4nQTN6WNQUeVq2cmPnKROSTnzpuisM3ajKghA7bE1O+ndwdkZ2oN2drEQaCBNZg1CQCFNc675PUj3VYfenuNeyq27VIcs/GsRkdaB5yyBCCNbPimgjZv/PC/7Bb31t1lwkvq515T99gpGxi5QXv62AlK41Nd7Mm+uHvCLZtAXDrPyvCxlzjcX85U303FkovK44oKVOidRPitW+XlvQkoVX0HbhqER/zaAUjpLGTiTsyVHkis94I8fD37SPEQyGJ32CRA1qVFsT5/+Ll66J6AHHyB7Td5mUC1XRT5LGrSUJnZ058IqE6HaehxFs83SpBRi2RI9lPumSJyK4GBLNl68tHNwDyy5CEFTWV9V+ZvMqCpTgYZAhv9ERRuI1KLAb8BWQv0le4aEDd/TR4Od3QPxcdSrMlMlP5yVgnGUIo8sckCk3FyDLLAsAYEaP/mkcv+XLakIsMRzzjdSwPD/rHUD+okVGMeJS+VsEM2XJ2JAdvuVQSAHCE28cn1hxL/LyFQao7czu1OYyIL7U/DqF9vMYlX73l9yAZZtzQ/Ud3AdNV1u6KOjhb/LmUi1d6Qqxk+gdVWQWvOZ4dnSmoqSfXNOK8ttjW9B3UAvPI+J1XdpfUU25fOQpXDSBGItLplAb3lXznZ--n9ADRBns2A6Jr71L--BNFYCuyfZ3vOZWkxifhuFw==" autocomplete="off" type="hidden" name="context" id="context" />
                      <input value="2" autocomplete="off" type="hidden" name="association_id" id="association_id" />
                      <button name="button" type="submit" class="flex items-center w-full h-full">
                        <span id="lui-token_5005363814" class="lui-token locked lui-entity-token lui-entity-token-general" style="color: #212529; background-color: #F8F9FA;">
                          <span class="lui-token__text">fire</span>
                          <div class="lui-token__actions">
                          </div>
                        </span>
                      </button></form>
                  </div>
                  <div class="lui-association-overlay__results__cell lui-association-overlay__results__cell--missing" data-model-association-overlay-target="result" data-label="water" id="types_pokemon_1__missing_type_3">
                    <form class="flex items-center h-full w-full" action="/loopos_ui/associations" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="ovKTD11BD5omguK1M-yd-0qUlpeNaO2decUTVaG3zIfYCx_QEXhZcNO0Q3u4vdROwhufauXnOc4mkT8HjnKG8w" autocomplete="off" />
                      <input value="njvqODwxo/kMGIS2uAYYJih/dhOFNM2fzRF/q42W9+1kqhmI1kDrhqSBsIprswbPN+RGm4VPdqkfAC2M/ktWANLZtTfrsazGVQ9RqmyRtM25a/Jvqd65nfCa/8V1j+BwWuwjdizfV3lv4KQVxoHTYtTYhonOZqlAgRQyqg6oPXc86BRxmPC61AKnsBQ56clRm5m03wVQ2Yd6kWz4O6G37bTXhCH+JGH0OEgjbdYPuyP/E2SRQpf2DKXtCPTS2dx2bKxRMmXxhrsFzOU7VeC7J/4PGCVphVHzhziJZm+EN5efyv7f0iKuP1tFv3napkWB3FqvglxZPZgsBRvoiGcIb6imDvolA9G82eS+IORwOS+FjN+ZyJBYfMpKE9klYIjUq1MzTx4jyHw0kehm0arvTpTXrhRqwkFOpf+6RSXbhledvca8RehEjEvOmHjc4nQTN6WNQUeVq2cmPnKROSTnzpuisM3ajKghA7bE1O+ndwdkZ2oN2drEQaCBNZg1CQCFNc675PUj3VYfenuNeyq27VIcs/GsRkdaB5yyBCCNbPimgjZv/PC/7Bb31t1lwkvq515T99gpGxi5QXv62AlK41Nd7Mm+uHvCLZtAXDrPyvCxlzjcX85U303FkovK44oKVOidRPitW+XlvQkoVX0HbhqER/zaAUjpLGTiTsyVHkis94I8fD37SPEQyGJ32CRA1qVFsT5/+Ll66J6AHHyB7Td5mUC1XRT5LGrSUJnZ058IqE6HaehxFs83SpBRi2RI9lPumSJyK4GBLNl68tHNwDyy5CEFTWV9V+ZvMqCpTgYZAhv9ERRuI1KLAb8BWQv0le4aEDd/TR4Od3QPxcdSrMlMlP5yVgnGUIo8sckCk3FyDLLAsAYEaP/mkcv+XLakIsMRzzjdSwPD/rHUD+okVGMeJS+VsEM2XJ2JAdvuVQSAHCE28cn1hxL/LyFQao7czu1OYyIL7U/DqF9vMYlX73l9yAZZtzQ/Ud3AdNV1u6KOjhb/LmUi1d6Qqxk+gdVWQWvOZ4dnSmoqSfXNOK8ttjW9B3UAvPI+J1XdpfUU25fOQpXDSBGItLplAb3lXznZ--n9ADRBns2A6Jr71L--BNFYCuyfZ3vOZWkxifhuFw==" autocomplete="off" type="hidden" name="context" id="context" />
                      <input value="3" autocomplete="off" type="hidden" name="association_id" id="association_id" />
                      <button name="button" type="submit" class="flex items-center w-full h-full">
                        <span id="lui-token_9404554452" class="lui-token locked lui-entity-token lui-entity-token-general" style="color: #212529; background-color: #F8F9FA;">
                          <span class="lui-token__text">water</span>
                          <div class="lui-token__actions">
                          </div>
                        </span>
                      </button></form>
                  </div>
                  <div class="lui-association-overlay__results__cell lui-association-overlay__results__cell--missing" data-model-association-overlay-target="result" data-label="electric" id="types_pokemon_1__missing_type_5">
                    <form class="flex items-center h-full w-full" action="/loopos_ui/associations" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="u_uDfasD4TC9njCmBHlse6JHPGHNQj2e97jjZKX4R5rBAg-i5zq32kiokWiPKCXOKsg1nKXN6c2o7M82ij0N7g" autocomplete="off" />
                      <input value="njvqODwxo/kMGIS2uAYYJih/dhOFNM2fzRF/q42W9+1kqhmI1kDrhqSBsIprswbPN+RGm4VPdqkfAC2M/ktWANLZtTfrsazGVQ9RqmyRtM25a/Jvqd65nfCa/8V1j+BwWuwjdizfV3lv4KQVxoHTYtTYhonOZqlAgRQyqg6oPXc86BRxmPC61AKnsBQ56clRm5m03wVQ2Yd6kWz4O6G37bTXhCH+JGH0OEgjbdYPuyP/E2SRQpf2DKXtCPTS2dx2bKxRMmXxhrsFzOU7VeC7J/4PGCVphVHzhziJZm+EN5efyv7f0iKuP1tFv3napkWB3FqvglxZPZgsBRvoiGcIb6imDvolA9G82eS+IORwOS+FjN+ZyJBYfMpKE9klYIjUq1MzTx4jyHw0kehm0arvTpTXrhRqwkFOpf+6RSXbhledvca8RehEjEvOmHjc4nQTN6WNQUeVq2cmPnKROSTnzpuisM3ajKghA7bE1O+ndwdkZ2oN2drEQaCBNZg1CQCFNc675PUj3VYfenuNeyq27VIcs/GsRkdaB5yyBCCNbPimgjZv/PC/7Bb31t1lwkvq515T99gpGxi5QXv62AlK41Nd7Mm+uHvCLZtAXDrPyvCxlzjcX85U303FkovK44oKVOidRPitW+XlvQkoVX0HbhqER/zaAUjpLGTiTsyVHkis94I8fD37SPEQyGJ32CRA1qVFsT5/+Ll66J6AHHyB7Td5mUC1XRT5LGrSUJnZ058IqE6HaehxFs83SpBRi2RI9lPumSJyK4GBLNl68tHNwDyy5CEFTWV9V+ZvMqCpTgYZAhv9ERRuI1KLAb8BWQv0le4aEDd/TR4Od3QPxcdSrMlMlP5yVgnGUIo8sckCk3FyDLLAsAYEaP/mkcv+XLakIsMRzzjdSwPD/rHUD+okVGMeJS+VsEM2XJ2JAdvuVQSAHCE28cn1hxL/LyFQao7czu1OYyIL7U/DqF9vMYlX73l9yAZZtzQ/Ud3AdNV1u6KOjhb/LmUi1d6Qqxk+gdVWQWvOZ4dnSmoqSfXNOK8ttjW9B3UAvPI+J1XdpfUU25fOQpXDSBGItLplAb3lXznZ--n9ADRBns2A6Jr71L--BNFYCuyfZ3vOZWkxifhuFw==" autocomplete="off" type="hidden" name="context" id="context" />
                      <input value="5" autocomplete="off" type="hidden" name="association_id" id="association_id" />
                      <button name="button" type="submit" class="flex items-center w-full h-full">
                        <span id="lui-token_5703447052" class="lui-token locked lui-entity-token lui-entity-token-general" style="color: #212529; background-color: #F8F9FA;">
                          <span class="lui-token__text">electric</span>
                          <div class="lui-token__actions">
                          </div>
                        </span>
                      </button></form>
                  </div>
                  <div class="lui-association-overlay__results__cell lui-association-overlay__results__cell--missing" data-model-association-overlay-target="result" data-label="ice" id="types_pokemon_1__missing_type_6">
                    <form class="flex items-center h-full w-full" action="/loopos_ui/associations" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="fcS35Mx8H6i-GVeAnmFPzwc7ejOjJp1PHzZGb-YOqhcHPTs7gEVJQksv9k4VMAZ6j7RzzsupSRxAYmo9ycvgYw" autocomplete="off" />
                      <input value="njvqODwxo/kMGIS2uAYYJih/dhOFNM2fzRF/q42W9+1kqhmI1kDrhqSBsIprswbPN+RGm4VPdqkfAC2M/ktWANLZtTfrsazGVQ9RqmyRtM25a/Jvqd65nfCa/8V1j+BwWuwjdizfV3lv4KQVxoHTYtTYhonOZqlAgRQyqg6oPXc86BRxmPC61AKnsBQ56clRm5m03wVQ2Yd6kWz4O6G37bTXhCH+JGH0OEgjbdYPuyP/E2SRQpf2DKXtCPTS2dx2bKxRMmXxhrsFzOU7VeC7J/4PGCVphVHzhziJZm+EN5efyv7f0iKuP1tFv3napkWB3FqvglxZPZgsBRvoiGcIb6imDvolA9G82eS+IORwOS+FjN+ZyJBYfMpKE9klYIjUq1MzTx4jyHw0kehm0arvTpTXrhRqwkFOpf+6RSXbhledvca8RehEjEvOmHjc4nQTN6WNQUeVq2cmPnKROSTnzpuisM3ajKghA7bE1O+ndwdkZ2oN2drEQaCBNZg1CQCFNc675PUj3VYfenuNeyq27VIcs/GsRkdaB5yyBCCNbPimgjZv/PC/7Bb31t1lwkvq515T99gpGxi5QXv62AlK41Nd7Mm+uHvCLZtAXDrPyvCxlzjcX85U303FkovK44oKVOidRPitW+XlvQkoVX0HbhqER/zaAUjpLGTiTsyVHkis94I8fD37SPEQyGJ32CRA1qVFsT5/+Ll66J6AHHyB7Td5mUC1XRT5LGrSUJnZ058IqE6HaehxFs83SpBRi2RI9lPumSJyK4GBLNl68tHNwDyy5CEFTWV9V+ZvMqCpTgYZAhv9ERRuI1KLAb8BWQv0le4aEDd/TR4Od3QPxcdSrMlMlP5yVgnGUIo8sckCk3FyDLLAsAYEaP/mkcv+XLakIsMRzzjdSwPD/rHUD+okVGMeJS+VsEM2XJ2JAdvuVQSAHCE28cn1hxL/LyFQao7czu1OYyIL7U/DqF9vMYlX73l9yAZZtzQ/Ud3AdNV1u6KOjhb/LmUi1d6Qqxk+gdVWQWvOZ4dnSmoqSfXNOK8ttjW9B3UAvPI+J1XdpfUU25fOQpXDSBGItLplAb3lXznZ--n9ADRBns2A6Jr71L--BNFYCuyfZ3vOZWkxifhuFw==" autocomplete="off" type="hidden" name="context" id="context" />
                      <input value="6" autocomplete="off" type="hidden" name="association_id" id="association_id" />
                      <button name="button" type="submit" class="flex items-center w-full h-full">
                        <span id="lui-token_3999329769" class="lui-token locked lui-entity-token lui-entity-token-general" style="color: #212529; background-color: #F8F9FA;">
                          <span class="lui-token__text">ice</span>
                          <div class="lui-token__actions">
                          </div>
                        </span>
                      </button></form>
                  </div>
                  <div class="lui-association-overlay__results__cell lui-association-overlay__results__cell--missing" data-model-association-overlay-target="result" data-label="fighting" id="types_pokemon_1__missing_type_7">
                    <form class="flex items-center h-full w-full" action="/loopos_ui/associations" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="7KRqAWfXVPk5nQmzSWF4aG1PeVHgunz-nJG8Vr5tad6WXebeK-4CE8yrqH3CMDHd5cBwrIg1qK3DxZAEkagjqg" autocomplete="off" />
                      <input value="njvqODwxo/kMGIS2uAYYJih/dhOFNM2fzRF/q42W9+1kqhmI1kDrhqSBsIprswbPN+RGm4VPdqkfAC2M/ktWANLZtTfrsazGVQ9RqmyRtM25a/Jvqd65nfCa/8V1j+BwWuwjdizfV3lv4KQVxoHTYtTYhonOZqlAgRQyqg6oPXc86BRxmPC61AKnsBQ56clRm5m03wVQ2Yd6kWz4O6G37bTXhCH+JGH0OEgjbdYPuyP/E2SRQpf2DKXtCPTS2dx2bKxRMmXxhrsFzOU7VeC7J/4PGCVphVHzhziJZm+EN5efyv7f0iKuP1tFv3napkWB3FqvglxZPZgsBRvoiGcIb6imDvolA9G82eS+IORwOS+FjN+ZyJBYfMpKE9klYIjUq1MzTx4jyHw0kehm0arvTpTXrhRqwkFOpf+6RSXbhledvca8RehEjEvOmHjc4nQTN6WNQUeVq2cmPnKROSTnzpuisM3ajKghA7bE1O+ndwdkZ2oN2drEQaCBNZg1CQCFNc675PUj3VYfenuNeyq27VIcs/GsRkdaB5yyBCCNbPimgjZv/PC/7Bb31t1lwkvq515T99gpGxi5QXv62AlK41Nd7Mm+uHvCLZtAXDrPyvCxlzjcX85U303FkovK44oKVOidRPitW+XlvQkoVX0HbhqER/zaAUjpLGTiTsyVHkis94I8fD37SPEQyGJ32CRA1qVFsT5/+Ll66J6AHHyB7Td5mUC1XRT5LGrSUJnZ058IqE6HaehxFs83SpBRi2RI9lPumSJyK4GBLNl68tHNwDyy5CEFTWV9V+ZvMqCpTgYZAhv9ERRuI1KLAb8BWQv0le4aEDd/TR4Od3QPxcdSrMlMlP5yVgnGUIo8sckCk3FyDLLAsAYEaP/mkcv+XLakIsMRzzjdSwPD/rHUD+okVGMeJS+VsEM2XJ2JAdvuVQSAHCE28cn1hxL/LyFQao7czu1OYyIL7U/DqF9vMYlX73l9yAZZtzQ/Ud3AdNV1u6KOjhb/LmUi1d6Qqxk+gdVWQWvOZ4dnSmoqSfXNOK8ttjW9B3UAvPI+J1XdpfUU25fOQpXDSBGItLplAb3lXznZ--n9ADRBns2A6Jr71L--BNFYCuyfZ3vOZWkxifhuFw==" autocomplete="off" type="hidden" name="context" id="context" />
                      <input value="7" autocomplete="off" type="hidden" name="association_id" id="association_id" />
                      <button name="button" type="submit" class="flex items-center w-full h-full">
                        <span id="lui-token_3139447488" class="lui-token locked lui-entity-token lui-entity-token-general" style="color: #212529; background-color: #F8F9FA;">
                          <span class="lui-token__text">fighting</span>
                          <div class="lui-token__actions">
                          </div>
                        </span>
                      </button></form>
                  </div>
                  <div class="lui-association-overlay__results__cell lui-association-overlay__results__cell--missing" data-model-association-overlay-target="result" data-label="ground" id="types_pokemon_1__missing_type_9">
                    <form class="flex items-center h-full w-full" action="/loopos_ui/associations" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="uN7uUSxnbL2Z_69BQB3OPRku9GoVsKdkNUKTa5ttTNvCJ2KOYF46V2zJDo_LTIeIkaH9l30_czdqFr85tKgGrw" autocomplete="off" />
                      <input value="njvqODwxo/kMGIS2uAYYJih/dhOFNM2fzRF/q42W9+1kqhmI1kDrhqSBsIprswbPN+RGm4VPdqkfAC2M/ktWANLZtTfrsazGVQ9RqmyRtM25a/Jvqd65nfCa/8V1j+BwWuwjdizfV3lv4KQVxoHTYtTYhonOZqlAgRQyqg6oPXc86BRxmPC61AKnsBQ56clRm5m03wVQ2Yd6kWz4O6G37bTXhCH+JGH0OEgjbdYPuyP/E2SRQpf2DKXtCPTS2dx2bKxRMmXxhrsFzOU7VeC7J/4PGCVphVHzhziJZm+EN5efyv7f0iKuP1tFv3napkWB3FqvglxZPZgsBRvoiGcIb6imDvolA9G82eS+IORwOS+FjN+ZyJBYfMpKE9klYIjUq1MzTx4jyHw0kehm0arvTpTXrhRqwkFOpf+6RSXbhledvca8RehEjEvOmHjc4nQTN6WNQUeVq2cmPnKROSTnzpuisM3ajKghA7bE1O+ndwdkZ2oN2drEQaCBNZg1CQCFNc675PUj3VYfenuNeyq27VIcs/GsRkdaB5yyBCCNbPimgjZv/PC/7Bb31t1lwkvq515T99gpGxi5QXv62AlK41Nd7Mm+uHvCLZtAXDrPyvCxlzjcX85U303FkovK44oKVOidRPitW+XlvQkoVX0HbhqER/zaAUjpLGTiTsyVHkis94I8fD37SPEQyGJ32CRA1qVFsT5/+Ll66J6AHHyB7Td5mUC1XRT5LGrSUJnZ058IqE6HaehxFs83SpBRi2RI9lPumSJyK4GBLNl68tHNwDyy5CEFTWV9V+ZvMqCpTgYZAhv9ERRuI1KLAb8BWQv0le4aEDd/TR4Od3QPxcdSrMlMlP5yVgnGUIo8sckCk3FyDLLAsAYEaP/mkcv+XLakIsMRzzjdSwPD/rHUD+okVGMeJS+VsEM2XJ2JAdvuVQSAHCE28cn1hxL/LyFQao7czu1OYyIL7U/DqF9vMYlX73l9yAZZtzQ/Ud3AdNV1u6KOjhb/LmUi1d6Qqxk+gdVWQWvOZ4dnSmoqSfXNOK8ttjW9B3UAvPI+J1XdpfUU25fOQpXDSBGItLplAb3lXznZ--n9ADRBns2A6Jr71L--BNFYCuyfZ3vOZWkxifhuFw==" autocomplete="off" type="hidden" name="context" id="context" />
                      <input value="9" autocomplete="off" type="hidden" name="association_id" id="association_id" />
                      <button name="button" type="submit" class="flex items-center w-full h-full">
                        <span id="lui-token_7821441232" class="lui-token locked lui-entity-token lui-entity-token-general" style="color: #212529; background-color: #F8F9FA;">
                          <span class="lui-token__text">ground</span>
                          <div class="lui-token__actions">
                          </div>
                        </span>
                      </button></form>
                  </div>
                  <div class="lui-association-overlay__results__cell lui-association-overlay__results__cell--missing" data-model-association-overlay-target="result" data-label="flying" id="types_pokemon_1__missing_type_10">
                    <form class="flex items-center h-full w-full" action="/loopos_ui/associations" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="19zNClUI6vFOWuBBlApTJFWMekh7M6perNe8BtkT2hqtJUHVGTG8G7tsQY8fWxqR3QNztRO8fg3zg5BU9taQbg" autocomplete="off" />
                      <input value="njvqODwxo/kMGIS2uAYYJih/dhOFNM2fzRF/q42W9+1kqhmI1kDrhqSBsIprswbPN+RGm4VPdqkfAC2M/ktWANLZtTfrsazGVQ9RqmyRtM25a/Jvqd65nfCa/8V1j+BwWuwjdizfV3lv4KQVxoHTYtTYhonOZqlAgRQyqg6oPXc86BRxmPC61AKnsBQ56clRm5m03wVQ2Yd6kWz4O6G37bTXhCH+JGH0OEgjbdYPuyP/E2SRQpf2DKXtCPTS2dx2bKxRMmXxhrsFzOU7VeC7J/4PGCVphVHzhziJZm+EN5efyv7f0iKuP1tFv3napkWB3FqvglxZPZgsBRvoiGcIb6imDvolA9G82eS+IORwOS+FjN+ZyJBYfMpKE9klYIjUq1MzTx4jyHw0kehm0arvTpTXrhRqwkFOpf+6RSXbhledvca8RehEjEvOmHjc4nQTN6WNQUeVq2cmPnKROSTnzpuisM3ajKghA7bE1O+ndwdkZ2oN2drEQaCBNZg1CQCFNc675PUj3VYfenuNeyq27VIcs/GsRkdaB5yyBCCNbPimgjZv/PC/7Bb31t1lwkvq515T99gpGxi5QXv62AlK41Nd7Mm+uHvCLZtAXDrPyvCxlzjcX85U303FkovK44oKVOidRPitW+XlvQkoVX0HbhqER/zaAUjpLGTiTsyVHkis94I8fD37SPEQyGJ32CRA1qVFsT5/+Ll66J6AHHyB7Td5mUC1XRT5LGrSUJnZ058IqE6HaehxFs83SpBRi2RI9lPumSJyK4GBLNl68tHNwDyy5CEFTWV9V+ZvMqCpTgYZAhv9ERRuI1KLAb8BWQv0le4aEDd/TR4Od3QPxcdSrMlMlP5yVgnGUIo8sckCk3FyDLLAsAYEaP/mkcv+XLakIsMRzzjdSwPD/rHUD+okVGMeJS+VsEM2XJ2JAdvuVQSAHCE28cn1hxL/LyFQao7czu1OYyIL7U/DqF9vMYlX73l9yAZZtzQ/Ud3AdNV1u6KOjhb/LmUi1d6Qqxk+gdVWQWvOZ4dnSmoqSfXNOK8ttjW9B3UAvPI+J1XdpfUU25fOQpXDSBGItLplAb3lXznZ--n9ADRBns2A6Jr71L--BNFYCuyfZ3vOZWkxifhuFw==" autocomplete="off" type="hidden" name="context" id="context" />
                      <input value="10" autocomplete="off" type="hidden" name="association_id" id="association_id" />
                      <button name="button" type="submit" class="flex items-center w-full h-full">
                        <span id="lui-token_2902670536" class="lui-token locked lui-entity-token lui-entity-token-general" style="color: #212529; background-color: #F8F9FA;">
                          <span class="lui-token__text">flying</span>
                          <div class="lui-token__actions">
                          </div>
                        </span>
                      </button></form>
                  </div>
                  <div class="lui-association-overlay__results__cell lui-association-overlay__results__cell--missing" data-model-association-overlay-target="result" data-label="psychic" id="types_pokemon_1__missing_type_11">
                    <form class="flex items-center h-full w-full" action="/loopos_ui/associations" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="l1FAhzhifMvRr8ziWAYGNVY0SPnavxLT6tevDF4jDv_tqMxYdFsqISSZbSzTV0-A3rtBBLIwxoC1g4NeceZEiw" autocomplete="off" />
                      <input value="njvqODwxo/kMGIS2uAYYJih/dhOFNM2fzRF/q42W9+1kqhmI1kDrhqSBsIprswbPN+RGm4VPdqkfAC2M/ktWANLZtTfrsazGVQ9RqmyRtM25a/Jvqd65nfCa/8V1j+BwWuwjdizfV3lv4KQVxoHTYtTYhonOZqlAgRQyqg6oPXc86BRxmPC61AKnsBQ56clRm5m03wVQ2Yd6kWz4O6G37bTXhCH+JGH0OEgjbdYPuyP/E2SRQpf2DKXtCPTS2dx2bKxRMmXxhrsFzOU7VeC7J/4PGCVphVHzhziJZm+EN5efyv7f0iKuP1tFv3napkWB3FqvglxZPZgsBRvoiGcIb6imDvolA9G82eS+IORwOS+FjN+ZyJBYfMpKE9klYIjUq1MzTx4jyHw0kehm0arvTpTXrhRqwkFOpf+6RSXbhledvca8RehEjEvOmHjc4nQTN6WNQUeVq2cmPnKROSTnzpuisM3ajKghA7bE1O+ndwdkZ2oN2drEQaCBNZg1CQCFNc675PUj3VYfenuNeyq27VIcs/GsRkdaB5yyBCCNbPimgjZv/PC/7Bb31t1lwkvq515T99gpGxi5QXv62AlK41Nd7Mm+uHvCLZtAXDrPyvCxlzjcX85U303FkovK44oKVOidRPitW+XlvQkoVX0HbhqER/zaAUjpLGTiTsyVHkis94I8fD37SPEQyGJ32CRA1qVFsT5/+Ll66J6AHHyB7Td5mUC1XRT5LGrSUJnZ058IqE6HaehxFs83SpBRi2RI9lPumSJyK4GBLNl68tHNwDyy5CEFTWV9V+ZvMqCpTgYZAhv9ERRuI1KLAb8BWQv0le4aEDd/TR4Od3QPxcdSrMlMlP5yVgnGUIo8sckCk3FyDLLAsAYEaP/mkcv+XLakIsMRzzjdSwPD/rHUD+okVGMeJS+VsEM2XJ2JAdvuVQSAHCE28cn1hxL/LyFQao7czu1OYyIL7U/DqF9vMYlX73l9yAZZtzQ/Ud3AdNV1u6KOjhb/LmUi1d6Qqxk+gdVWQWvOZ4dnSmoqSfXNOK8ttjW9B3UAvPI+J1XdpfUU25fOQpXDSBGItLplAb3lXznZ--n9ADRBns2A6Jr71L--BNFYCuyfZ3vOZWkxifhuFw==" autocomplete="off" type="hidden" name="context" id="context" />
                      <input value="11" autocomplete="off" type="hidden" name="association_id" id="association_id" />
                      <button name="button" type="submit" class="flex items-center w-full h-full">
                        <span id="lui-token_1475808767" class="lui-token locked lui-entity-token lui-entity-token-general" style="color: #212529; background-color: #F8F9FA;">
                          <span class="lui-token__text">psychic</span>
                          <div class="lui-token__actions">
                          </div>
                        </span>
                      </button></form>
                  </div>
                  <div class="lui-association-overlay__results__cell lui-association-overlay__results__cell--missing" data-model-association-overlay-target="result" data-label="bug" id="types_pokemon_1__missing_type_12">
                    <form class="flex items-center h-full w-full" action="/loopos_ui/associations" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="tsqHbYlAmToUbWUrK4M51fYBFUXADFqLt5HUPL2pf0_MMwuyxXnP0OFbxOWg0nBgfo4cuKiDjtjoxfhukmw1Ow" autocomplete="off" />
                      <input value="njvqODwxo/kMGIS2uAYYJih/dhOFNM2fzRF/q42W9+1kqhmI1kDrhqSBsIprswbPN+RGm4VPdqkfAC2M/ktWANLZtTfrsazGVQ9RqmyRtM25a/Jvqd65nfCa/8V1j+BwWuwjdizfV3lv4KQVxoHTYtTYhonOZqlAgRQyqg6oPXc86BRxmPC61AKnsBQ56clRm5m03wVQ2Yd6kWz4O6G37bTXhCH+JGH0OEgjbdYPuyP/E2SRQpf2DKXtCPTS2dx2bKxRMmXxhrsFzOU7VeC7J/4PGCVphVHzhziJZm+EN5efyv7f0iKuP1tFv3napkWB3FqvglxZPZgsBRvoiGcIb6imDvolA9G82eS+IORwOS+FjN+ZyJBYfMpKE9klYIjUq1MzTx4jyHw0kehm0arvTpTXrhRqwkFOpf+6RSXbhledvca8RehEjEvOmHjc4nQTN6WNQUeVq2cmPnKROSTnzpuisM3ajKghA7bE1O+ndwdkZ2oN2drEQaCBNZg1CQCFNc675PUj3VYfenuNeyq27VIcs/GsRkdaB5yyBCCNbPimgjZv/PC/7Bb31t1lwkvq515T99gpGxi5QXv62AlK41Nd7Mm+uHvCLZtAXDrPyvCxlzjcX85U303FkovK44oKVOidRPitW+XlvQkoVX0HbhqER/zaAUjpLGTiTsyVHkis94I8fD37SPEQyGJ32CRA1qVFsT5/+Ll66J6AHHyB7Td5mUC1XRT5LGrSUJnZ058IqE6HaehxFs83SpBRi2RI9lPumSJyK4GBLNl68tHNwDyy5CEFTWV9V+ZvMqCpTgYZAhv9ERRuI1KLAb8BWQv0le4aEDd/TR4Od3QPxcdSrMlMlP5yVgnGUIo8sckCk3FyDLLAsAYEaP/mkcv+XLakIsMRzzjdSwPD/rHUD+okVGMeJS+VsEM2XJ2JAdvuVQSAHCE28cn1hxL/LyFQao7czu1OYyIL7U/DqF9vMYlX73l9yAZZtzQ/Ud3AdNV1u6KOjhb/LmUi1d6Qqxk+gdVWQWvOZ4dnSmoqSfXNOK8ttjW9B3UAvPI+J1XdpfUU25fOQpXDSBGItLplAb3lXznZ--n9ADRBns2A6Jr71L--BNFYCuyfZ3vOZWkxifhuFw==" autocomplete="off" type="hidden" name="context" id="context" />
                      <input value="12" autocomplete="off" type="hidden" name="association_id" id="association_id" />
                      <button name="button" type="submit" class="flex items-center w-full h-full">
                        <span id="lui-token_1514812509" class="lui-token locked lui-entity-token lui-entity-token-general" style="color: #212529; background-color: #F8F9FA;">
                          <span class="lui-token__text">bug</span>
                          <div class="lui-token__actions">
                          </div>
                        </span>
                      </button></form>
                  </div>
                  <div class="lui-association-overlay__results__cell lui-association-overlay__results__cell--missing" data-model-association-overlay-target="result" data-label="rock" id="types_pokemon_1__missing_type_13">
                    <form class="flex items-center h-full w-full" action="/loopos_ui/associations" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="n_VGQdHfAiTE_Gl6Rr6y7CqwicrijDDRn1ye_9k2lm7lDMqeneZUzjHKyLTN7_tZoj-AN4oD5ILACLKt9vPcGg" autocomplete="off" />
                      <input value="njvqODwxo/kMGIS2uAYYJih/dhOFNM2fzRF/q42W9+1kqhmI1kDrhqSBsIprswbPN+RGm4VPdqkfAC2M/ktWANLZtTfrsazGVQ9RqmyRtM25a/Jvqd65nfCa/8V1j+BwWuwjdizfV3lv4KQVxoHTYtTYhonOZqlAgRQyqg6oPXc86BRxmPC61AKnsBQ56clRm5m03wVQ2Yd6kWz4O6G37bTXhCH+JGH0OEgjbdYPuyP/E2SRQpf2DKXtCPTS2dx2bKxRMmXxhrsFzOU7VeC7J/4PGCVphVHzhziJZm+EN5efyv7f0iKuP1tFv3napkWB3FqvglxZPZgsBRvoiGcIb6imDvolA9G82eS+IORwOS+FjN+ZyJBYfMpKE9klYIjUq1MzTx4jyHw0kehm0arvTpTXrhRqwkFOpf+6RSXbhledvca8RehEjEvOmHjc4nQTN6WNQUeVq2cmPnKROSTnzpuisM3ajKghA7bE1O+ndwdkZ2oN2drEQaCBNZg1CQCFNc675PUj3VYfenuNeyq27VIcs/GsRkdaB5yyBCCNbPimgjZv/PC/7Bb31t1lwkvq515T99gpGxi5QXv62AlK41Nd7Mm+uHvCLZtAXDrPyvCxlzjcX85U303FkovK44oKVOidRPitW+XlvQkoVX0HbhqER/zaAUjpLGTiTsyVHkis94I8fD37SPEQyGJ32CRA1qVFsT5/+Ll66J6AHHyB7Td5mUC1XRT5LGrSUJnZ058IqE6HaehxFs83SpBRi2RI9lPumSJyK4GBLNl68tHNwDyy5CEFTWV9V+ZvMqCpTgYZAhv9ERRuI1KLAb8BWQv0le4aEDd/TR4Od3QPxcdSrMlMlP5yVgnGUIo8sckCk3FyDLLAsAYEaP/mkcv+XLakIsMRzzjdSwPD/rHUD+okVGMeJS+VsEM2XJ2JAdvuVQSAHCE28cn1hxL/LyFQao7czu1OYyIL7U/DqF9vMYlX73l9yAZZtzQ/Ud3AdNV1u6KOjhb/LmUi1d6Qqxk+gdVWQWvOZ4dnSmoqSfXNOK8ttjW9B3UAvPI+J1XdpfUU25fOQpXDSBGItLplAb3lXznZ--n9ADRBns2A6Jr71L--BNFYCuyfZ3vOZWkxifhuFw==" autocomplete="off" type="hidden" name="context" id="context" />
                      <input value="13" autocomplete="off" type="hidden" name="association_id" id="association_id" />
                      <button name="button" type="submit" class="flex items-center w-full h-full">
                        <span id="lui-token_9508286743" class="lui-token locked lui-entity-token lui-entity-token-general" style="color: #212529; background-color: #F8F9FA;">
                          <span class="lui-token__text">rock</span>
                          <div class="lui-token__actions">
                          </div>
                        </span>
                      </button></form>
                  </div>
                  <div class="lui-association-overlay__results__cell lui-association-overlay__results__cell--missing" data-model-association-overlay-target="result" data-label="ghost" id="types_pokemon_1__missing_type_14">
                    <form class="flex items-center h-full w-full" action="/loopos_ui/associations" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="UypC70wHje5EuUqz2PpYRrG8dzvQw1Ej37jsstylJp4p084wAD7bBLGP631TqxHzOTN-xrhMhXCA7MDg82Bs6g" autocomplete="off" />
                      <input value="njvqODwxo/kMGIS2uAYYJih/dhOFNM2fzRF/q42W9+1kqhmI1kDrhqSBsIprswbPN+RGm4VPdqkfAC2M/ktWANLZtTfrsazGVQ9RqmyRtM25a/Jvqd65nfCa/8V1j+BwWuwjdizfV3lv4KQVxoHTYtTYhonOZqlAgRQyqg6oPXc86BRxmPC61AKnsBQ56clRm5m03wVQ2Yd6kWz4O6G37bTXhCH+JGH0OEgjbdYPuyP/E2SRQpf2DKXtCPTS2dx2bKxRMmXxhrsFzOU7VeC7J/4PGCVphVHzhziJZm+EN5efyv7f0iKuP1tFv3napkWB3FqvglxZPZgsBRvoiGcIb6imDvolA9G82eS+IORwOS+FjN+ZyJBYfMpKE9klYIjUq1MzTx4jyHw0kehm0arvTpTXrhRqwkFOpf+6RSXbhledvca8RehEjEvOmHjc4nQTN6WNQUeVq2cmPnKROSTnzpuisM3ajKghA7bE1O+ndwdkZ2oN2drEQaCBNZg1CQCFNc675PUj3VYfenuNeyq27VIcs/GsRkdaB5yyBCCNbPimgjZv/PC/7Bb31t1lwkvq515T99gpGxi5QXv62AlK41Nd7Mm+uHvCLZtAXDrPyvCxlzjcX85U303FkovK44oKVOidRPitW+XlvQkoVX0HbhqER/zaAUjpLGTiTsyVHkis94I8fD37SPEQyGJ32CRA1qVFsT5/+Ll66J6AHHyB7Td5mUC1XRT5LGrSUJnZ058IqE6HaehxFs83SpBRi2RI9lPumSJyK4GBLNl68tHNwDyy5CEFTWV9V+ZvMqCpTgYZAhv9ERRuI1KLAb8BWQv0le4aEDd/TR4Od3QPxcdSrMlMlP5yVgnGUIo8sckCk3FyDLLAsAYEaP/mkcv+XLakIsMRzzjdSwPD/rHUD+okVGMeJS+VsEM2XJ2JAdvuVQSAHCE28cn1hxL/LyFQao7czu1OYyIL7U/DqF9vMYlX73l9yAZZtzQ/Ud3AdNV1u6KOjhb/LmUi1d6Qqxk+gdVWQWvOZ4dnSmoqSfXNOK8ttjW9B3UAvPI+J1XdpfUU25fOQpXDSBGItLplAb3lXznZ--n9ADRBns2A6Jr71L--BNFYCuyfZ3vOZWkxifhuFw==" autocomplete="off" type="hidden" name="context" id="context" />
                      <input value="14" autocomplete="off" type="hidden" name="association_id" id="association_id" />
                      <button name="button" type="submit" class="flex items-center w-full h-full">
                        <span id="lui-token_5362092628" class="lui-token locked lui-entity-token lui-entity-token-general" style="color: #212529; background-color: #F8F9FA;">
                          <span class="lui-token__text">ghost</span>
                          <div class="lui-token__actions">
                          </div>
                        </span>
                      </button></form>
                  </div>
                  <div class="lui-association-overlay__results__cell lui-association-overlay__results__cell--missing" data-model-association-overlay-target="result" data-label="dragon" id="types_pokemon_1__missing_type_15">
                    <form class="flex items-center h-full w-full" action="/loopos_ui/associations" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="9VEt1-gG9s4t5I8QT5xgToG6EvcfA3HJ15dNhzq6iQ-PqKEIpD-gJNjSLt7EzSn7CTUbCneMpZqIw2HVFX_Dew" autocomplete="off" />
                      <input value="njvqODwxo/kMGIS2uAYYJih/dhOFNM2fzRF/q42W9+1kqhmI1kDrhqSBsIprswbPN+RGm4VPdqkfAC2M/ktWANLZtTfrsazGVQ9RqmyRtM25a/Jvqd65nfCa/8V1j+BwWuwjdizfV3lv4KQVxoHTYtTYhonOZqlAgRQyqg6oPXc86BRxmPC61AKnsBQ56clRm5m03wVQ2Yd6kWz4O6G37bTXhCH+JGH0OEgjbdYPuyP/E2SRQpf2DKXtCPTS2dx2bKxRMmXxhrsFzOU7VeC7J/4PGCVphVHzhziJZm+EN5efyv7f0iKuP1tFv3napkWB3FqvglxZPZgsBRvoiGcIb6imDvolA9G82eS+IORwOS+FjN+ZyJBYfMpKE9klYIjUq1MzTx4jyHw0kehm0arvTpTXrhRqwkFOpf+6RSXbhledvca8RehEjEvOmHjc4nQTN6WNQUeVq2cmPnKROSTnzpuisM3ajKghA7bE1O+ndwdkZ2oN2drEQaCBNZg1CQCFNc675PUj3VYfenuNeyq27VIcs/GsRkdaB5yyBCCNbPimgjZv/PC/7Bb31t1lwkvq515T99gpGxi5QXv62AlK41Nd7Mm+uHvCLZtAXDrPyvCxlzjcX85U303FkovK44oKVOidRPitW+XlvQkoVX0HbhqER/zaAUjpLGTiTsyVHkis94I8fD37SPEQyGJ32CRA1qVFsT5/+Ll66J6AHHyB7Td5mUC1XRT5LGrSUJnZ058IqE6HaehxFs83SpBRi2RI9lPumSJyK4GBLNl68tHNwDyy5CEFTWV9V+ZvMqCpTgYZAhv9ERRuI1KLAb8BWQv0le4aEDd/TR4Od3QPxcdSrMlMlP5yVgnGUIo8sckCk3FyDLLAsAYEaP/mkcv+XLakIsMRzzjdSwPD/rHUD+okVGMeJS+VsEM2XJ2JAdvuVQSAHCE28cn1hxL/LyFQao7czu1OYyIL7U/DqF9vMYlX73l9yAZZtzQ/Ud3AdNV1u6KOjhb/LmUi1d6Qqxk+gdVWQWvOZ4dnSmoqSfXNOK8ttjW9B3UAvPI+J1XdpfUU25fOQpXDSBGItLplAb3lXznZ--n9ADRBns2A6Jr71L--BNFYCuyfZ3vOZWkxifhuFw==" autocomplete="off" type="hidden" name="context" id="context" />
                      <input value="15" autocomplete="off" type="hidden" name="association_id" id="association_id" />
                      <button name="button" type="submit" class="flex items-center w-full h-full">
                        <span id="lui-token_65226010" class="lui-token locked lui-entity-token lui-entity-token-general" style="color: #212529; background-color: #F8F9FA;">
                          <span class="lui-token__text">dragon</span>
                          <div class="lui-token__actions">
                          </div>
                        </span>
                      </button></form>
                  </div>
                  <div class="lui-association-overlay__results__cell lui-association-overlay__results__cell--missing" data-model-association-overlay-target="result" data-label="dark" id="types_pokemon_1__missing_type_16">
                    <form class="flex items-center h-full w-full" action="/loopos_ui/associations" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="EPt-fznkpp_mODeE9CpRatJk4o_xB2xcvVj_Z-5o4cpqAvKgdd3wdRMOlkp_exjfWuvrcpmIuA_iDNM1wa2rvg" autocomplete="off" />
                      <input value="njvqODwxo/kMGIS2uAYYJih/dhOFNM2fzRF/q42W9+1kqhmI1kDrhqSBsIprswbPN+RGm4VPdqkfAC2M/ktWANLZtTfrsazGVQ9RqmyRtM25a/Jvqd65nfCa/8V1j+BwWuwjdizfV3lv4KQVxoHTYtTYhonOZqlAgRQyqg6oPXc86BRxmPC61AKnsBQ56clRm5m03wVQ2Yd6kWz4O6G37bTXhCH+JGH0OEgjbdYPuyP/E2SRQpf2DKXtCPTS2dx2bKxRMmXxhrsFzOU7VeC7J/4PGCVphVHzhziJZm+EN5efyv7f0iKuP1tFv3napkWB3FqvglxZPZgsBRvoiGcIb6imDvolA9G82eS+IORwOS+FjN+ZyJBYfMpKE9klYIjUq1MzTx4jyHw0kehm0arvTpTXrhRqwkFOpf+6RSXbhledvca8RehEjEvOmHjc4nQTN6WNQUeVq2cmPnKROSTnzpuisM3ajKghA7bE1O+ndwdkZ2oN2drEQaCBNZg1CQCFNc675PUj3VYfenuNeyq27VIcs/GsRkdaB5yyBCCNbPimgjZv/PC/7Bb31t1lwkvq515T99gpGxi5QXv62AlK41Nd7Mm+uHvCLZtAXDrPyvCxlzjcX85U303FkovK44oKVOidRPitW+XlvQkoVX0HbhqER/zaAUjpLGTiTsyVHkis94I8fD37SPEQyGJ32CRA1qVFsT5/+Ll66J6AHHyB7Td5mUC1XRT5LGrSUJnZ058IqE6HaehxFs83SpBRi2RI9lPumSJyK4GBLNl68tHNwDyy5CEFTWV9V+ZvMqCpTgYZAhv9ERRuI1KLAb8BWQv0le4aEDd/TR4Od3QPxcdSrMlMlP5yVgnGUIo8sckCk3FyDLLAsAYEaP/mkcv+XLakIsMRzzjdSwPD/rHUD+okVGMeJS+VsEM2XJ2JAdvuVQSAHCE28cn1hxL/LyFQao7czu1OYyIL7U/DqF9vMYlX73l9yAZZtzQ/Ud3AdNV1u6KOjhb/LmUi1d6Qqxk+gdVWQWvOZ4dnSmoqSfXNOK8ttjW9B3UAvPI+J1XdpfUU25fOQpXDSBGItLplAb3lXznZ--n9ADRBns2A6Jr71L--BNFYCuyfZ3vOZWkxifhuFw==" autocomplete="off" type="hidden" name="context" id="context" />
                      <input value="16" autocomplete="off" type="hidden" name="association_id" id="association_id" />
                      <button name="button" type="submit" class="flex items-center w-full h-full">
                        <span id="lui-token_3805063338" class="lui-token locked lui-entity-token lui-entity-token-general" style="color: #212529; background-color: #F8F9FA;">
                          <span class="lui-token__text">dark</span>
                          <div class="lui-token__actions">
                          </div>
                        </span>
                      </button></form>
                  </div>
                  <div class="lui-association-overlay__results__cell lui-association-overlay__results__cell--missing" data-model-association-overlay-target="result" data-label="steel" id="types_pokemon_1__missing_type_17">
                    <form class="flex items-center h-full w-full" action="/loopos_ui/associations" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="oS5ReGo-ZgqI-N-m2J8ksfK2q5QG_TVMnr-2kLA6Gvvb192nJgcw4H3OfmhTzm0EejmiaW5y4R_B65rCn_9Qjw" autocomplete="off" />
                      <input value="njvqODwxo/kMGIS2uAYYJih/dhOFNM2fzRF/q42W9+1kqhmI1kDrhqSBsIprswbPN+RGm4VPdqkfAC2M/ktWANLZtTfrsazGVQ9RqmyRtM25a/Jvqd65nfCa/8V1j+BwWuwjdizfV3lv4KQVxoHTYtTYhonOZqlAgRQyqg6oPXc86BRxmPC61AKnsBQ56clRm5m03wVQ2Yd6kWz4O6G37bTXhCH+JGH0OEgjbdYPuyP/E2SRQpf2DKXtCPTS2dx2bKxRMmXxhrsFzOU7VeC7J/4PGCVphVHzhziJZm+EN5efyv7f0iKuP1tFv3napkWB3FqvglxZPZgsBRvoiGcIb6imDvolA9G82eS+IORwOS+FjN+ZyJBYfMpKE9klYIjUq1MzTx4jyHw0kehm0arvTpTXrhRqwkFOpf+6RSXbhledvca8RehEjEvOmHjc4nQTN6WNQUeVq2cmPnKROSTnzpuisM3ajKghA7bE1O+ndwdkZ2oN2drEQaCBNZg1CQCFNc675PUj3VYfenuNeyq27VIcs/GsRkdaB5yyBCCNbPimgjZv/PC/7Bb31t1lwkvq515T99gpGxi5QXv62AlK41Nd7Mm+uHvCLZtAXDrPyvCxlzjcX85U303FkovK44oKVOidRPitW+XlvQkoVX0HbhqER/zaAUjpLGTiTsyVHkis94I8fD37SPEQyGJ32CRA1qVFsT5/+Ll66J6AHHyB7Td5mUC1XRT5LGrSUJnZ058IqE6HaehxFs83SpBRi2RI9lPumSJyK4GBLNl68tHNwDyy5CEFTWV9V+ZvMqCpTgYZAhv9ERRuI1KLAb8BWQv0le4aEDd/TR4Od3QPxcdSrMlMlP5yVgnGUIo8sckCk3FyDLLAsAYEaP/mkcv+XLakIsMRzzjdSwPD/rHUD+okVGMeJS+VsEM2XJ2JAdvuVQSAHCE28cn1hxL/LyFQao7czu1OYyIL7U/DqF9vMYlX73l9yAZZtzQ/Ud3AdNV1u6KOjhb/LmUi1d6Qqxk+gdVWQWvOZ4dnSmoqSfXNOK8ttjW9B3UAvPI+J1XdpfUU25fOQpXDSBGItLplAb3lXznZ--n9ADRBns2A6Jr71L--BNFYCuyfZ3vOZWkxifhuFw==" autocomplete="off" type="hidden" name="context" id="context" />
                      <input value="17" autocomplete="off" type="hidden" name="association_id" id="association_id" />
                      <button name="button" type="submit" class="flex items-center w-full h-full">
                        <span id="lui-token_2807543204" class="lui-token locked lui-entity-token lui-entity-token-general" style="color: #212529; background-color: #F8F9FA;">
                          <span class="lui-token__text">steel</span>
                          <div class="lui-token__actions">
                          </div>
                        </span>
                      </button></form>
                  </div>
                  <div class="lui-association-overlay__results__cell lui-association-overlay__results__cell--missing" data-model-association-overlay-target="result" data-label="fairy" id="types_pokemon_1__missing_type_18">
                    <form class="flex items-center h-full w-full" action="/loopos_ui/associations" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="WB4cNl4KZhX_FzsnrCByqlpmtU0S53LVcTb_OdSS9lMi55DpEjMw_wohmukncTsf0um8sHpopoYuYtNr-1e8Jw" autocomplete="off" />
                      <input value="njvqODwxo/kMGIS2uAYYJih/dhOFNM2fzRF/q42W9+1kqhmI1kDrhqSBsIprswbPN+RGm4VPdqkfAC2M/ktWANLZtTfrsazGVQ9RqmyRtM25a/Jvqd65nfCa/8V1j+BwWuwjdizfV3lv4KQVxoHTYtTYhonOZqlAgRQyqg6oPXc86BRxmPC61AKnsBQ56clRm5m03wVQ2Yd6kWz4O6G37bTXhCH+JGH0OEgjbdYPuyP/E2SRQpf2DKXtCPTS2dx2bKxRMmXxhrsFzOU7VeC7J/4PGCVphVHzhziJZm+EN5efyv7f0iKuP1tFv3napkWB3FqvglxZPZgsBRvoiGcIb6imDvolA9G82eS+IORwOS+FjN+ZyJBYfMpKE9klYIjUq1MzTx4jyHw0kehm0arvTpTXrhRqwkFOpf+6RSXbhledvca8RehEjEvOmHjc4nQTN6WNQUeVq2cmPnKROSTnzpuisM3ajKghA7bE1O+ndwdkZ2oN2drEQaCBNZg1CQCFNc675PUj3VYfenuNeyq27VIcs/GsRkdaB5yyBCCNbPimgjZv/PC/7Bb31t1lwkvq515T99gpGxi5QXv62AlK41Nd7Mm+uHvCLZtAXDrPyvCxlzjcX85U303FkovK44oKVOidRPitW+XlvQkoVX0HbhqER/zaAUjpLGTiTsyVHkis94I8fD37SPEQyGJ32CRA1qVFsT5/+Ll66J6AHHyB7Td5mUC1XRT5LGrSUJnZ058IqE6HaehxFs83SpBRi2RI9lPumSJyK4GBLNl68tHNwDyy5CEFTWV9V+ZvMqCpTgYZAhv9ERRuI1KLAb8BWQv0le4aEDd/TR4Od3QPxcdSrMlMlP5yVgnGUIo8sckCk3FyDLLAsAYEaP/mkcv+XLakIsMRzzjdSwPD/rHUD+okVGMeJS+VsEM2XJ2JAdvuVQSAHCE28cn1hxL/LyFQao7czu1OYyIL7U/DqF9vMYlX73l9yAZZtzQ/Ud3AdNV1u6KOjhb/LmUi1d6Qqxk+gdVWQWvOZ4dnSmoqSfXNOK8ttjW9B3UAvPI+J1XdpfUU25fOQpXDSBGItLplAb3lXznZ--n9ADRBns2A6Jr71L--BNFYCuyfZ3vOZWkxifhuFw==" autocomplete="off" type="hidden" name="context" id="context" />
                      <input value="18" autocomplete="off" type="hidden" name="association_id" id="association_id" />
                      <button name="button" type="submit" class="flex items-center w-full h-full">
                        <span id="lui-token_9974911290" class="lui-token locked lui-entity-token lui-entity-token-general" style="color: #212529; background-color: #F8F9FA;">
                          <span class="lui-token__text">fairy</span>
                          <div class="lui-token__actions">
                          </div>
                        </span>
                      </button></form>
                  </div>
                  <div class="hidden! lui-association-overlay__results__cell" data-model-association-overlay-target="new" id="types_pokemon_1__new">
                    <div class="flex items-center w-full">
                      <div class="w-full">
                        <span id="lui-token_5215854990" class="lui-token  lui-entity-token lui-entity-token-general" style="color: #212529; background-color: #F8F9FA;" data-model-association-overlay-target="newLabelWrapper">
                          <span class="lui-token__text">%new%</span>
                          <div class="lui-token__actions">
                          </div>
                        </span>
                      </div>
                      <form class="flex items-center h-full w-full" action="/loopos_ui/associations" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="0GaRyW6Muk2TLizMk8jP4DGolM70GvAAxQTwo76TAXzRtvsjEF1exVi34OZGHc6ZBOklWW6OFMKwlAvqjuyWTQ" autocomplete="off" />
                        <input type="hidden" name="context" id="context" value="njvqODwxo/kMGIS2uAYYJih/dhOFNM2fzRF/q42W9+1kqhmI1kDrhqSBsIprswbPN+RGm4VPdqkfAC2M/ktWANLZtTfrsazGVQ9RqmyRtM25a/Jvqd65nfCa/8V1j+BwWuwjdizfV3lv4KQVxoHTYtTYhonOZqlAgRQyqg6oPXc86BRxmPC61AKnsBQ56clRm5m03wVQ2Yd6kWz4O6G37bTXhCH+JGH0OEgjbdYPuyP/E2SRQpf2DKXtCPTS2dx2bKxRMmXxhrsFzOU7VeC7J/4PGCVphVHzhziJZm+EN5efyv7f0iKuP1tFv3napkWB3FqvglxZPZgsBRvoiGcIb6imDvolA9G82eS+IORwOS+FjN+ZyJBYfMpKE9klYIjUq1MzTx4jyHw0kehm0arvTpTXrhRqwkFOpf+6RSXbhledvca8RehEjEvOmHjc4nQTN6WNQUeVq2cmPnKROSTnzpuisM3ajKghA7bE1O+ndwdkZ2oN2drEQaCBNZg1CQCFNc675PUj3VYfenuNeyq27VIcs/GsRkdaB5yyBCCNbPimgjZv/PC/7Bb31t1lwkvq515T99gpGxi5QXv62AlK41Nd7Mm+uHvCLZtAXDrPyvCxlzjcX85U303FkovK44oKVOidRPitW+XlvQkoVX0HbhqER/zaAUjpLGTiTsyVHkis94I8fD37SPEQyGJ32CRA1qVFsT5/+Ll66J6AHHyB7Td5mUC1XRT5LGrSUJnZ058IqE6HaehxFs83SpBRi2RI9lPumSJyK4GBLNl68tHNwDyy5CEFTWV9V+ZvMqCpTgYZAhv9ERRuI1KLAb8BWQv0le4aEDd/TR4Od3QPxcdSrMlMlP5yVgnGUIo8sckCk3FyDLLAsAYEaP/mkcv+XLakIsMRzzjdSwPD/rHUD+okVGMeJS+VsEM2XJ2JAdvuVQSAHCE28cn1hxL/LyFQao7czu1OYyIL7U/DqF9vMYlX73l9yAZZtzQ/Ud3AdNV1u6KOjhb/LmUi1d6Qqxk+gdVWQWvOZ4dnSmoqSfXNOK8ttjW9B3UAvPI+J1XdpfUU25fOQpXDSBGItLplAb3lXznZ--n9ADRBns2A6Jr71L--BNFYCuyfZ3vOZWkxifhuFw==" autocomplete="off" />
                        <input data-model-association-overlay-target="newInput" autocomplete="off" type="hidden" name="new_association[name]" id="new_association_name" />
                        <div class="flex w-full justify-end">
                          <button class="lui-button lui-button--neutral--tertiary lui-button--size-tiny w-fit w-fit" data-controller="lui--button" data-action="model-association-overlay#onResultsContainerChange">
                            <i class="lui-button__icon lui-button__icon--tiny fa-regular fa-plus" data-lui--button-target="leadingIcon"></i>
                            <span class="lui-button__text" data-lui--button-target="text">
                              Create New
                            </span>
                          </button>
                        </div>
                      </form>
  </div>
                  </div>
                  <div class="hidden lui-association-overlay__empty-search" data-model-association-overlay-target="emptySearch">No results found</div>
                </div>
              </div>
            </turbo-frame>
          </div>
        </div>
      </div>
    </div>
  </div>
</turbo-frame>

ModelAssociationList

Description

Used Components Components where is Used
Label

Usage rules

  • ✅ Do
  • ❌ Don't
1
2
3
4
5
6
7
<%= render LooposUi::ModelAssociationList.new(
  model: Pokemon.first,
  association: :types, draggable: true,
  component_class: LooposUi::Token,
  **preview_params
  ).with_add_button(text: "Add Option Value")
 %>

No notes provided.

Param Description Input

if true, case will be preserved. Otherwise, all entries will be downcased

if true, results will be shown. Otherwise, only selected tokens will be shown

if true, selected tokens will be shown. Otherwise, only results will be shown

Description

The LooposUi::ModelAssociationList component is used to render a list of associated models. Is a wrapper around the LooposUi::AssociationOverlay and LooposUi::TokenList components, meant to simplify the usage of these components.

It's arguments are passed down to the LooposUi::AssociationOverlay and LooposUi::TokenList components.

Arguments

Property Default Description
model nil The ActiveRecord model instance that owns the associations
association nil The name of the association to manage
association_scope nil A lambda function that can be used to scope the items that can be associated to the model. Should return an ActiveRecord::Relation
policy true An access configuration object. Check the options bellow.
component_class LooposUi::TagToken The component class used to render individual items. Supports LooposUi::Token, LooposUi::TagToken and subclasses of LooposUi::Entity. ⚠️ Only entities that have ICON constant defined are supported.
case_sensitive false A boolean that can be used to enable case sensitive search. Supports LooposUi::Token and LooposUi::TagToken. If false, will downcase all labels. Always true for LooposUi::Entity.
entangled_group nil Accepts any string/symbol. Any lists within the same entangled group will refresh if any other changes. Useful when you have two lists on the same page, whose values are dependent on each other (eg: Children and parent categories).
entity_argument_builder nil A class (inherited) that builds the arguments from the an instance of association to initialize the Entity. See example bellow. Automatically tries to guess the builder if the name of the entity class matches an existing builder.
component_class_args nil DEPRECATED 1.13 Use entity_argument_builder option instead. A callable that accepts one association entity and produces arguments for the initialization of component class. (ex: component_class_args: ->(user_group) { { url: admin_user_group_path(user_group) } })
draggable false Enables drag-and-drop reordering of the associated items in the list. When set to true, users can rearrange the order of the items by dragging them. It's the responsibility of the developer to catch the event (check ModelAssociationOverlay docs) and make a request to patch the order.
popover_args {} Options forwarded to the underlying LooposUi::Popover used by the list’s Add button. Common keys: position and anchor. See “Popover args” below.
show_selected true Boolean to show(true)/hide(false) the selected options
show_results true Boolean to show(true)/hide(false) the search results

The component will try to guess the correct Entity component_class from the association name, but you can override it if needed.

You can use entity_argument_builder to pass additional argument to the Entity component that the ModelAssociationOverlay will create. A real example explains it better:

<%# Somewhere in Core %>
<%= render LooposUi::ModelAssociationList.new(
    model: category,
    association: :parents,
    component_class: LooposUi::Entities::Category,
    entity_argument_builder: LooposUi::EntityArgumentBuilders::Category,
    entangled_group: :categories,
    association_scope: -> { valid_for_parents(category)}).with_add_button(text: "Add parent category")
%>

And then you can create the LooposUi::EntityArgumentBuilders::Category class:

module LooposUi
  module EntityArgumentBuilders
    class Category < Base
      # These will be used to build the arguments for the Entity component
      def args
          {
            url: item.presenter.show_path
          }
      end
    end
  end
end

You can create these classes using the rails g loopos_ui:entity_argument_builder NAME generator.

You can also use the builder to customize the detach policy (if the X button appears) per each item. To do so, override the can_detach?(policy_ruling) method. You have access to the instance variable item, this is a record (a model) of the association list. Returning a true value will enable the button, false will hide it, and returning policy_ruling will respect the policy decision.

Popover args

ModelAssociationList opens a ModelAssociationOverlay inside a Popover. You can tweak the popover via popover_args, which are forwarded to LooposUi::Popover (e.g. position, anchor).

  • position: Where the popover appears relative to the toggle (:top_left, :top_center, :top_right, :bottom_left, :bottom_center, :bottom_right).
  • anchor: Which corner/edge of the toggle is used as the anchor (:top_left, :top_right, :bottom_left, :bottom_right).

When placing the association list on the right side of the page, you typically want the popover to anchor from the toggle’s top-right corner to keep it inside the viewport. In that case pass:

<%= render LooposUi::ModelAssociationList.new(
  model: @category,
  association: :items,
  popover_args: {
    position: :bottom_left,
    anchor: :top_right
  }
).with_add_button(text: "Add item") %>

See the preview example “popover_args” for an interactive demo of position and anchor combinations.

Policy Option

Policies are a new concept in LoopOS UI. It's a way to control the permissions for the operations on the association. Currently, it's only used in this component, but it may be extended to other components in the future.

The policy option controls permissions for creating new items, attaching existing items, and detaching items from the association. It accepts three different formats:

Boolean Format

The simplest form - allows or denies all operations:

# Allow all operations
render LooposUi::ModelAssociationList.new(
  model: @category,
  association: :items,
  policy: true
)
# Deny all operations
render LooposUi::ModelAssociationList.new(
  model: @category,
  association: :items,
  policy: false
)

Hash Format

Provides granular control over each operation using boolean values or callable objects:

render LooposUi::ModelAssociationList.new(
  model: @category,
  association: :items,
  policy: {
    new?: true,                                 # Allow creating new items
    attach?: -> { current_user.can_attach? },   # Dynamic permission check
    detach?: false                              # Deny detaching items
  }
)

Object Interface Format

We recommend using Pundit for authorization. The component is designed to work seamlessly with Pundit policies:

# app/policies/category_policy.rb
class CategoryPolicy < ApplicationPolicy
  def new?
    user.admin?
  end
  def attach?
    user.can_manage_categories?
  end
  def detach?
    user.can_manage_categories?
  end
end
# app/views/categories/show.html.erb
render LooposUi::ModelAssociationList.new(
  model: @category,
  association: :items,
  policy: policy(@category)
)

Model Association List Operations

  • new: Permission to create new items
  • attach: Permission to attach existing items to the association
  • detach: Permission to remove items from the association

If no policy is provided, it defaults to true (all operations allowed).

Note: If all operations are denied (either through policy: false or all methods returning false), the component will be rendered in a read-only state (just a TokenList with the current items).

Slots

add_button(...) - A LooposUi::Button with default styles used to toggle the association overlay. You can override the button attributes. Note, this does not permit custom content. It looks more like a "simple" method.

Implementation Notes

The ModelAssociationList (and ModelAssociationOverlay) work in a similar fashion. In fact, the overlay is used inside the list.

Drag and Drop Monitoring

The ModelAssociationList component supports drag and drop functionality for reordering selected items when the draggable option is set to true. The drag and drop system is built using SortableJS and follows a comprehensive event-driven architecture.

How Drag Monitoring Works

1. Drag Controller Setup

The drag functionality is implemented through the DragController Stimulus controller (app/javascript/controllers/drag_controller.js):

// DragController initializes SortableJS on the container element
this.sortable = Sortable.create(this.element, {
  animation: 150,
  ghostClass: 'ghost',
  chosenClass: 'chosen', 
  dragClass: 'drag',
  forceFallback: true,
  handle: '.lui-token__drag-handle', // Only allow dragging via drag handle
  onEnd: (event) => {
    this.emitDragEndEvent(event)
  }
})

2. Drag Handle Implementation

Individual draggable tokens include a drag handle that users must click to initiate dragging:

<% if @draggable %>
  <div class="lui-token__drag-handle">
    <%= render LooposUi::Icon.new(icon: "fa-solid fa-grip-dots-vertical", size: "12") %>
  </div>
<% end %>

3. Event Flow Architecture

The drag monitoring follows this event flow:

  1. Drag Initiation: User clicks and drags the .lui-token__drag-handle element
  2. SortableJS Processing: SortableJS handles the visual feedback and reordering
  3. Drag End Event: When drag completes, DragController.emitDragEndEvent() is called
  4. Custom Event Dispatch: A drag:end custom event is dispatched with detailed information
  5. Event Propagation: The event bubbles up to parent components for processing

4. Drag End Event Details

The drag:end event includes comprehensive information about the drag operation:

const dragEndEvent = new CustomEvent('drag:end', {
  detail: {
    item: item,           // The dragged DOM element
    newIndex: newIndex,   // Final position in the list
    oldIndex: oldIndex,   // Original position in the list
    container: this.element // The sortable container
  },
  bubbles: true
})

You can use this event to check what element was ordered, the new and the old position, and make a request to the backend to update the state, for example.

Or, you could use the container, iterate on all the elements and bulk update the positions.

5. Event Listener Registration

Components that need to respond to drag events register listeners:

// In TagTokenController
connect() {
  this.element.addEventListener('drag:end', this.handleDragEnd.bind(this))
  this.element.addEventListener('popover:closed', this.handlePopoverClose.bind(this))
}
handleDragEnd(event) {
  const { item, newIndex, oldIndex, to, from, element } = event.detail
  // Store drag information for later processing
  this.lastDragInfo = {
    item, newIndex, oldIndex, to, from, element
  }
}

6. Container Structure

The drag functionality is applied at different levels:

  • TokenList Level: The main token list container has data-controller="drag" for main list reordering
  • Selected Container Level: The selected items container in the overlay also supports dragging
  • Individual Tokens: Each token can be made draggable with the draggable: true option

7. Integration with Popover Lifecycle

The drag system integrates with the popover lifecycle to ensure proper data persistence:

  1. User drags items within the selected container
  2. TagTokenController captures the drag information
  3. When popover closes, handlePopoverClose() is triggered
  4. A popover:closed-with-drag-info event is dispatched with the drag information
  5. Parent components can process the new order and persist changes

8. Visual Feedback

The drag system provides visual feedback through CSS classes:

  • ghost: Applied to the placeholder element during drag
  • chosen: Applied to the selected element being dragged
  • drag: Applied to the element being dragged
  • lui-token__drag-handle: The interactive drag handle element

9. Configuration Options

Drag behavior can be configured through the draggable option:

# Enable dragging for the entire list
render LooposUi::ModelAssociationList.new(
  model: @category,
  association: :items,
  draggable: true
)

10. Event Monitoring Best Practices

When implementing custom drag handling:

  1. Listen for drag:end events on the appropriate container
  2. Extract drag information from event.detail
  3. Store drag state if processing needs to be deferred
  4. Handle popover lifecycle by listening for popover:closed events
  5. Process new order and persist changes to the backend
  6. Update UI to reflect the new order

This comprehensive monitoring system ensures that drag and drop operations are properly tracked, processed, and persisted throughout the component lifecycle.

Select Container Sorting - The selected options from the popover that opens in the ModelAssociationList can be sorted via drag and drop. Both the drag and drop functionalities as well as the closing of the popover are being monitored by event listeners. An example of how to read the new sorting of a select container can be found in the example tag_token

Important concepts:

  • ItemFactory - This class generates the items that are displayed in the list. These items include de AttachedItem, MissingItem and NewItem. All these come with forms that will be submitted to the AssociationsController.
  • Context - Contains all the information needed to render the AttachedItem, MissingItem and List.