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
<h3 class="mb-4">
  ⚠️ You probably want the ModelAssociationList component. ⚠️ <br>
  Check the docs.
</h3>
<div data-controller="association-overlay-toggle" data-association-overlay-toggle-turbo-frame-value="some-frame">
  <turbo-frame id="some-frame">
    <div id="lui-token_list_5793709857" class="lui-token-list lui-token-list--horizontal"
    data-controller="token-list"
    data-token-list-frame-id-value="lui-token_list_5793709857_frame"
    data-token-list-model-association-overlay-outlet="#lui-token_list_5793709857 .lui-association-overlay">
      <turbo-frame class="lui-token-list__items" id="lui-token_list_5793709857_frame">
        <div data-controller="drag" class="lui-token-list__items">
          <span id="lui-token_9912568611" class="lui-token lui-entity-token lui-entity-token-general  " style="color: #212529; background-color: #F8F9FA;">
            <i class="lui-token__icon fa-regular fa-regular fa-grid"></i>
            <span class="lui-token__text">Grass</span>
            <div class="lui-token__actions">
            </div>
          </span>
          <span id="lui-token_2322156580" class="lui-token lui-entity-token lui-entity-token-general  " style="color: #212529; background-color: #F8F9FA;">
            <i class="lui-token__icon fa-regular fa-regular fa-grid"></i>
            <span class="lui-token__text">Poison</span>
            <div class="lui-token__actions">
            </div>
          </span>
        </div>
      </turbo-frame>          
      <div 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">
          <span 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>
        </button>  
        <div id="popover-a59b7c9362b43c89437a-target" popover="auto" 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-6efee10144c5cd040391" class="lui-association-overlay" data-controller="model-association-overlay" data-model-association-overlay-case-sensitive-value="true" data-model-association-overlay-show-results-value="true">
                <div class="lui-association-overlay__header">
                  <i class="fa-regular fa-grid"></i>
                  Category
                </div>
                <div class="lui-association-overlay__divider"></div>
                <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="Ds1I1_dMVGHKgim-qxyhhbTy2U-KOPnK_XY2rqZeVly4Q27p1hzoYh6Ma6jhHo9m2se9BqCzVTbDtyJV8CG8PQ" autocomplete="off" />
                        <input value="LDChiZGsBqbXVdNNEzicOwgxIraidUHF2d74ICAdrtdXZd/oTgN14+fHHKYGi5NmxDh1r0dKhAD6s3WGn5Nkykwqay8a+yVd9H3bIwoSQ+U28+swY98Y9v8csWtzrNqvnTh38PWM9ADtbAam9Hn7pfJWP3R25HtfEjVFTWGymOqJcBH5pWKcXZg/AKCax3fz/zViy1VqRBY1c/OmLny5AADXkFmqMUo+gOblBYlkbSDYvKIOqksb9QQyJJAnHKj/zwwmpcmRK+BW2eywlkIyBS47RaJiDc2SG5KwRFNgSA5daMYeCa+O8UK7vPE4G5akSytx4wBiCR59LAO6BlnNA5hnWHfXSMI7qX9y6AwoGsLRY8e7WiVgTdt6nifFuzclNO9Fab8dTfCBZFD5NdV1KsvBSYW0AGlDkxZ62j1D/j7Aujijjunnu9xFhqCxS5D/8CBLuDTJWwjbVuMgbtavHKyeXCU60E28AvBECfEh5+c/Y0nBvCzLxMvZaK0e41ATePlprfj+feeZx7JWIYjkArG7GHZroNPGDCssRzFCUHOxUbQFpmhrkKgmxE/QQ5MYzAmrv0sWOh3tmfZQeMHhfkPOp4aQGa2DV7Nr2ODMNEfS0GClzeojzAPJdbnthGqniAFjBKlIVAJvLhFOJi0qTkftt/HuReZqC+Bf+keR37gMPcw0Cp/w3w/Cs1FBz0x11+fXrpVKthzkqWGbEtwvKE/EzvVih5OJfN5f6KIwvNxgs+6M39ulJTdlanIw8rz5TED8u++tA2bgrftPmMFLUszs5MyNNmVjmhhpQhhM+Z1UBl/3PDAZd+j3AV3R8tZWGTBD0c7dg+4nhmd7FenDUDLS/5JOf25y62J00sp+iJneDqQK3tJutVtohjl/nKZdJ3CNAbo9pNTOx2afm41DnmZBSY1N5uXqcZCPbjv+UCkU76UtCILE0ZpPyTF6vhMZqSn2a7T1jCzmX7rysg/cMq/klggFqLX9KHbZMS2E9taXeTrHYY+F--x/CX2ZAyCoh1s4as--CKBsSzfNVDi27/Vk9YHtGg==" 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_9451751915" class="lui-token lui-entity-token lui-entity-token-general  " style="color: #212529; background-color: #F8F9FA;">
                          <i class="lui-token__icon fa-regular fa-regular fa-grid"></i>
                          <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>
                        </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="_b87fwCoLe88YanuguXnwo8Sffgiu6R11GUN_9kNfqBLMR1BIfiR7Ohv6_jI58kh4ScZsQgwCInqpBkEj3KUwQ" autocomplete="off" />
                        <input value="LDChiZGsBqbXVdNNEzicOwgxIraidUHF2d74ICAdrtdXZd/oTgN14+fHHKYGi5NmxDh1r0dKhAD6s3WGn5Nkykwqay8a+yVd9H3bIwoSQ+U28+swY98Y9v8csWtzrNqvnTh38PWM9ADtbAam9Hn7pfJWP3R25HtfEjVFTWGymOqJcBH5pWKcXZg/AKCax3fz/zViy1VqRBY1c/OmLny5AADXkFmqMUo+gOblBYlkbSDYvKIOqksb9QQyJJAnHKj/zwwmpcmRK+BW2eywlkIyBS47RaJiDc2SG5KwRFNgSA5daMYeCa+O8UK7vPE4G5akSytx4wBiCR59LAO6BlnNA5hnWHfXSMI7qX9y6AwoGsLRY8e7WiVgTdt6nifFuzclNO9Fab8dTfCBZFD5NdV1KsvBSYW0AGlDkxZ62j1D/j7Aujijjunnu9xFhqCxS5D/8CBLuDTJWwjbVuMgbtavHKyeXCU60E28AvBECfEh5+c/Y0nBvCzLxMvZaK0e41ATePlprfj+feeZx7JWIYjkArG7GHZroNPGDCssRzFCUHOxUbQFpmhrkKgmxE/QQ5MYzAmrv0sWOh3tmfZQeMHhfkPOp4aQGa2DV7Nr2ODMNEfS0GClzeojzAPJdbnthGqniAFjBKlIVAJvLhFOJi0qTkftt/HuReZqC+Bf+keR37gMPcw0Cp/w3w/Cs1FBz0x11+fXrpVKthzkqWGbEtwvKE/EzvVih5OJfN5f6KIwvNxgs+6M39ulJTdlanIw8rz5TED8u++tA2bgrftPmMFLUszs5MyNNmVjmhhpQhhM+Z1UBl/3PDAZd+j3AV3R8tZWGTBD0c7dg+4nhmd7FenDUDLS/5JOf25y62J00sp+iJneDqQK3tJutVtohjl/nKZdJ3CNAbo9pNTOx2afm41DnmZBSY1N5uXqcZCPbjv+UCkU76UtCILE0ZpPyTF6vhMZqSn2a7T1jCzmX7rysg/cMq/klggFqLX9KHbZMS2E9taXeTrHYY+F--x/CX2ZAyCoh1s4as--CKBsSzfNVDi27/Vk9YHtGg==" 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_5215854990" class="lui-token lui-entity-token lui-entity-token-general  " style="color: #212529; background-color: #F8F9FA;">
                          <i class="lui-token__icon fa-regular fa-regular fa-grid"></i>
                          <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>
                        </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="OG4ckDDkMDm0Ti4ore5VjRBio2WPxIQyVBYiEsAqzAVB25-IHmkFtYGwymYCrQAvaVDKcv8LW1vwT77MQ53DFQ" autocomplete="off" />
                      <input value="LDChiZGsBqbXVdNNEzicOwgxIraidUHF2d74ICAdrtdXZd/oTgN14+fHHKYGi5NmxDh1r0dKhAD6s3WGn5Nkykwqay8a+yVd9H3bIwoSQ+U28+swY98Y9v8csWtzrNqvnTh38PWM9ADtbAam9Hn7pfJWP3R25HtfEjVFTWGymOqJcBH5pWKcXZg/AKCax3fz/zViy1VqRBY1c/OmLny5AADXkFmqMUo+gOblBYlkbSDYvKIOqksb9QQyJJAnHKj/zwwmpcmRK+BW2eywlkIyBS47RaJiDc2SG5KwRFNgSA5daMYeCa+O8UK7vPE4G5akSytx4wBiCR59LAO6BlnNA5hnWHfXSMI7qX9y6AwoGsLRY8e7WiVgTdt6nifFuzclNO9Fab8dTfCBZFD5NdV1KsvBSYW0AGlDkxZ62j1D/j7Aujijjunnu9xFhqCxS5D/8CBLuDTJWwjbVuMgbtavHKyeXCU60E28AvBECfEh5+c/Y0nBvCzLxMvZaK0e41ATePlprfj+feeZx7JWIYjkArG7GHZroNPGDCssRzFCUHOxUbQFpmhrkKgmxE/QQ5MYzAmrv0sWOh3tmfZQeMHhfkPOp4aQGa2DV7Nr2ODMNEfS0GClzeojzAPJdbnthGqniAFjBKlIVAJvLhFOJi0qTkftt/HuReZqC+Bf+keR37gMPcw0Cp/w3w/Cs1FBz0x11+fXrpVKthzkqWGbEtwvKE/EzvVih5OJfN5f6KIwvNxgs+6M39ulJTdlanIw8rz5TED8u++tA2bgrftPmMFLUszs5MyNNmVjmhhpQhhM+Z1UBl/3PDAZd+j3AV3R8tZWGTBD0c7dg+4nhmd7FenDUDLS/5JOf25y62J00sp+iJneDqQK3tJutVtohjl/nKZdJ3CNAbo9pNTOx2afm41DnmZBSY1N5uXqcZCPbjv+UCkU76UtCILE0ZpPyTF6vhMZqSn2a7T1jCzmX7rysg/cMq/klggFqLX9KHbZMS2E9taXeTrHYY+F--x/CX2ZAyCoh1s4as--CKBsSzfNVDi27/Vk9YHtGg==" 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 lui-entity-token lui-entity-token-general  " style="color: #212529; background-color: #F8F9FA;">
                          <i class="lui-token__icon fa-regular fa-regular fa-grid"></i>
                          <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="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="Onogy8-9PoeIYB7BRjRlvhp7P-txS8DJjwRBn4dhY1BDz6PT4TALC72e-o_pdzAcY0lW_AGEH6ArXd1BBNZsQA" autocomplete="off" />
                      <input value="LDChiZGsBqbXVdNNEzicOwgxIraidUHF2d74ICAdrtdXZd/oTgN14+fHHKYGi5NmxDh1r0dKhAD6s3WGn5Nkykwqay8a+yVd9H3bIwoSQ+U28+swY98Y9v8csWtzrNqvnTh38PWM9ADtbAam9Hn7pfJWP3R25HtfEjVFTWGymOqJcBH5pWKcXZg/AKCax3fz/zViy1VqRBY1c/OmLny5AADXkFmqMUo+gOblBYlkbSDYvKIOqksb9QQyJJAnHKj/zwwmpcmRK+BW2eywlkIyBS47RaJiDc2SG5KwRFNgSA5daMYeCa+O8UK7vPE4G5akSytx4wBiCR59LAO6BlnNA5hnWHfXSMI7qX9y6AwoGsLRY8e7WiVgTdt6nifFuzclNO9Fab8dTfCBZFD5NdV1KsvBSYW0AGlDkxZ62j1D/j7Aujijjunnu9xFhqCxS5D/8CBLuDTJWwjbVuMgbtavHKyeXCU60E28AvBECfEh5+c/Y0nBvCzLxMvZaK0e41ATePlprfj+feeZx7JWIYjkArG7GHZroNPGDCssRzFCUHOxUbQFpmhrkKgmxE/QQ5MYzAmrv0sWOh3tmfZQeMHhfkPOp4aQGa2DV7Nr2ODMNEfS0GClzeojzAPJdbnthGqniAFjBKlIVAJvLhFOJi0qTkftt/HuReZqC+Bf+keR37gMPcw0Cp/w3w/Cs1FBz0x11+fXrpVKthzkqWGbEtwvKE/EzvVih5OJfN5f6KIwvNxgs+6M39ulJTdlanIw8rz5TED8u++tA2bgrftPmMFLUszs5MyNNmVjmhhpQhhM+Z1UBl/3PDAZd+j3AV3R8tZWGTBD0c7dg+4nhmd7FenDUDLS/5JOf25y62J00sp+iJneDqQK3tJutVtohjl/nKZdJ3CNAbo9pNTOx2afm41DnmZBSY1N5uXqcZCPbjv+UCkU76UtCILE0ZpPyTF6vhMZqSn2a7T1jCzmX7rysg/cMq/klggFqLX9KHbZMS2E9taXeTrHYY+F--x/CX2ZAyCoh1s4as--CKBsSzfNVDi27/Vk9YHtGg==" 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_5005363814" class="lui-token lui-entity-token lui-entity-token-general  " style="color: #212529; background-color: #F8F9FA;">
                          <i class="lui-token__icon fa-regular fa-regular fa-grid"></i>
                          <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="WXdOin1cByN8hvptLEPmUHuSIc0TeT6AytvNewUddoUgws2SU9Eyr0l4HiODALPyAqBI2mO24eluglGlhqp5lQ" autocomplete="off" />
                      <input value="LDChiZGsBqbXVdNNEzicOwgxIraidUHF2d74ICAdrtdXZd/oTgN14+fHHKYGi5NmxDh1r0dKhAD6s3WGn5Nkykwqay8a+yVd9H3bIwoSQ+U28+swY98Y9v8csWtzrNqvnTh38PWM9ADtbAam9Hn7pfJWP3R25HtfEjVFTWGymOqJcBH5pWKcXZg/AKCax3fz/zViy1VqRBY1c/OmLny5AADXkFmqMUo+gOblBYlkbSDYvKIOqksb9QQyJJAnHKj/zwwmpcmRK+BW2eywlkIyBS47RaJiDc2SG5KwRFNgSA5daMYeCa+O8UK7vPE4G5akSytx4wBiCR59LAO6BlnNA5hnWHfXSMI7qX9y6AwoGsLRY8e7WiVgTdt6nifFuzclNO9Fab8dTfCBZFD5NdV1KsvBSYW0AGlDkxZ62j1D/j7Aujijjunnu9xFhqCxS5D/8CBLuDTJWwjbVuMgbtavHKyeXCU60E28AvBECfEh5+c/Y0nBvCzLxMvZaK0e41ATePlprfj+feeZx7JWIYjkArG7GHZroNPGDCssRzFCUHOxUbQFpmhrkKgmxE/QQ5MYzAmrv0sWOh3tmfZQeMHhfkPOp4aQGa2DV7Nr2ODMNEfS0GClzeojzAPJdbnthGqniAFjBKlIVAJvLhFOJi0qTkftt/HuReZqC+Bf+keR37gMPcw0Cp/w3w/Cs1FBz0x11+fXrpVKthzkqWGbEtwvKE/EzvVih5OJfN5f6KIwvNxgs+6M39ulJTdlanIw8rz5TED8u++tA2bgrftPmMFLUszs5MyNNmVjmhhpQhhM+Z1UBl/3PDAZd+j3AV3R8tZWGTBD0c7dg+4nhmd7FenDUDLS/5JOf25y62J00sp+iJneDqQK3tJutVtohjl/nKZdJ3CNAbo9pNTOx2afm41DnmZBSY1N5uXqcZCPbjv+UCkU76UtCILE0ZpPyTF6vhMZqSn2a7T1jCzmX7rysg/cMq/klggFqLX9KHbZMS2E9taXeTrHYY+F--x/CX2ZAyCoh1s4as--CKBsSzfNVDi27/Vk9YHtGg==" 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_9404554452" class="lui-token lui-entity-token lui-entity-token-general  " style="color: #212529; background-color: #F8F9FA;">
                          <i class="lui-token__icon fa-regular fa-regular fa-grid"></i>
                          <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="deCTQpF28DDQhnjAgAV_uHCzAjvVchhfrhNZaGVWNUoMVRBav_vFvOV4nI4vRioaCYFrLKW9xzYKSsW25uE6Wg" autocomplete="off" />
                      <input value="LDChiZGsBqbXVdNNEzicOwgxIraidUHF2d74ICAdrtdXZd/oTgN14+fHHKYGi5NmxDh1r0dKhAD6s3WGn5Nkykwqay8a+yVd9H3bIwoSQ+U28+swY98Y9v8csWtzrNqvnTh38PWM9ADtbAam9Hn7pfJWP3R25HtfEjVFTWGymOqJcBH5pWKcXZg/AKCax3fz/zViy1VqRBY1c/OmLny5AADXkFmqMUo+gOblBYlkbSDYvKIOqksb9QQyJJAnHKj/zwwmpcmRK+BW2eywlkIyBS47RaJiDc2SG5KwRFNgSA5daMYeCa+O8UK7vPE4G5akSytx4wBiCR59LAO6BlnNA5hnWHfXSMI7qX9y6AwoGsLRY8e7WiVgTdt6nifFuzclNO9Fab8dTfCBZFD5NdV1KsvBSYW0AGlDkxZ62j1D/j7Aujijjunnu9xFhqCxS5D/8CBLuDTJWwjbVuMgbtavHKyeXCU60E28AvBECfEh5+c/Y0nBvCzLxMvZaK0e41ATePlprfj+feeZx7JWIYjkArG7GHZroNPGDCssRzFCUHOxUbQFpmhrkKgmxE/QQ5MYzAmrv0sWOh3tmfZQeMHhfkPOp4aQGa2DV7Nr2ODMNEfS0GClzeojzAPJdbnthGqniAFjBKlIVAJvLhFOJi0qTkftt/HuReZqC+Bf+keR37gMPcw0Cp/w3w/Cs1FBz0x11+fXrpVKthzkqWGbEtwvKE/EzvVih5OJfN5f6KIwvNxgs+6M39ulJTdlanIw8rz5TED8u++tA2bgrftPmMFLUszs5MyNNmVjmhhpQhhM+Z1UBl/3PDAZd+j3AV3R8tZWGTBD0c7dg+4nhmd7FenDUDLS/5JOf25y62J00sp+iJneDqQK3tJutVtohjl/nKZdJ3CNAbo9pNTOx2afm41DnmZBSY1N5uXqcZCPbjv+UCkU76UtCILE0ZpPyTF6vhMZqSn2a7T1jCzmX7rysg/cMq/klggFqLX9KHbZMS2E9taXeTrHYY+F--x/CX2ZAyCoh1s4as--CKBsSzfNVDi27/Vk9YHtGg==" 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_5703447052" class="lui-token lui-entity-token lui-entity-token-general  " style="color: #212529; background-color: #F8F9FA;">
                          <i class="lui-token__icon fa-regular fa-regular fa-grid"></i>
                          <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="6R31wmS2q2V6g2P6i40Qr8McjKznWeYBDcZJbEVNasSQqHbaSjue6U99h7QkzkUNui7lu5eWOWipn9Wyxvpl1A" autocomplete="off" />
                      <input value="LDChiZGsBqbXVdNNEzicOwgxIraidUHF2d74ICAdrtdXZd/oTgN14+fHHKYGi5NmxDh1r0dKhAD6s3WGn5Nkykwqay8a+yVd9H3bIwoSQ+U28+swY98Y9v8csWtzrNqvnTh38PWM9ADtbAam9Hn7pfJWP3R25HtfEjVFTWGymOqJcBH5pWKcXZg/AKCax3fz/zViy1VqRBY1c/OmLny5AADXkFmqMUo+gOblBYlkbSDYvKIOqksb9QQyJJAnHKj/zwwmpcmRK+BW2eywlkIyBS47RaJiDc2SG5KwRFNgSA5daMYeCa+O8UK7vPE4G5akSytx4wBiCR59LAO6BlnNA5hnWHfXSMI7qX9y6AwoGsLRY8e7WiVgTdt6nifFuzclNO9Fab8dTfCBZFD5NdV1KsvBSYW0AGlDkxZ62j1D/j7Aujijjunnu9xFhqCxS5D/8CBLuDTJWwjbVuMgbtavHKyeXCU60E28AvBECfEh5+c/Y0nBvCzLxMvZaK0e41ATePlprfj+feeZx7JWIYjkArG7GHZroNPGDCssRzFCUHOxUbQFpmhrkKgmxE/QQ5MYzAmrv0sWOh3tmfZQeMHhfkPOp4aQGa2DV7Nr2ODMNEfS0GClzeojzAPJdbnthGqniAFjBKlIVAJvLhFOJi0qTkftt/HuReZqC+Bf+keR37gMPcw0Cp/w3w/Cs1FBz0x11+fXrpVKthzkqWGbEtwvKE/EzvVih5OJfN5f6KIwvNxgs+6M39ulJTdlanIw8rz5TED8u++tA2bgrftPmMFLUszs5MyNNmVjmhhpQhhM+Z1UBl/3PDAZd+j3AV3R8tZWGTBD0c7dg+4nhmd7FenDUDLS/5JOf25y62J00sp+iJneDqQK3tJutVtohjl/nKZdJ3CNAbo9pNTOx2afm41DnmZBSY1N5uXqcZCPbjv+UCkU76UtCILE0ZpPyTF6vhMZqSn2a7T1jCzmX7rysg/cMq/klggFqLX9KHbZMS2E9taXeTrHYY+F--x/CX2ZAyCoh1s4as--CKBsSzfNVDi27/Vk9YHtGg==" 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_3999329769" class="lui-token lui-entity-token lui-entity-token-general  " style="color: #212529; background-color: #F8F9FA;">
                          <i class="lui-token__icon fa-regular fa-regular fa-grid"></i>
                          <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="GQNwW_omwMQIjw3YyHL0sa0-54G4rJQOgyeBW-nBG1lgtvND1Kv1SD1x6ZZnMaET1AyOlshjS2cnfh2FanYUSQ" autocomplete="off" />
                      <input value="LDChiZGsBqbXVdNNEzicOwgxIraidUHF2d74ICAdrtdXZd/oTgN14+fHHKYGi5NmxDh1r0dKhAD6s3WGn5Nkykwqay8a+yVd9H3bIwoSQ+U28+swY98Y9v8csWtzrNqvnTh38PWM9ADtbAam9Hn7pfJWP3R25HtfEjVFTWGymOqJcBH5pWKcXZg/AKCax3fz/zViy1VqRBY1c/OmLny5AADXkFmqMUo+gOblBYlkbSDYvKIOqksb9QQyJJAnHKj/zwwmpcmRK+BW2eywlkIyBS47RaJiDc2SG5KwRFNgSA5daMYeCa+O8UK7vPE4G5akSytx4wBiCR59LAO6BlnNA5hnWHfXSMI7qX9y6AwoGsLRY8e7WiVgTdt6nifFuzclNO9Fab8dTfCBZFD5NdV1KsvBSYW0AGlDkxZ62j1D/j7Aujijjunnu9xFhqCxS5D/8CBLuDTJWwjbVuMgbtavHKyeXCU60E28AvBECfEh5+c/Y0nBvCzLxMvZaK0e41ATePlprfj+feeZx7JWIYjkArG7GHZroNPGDCssRzFCUHOxUbQFpmhrkKgmxE/QQ5MYzAmrv0sWOh3tmfZQeMHhfkPOp4aQGa2DV7Nr2ODMNEfS0GClzeojzAPJdbnthGqniAFjBKlIVAJvLhFOJi0qTkftt/HuReZqC+Bf+keR37gMPcw0Cp/w3w/Cs1FBz0x11+fXrpVKthzkqWGbEtwvKE/EzvVih5OJfN5f6KIwvNxgs+6M39ulJTdlanIw8rz5TED8u++tA2bgrftPmMFLUszs5MyNNmVjmhhpQhhM+Z1UBl/3PDAZd+j3AV3R8tZWGTBD0c7dg+4nhmd7FenDUDLS/5JOf25y62J00sp+iJneDqQK3tJutVtohjl/nKZdJ3CNAbo9pNTOx2afm41DnmZBSY1N5uXqcZCPbjv+UCkU76UtCILE0ZpPyTF6vhMZqSn2a7T1jCzmX7rysg/cMq/klggFqLX9KHbZMS2E9taXeTrHYY+F--x/CX2ZAyCoh1s4as--CKBsSzfNVDi27/Vk9YHtGg==" 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_3139447488" class="lui-token lui-entity-token lui-entity-token-general  " style="color: #212529; background-color: #F8F9FA;">
                          <i class="lui-token__icon fa-regular fa-regular fa-grid"></i>
                          <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="KAwnW0nEVwxJjRJXCighNhKRE3KzGZni-OaLuEJ1flZRuaRDZ0ligHxz9hmla3SUa6N6ZcPWRotcvxdmwcJxRg" autocomplete="off" />
                      <input value="LDChiZGsBqbXVdNNEzicOwgxIraidUHF2d74ICAdrtdXZd/oTgN14+fHHKYGi5NmxDh1r0dKhAD6s3WGn5Nkykwqay8a+yVd9H3bIwoSQ+U28+swY98Y9v8csWtzrNqvnTh38PWM9ADtbAam9Hn7pfJWP3R25HtfEjVFTWGymOqJcBH5pWKcXZg/AKCax3fz/zViy1VqRBY1c/OmLny5AADXkFmqMUo+gOblBYlkbSDYvKIOqksb9QQyJJAnHKj/zwwmpcmRK+BW2eywlkIyBS47RaJiDc2SG5KwRFNgSA5daMYeCa+O8UK7vPE4G5akSytx4wBiCR59LAO6BlnNA5hnWHfXSMI7qX9y6AwoGsLRY8e7WiVgTdt6nifFuzclNO9Fab8dTfCBZFD5NdV1KsvBSYW0AGlDkxZ62j1D/j7Aujijjunnu9xFhqCxS5D/8CBLuDTJWwjbVuMgbtavHKyeXCU60E28AvBECfEh5+c/Y0nBvCzLxMvZaK0e41ATePlprfj+feeZx7JWIYjkArG7GHZroNPGDCssRzFCUHOxUbQFpmhrkKgmxE/QQ5MYzAmrv0sWOh3tmfZQeMHhfkPOp4aQGa2DV7Nr2ODMNEfS0GClzeojzAPJdbnthGqniAFjBKlIVAJvLhFOJi0qTkftt/HuReZqC+Bf+keR37gMPcw0Cp/w3w/Cs1FBz0x11+fXrpVKthzkqWGbEtwvKE/EzvVih5OJfN5f6KIwvNxgs+6M39ulJTdlanIw8rz5TED8u++tA2bgrftPmMFLUszs5MyNNmVjmhhpQhhM+Z1UBl/3PDAZd+j3AV3R8tZWGTBD0c7dg+4nhmd7FenDUDLS/5JOf25y62J00sp+iJneDqQK3tJutVtohjl/nKZdJ3CNAbo9pNTOx2afm41DnmZBSY1N5uXqcZCPbjv+UCkU76UtCILE0ZpPyTF6vhMZqSn2a7T1jCzmX7rysg/cMq/klggFqLX9KHbZMS2E9taXeTrHYY+F--x/CX2ZAyCoh1s4as--CKBsSzfNVDi27/Vk9YHtGg==" 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_7821441232" class="lui-token lui-entity-token lui-entity-token-general  " style="color: #212529; background-color: #F8F9FA;">
                          <i class="lui-token__icon fa-regular fa-regular fa-grid"></i>
                          <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="HE8ea1r1nZCFt7WcDwWRJVYARGSPoVJr0i_mXCl5aIRl-p1zdHioHLBJUdKgRsSHLzItc_9ujQJ2dnqCqs5nlA" autocomplete="off" />
                      <input value="LDChiZGsBqbXVdNNEzicOwgxIraidUHF2d74ICAdrtdXZd/oTgN14+fHHKYGi5NmxDh1r0dKhAD6s3WGn5Nkykwqay8a+yVd9H3bIwoSQ+U28+swY98Y9v8csWtzrNqvnTh38PWM9ADtbAam9Hn7pfJWP3R25HtfEjVFTWGymOqJcBH5pWKcXZg/AKCax3fz/zViy1VqRBY1c/OmLny5AADXkFmqMUo+gOblBYlkbSDYvKIOqksb9QQyJJAnHKj/zwwmpcmRK+BW2eywlkIyBS47RaJiDc2SG5KwRFNgSA5daMYeCa+O8UK7vPE4G5akSytx4wBiCR59LAO6BlnNA5hnWHfXSMI7qX9y6AwoGsLRY8e7WiVgTdt6nifFuzclNO9Fab8dTfCBZFD5NdV1KsvBSYW0AGlDkxZ62j1D/j7Aujijjunnu9xFhqCxS5D/8CBLuDTJWwjbVuMgbtavHKyeXCU60E28AvBECfEh5+c/Y0nBvCzLxMvZaK0e41ATePlprfj+feeZx7JWIYjkArG7GHZroNPGDCssRzFCUHOxUbQFpmhrkKgmxE/QQ5MYzAmrv0sWOh3tmfZQeMHhfkPOp4aQGa2DV7Nr2ODMNEfS0GClzeojzAPJdbnthGqniAFjBKlIVAJvLhFOJi0qTkftt/HuReZqC+Bf+keR37gMPcw0Cp/w3w/Cs1FBz0x11+fXrpVKthzkqWGbEtwvKE/EzvVih5OJfN5f6KIwvNxgs+6M39ulJTdlanIw8rz5TED8u++tA2bgrftPmMFLUszs5MyNNmVjmhhpQhhM+Z1UBl/3PDAZd+j3AV3R8tZWGTBD0c7dg+4nhmd7FenDUDLS/5JOf25y62J00sp+iJneDqQK3tJutVtohjl/nKZdJ3CNAbo9pNTOx2afm41DnmZBSY1N5uXqcZCPbjv+UCkU76UtCILE0ZpPyTF6vhMZqSn2a7T1jCzmX7rysg/cMq/klggFqLX9KHbZMS2E9taXeTrHYY+F--x/CX2ZAyCoh1s4as--CKBsSzfNVDi27/Vk9YHtGg==" 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_2902670536" class="lui-token lui-entity-token lui-entity-token-general  " style="color: #212529; background-color: #F8F9FA;">
                          <i class="lui-token__icon fa-regular fa-regular fa-grid"></i>
                          <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="yfMKXXzUrEloecWgobnEqbcB52r3Yh4VPHqkiyDkKsqwRolFUlmZxV2HIe4O-pELzjOOfYetwXyYIzhVo1Ml2g" autocomplete="off" />
                      <input value="LDChiZGsBqbXVdNNEzicOwgxIraidUHF2d74ICAdrtdXZd/oTgN14+fHHKYGi5NmxDh1r0dKhAD6s3WGn5Nkykwqay8a+yVd9H3bIwoSQ+U28+swY98Y9v8csWtzrNqvnTh38PWM9ADtbAam9Hn7pfJWP3R25HtfEjVFTWGymOqJcBH5pWKcXZg/AKCax3fz/zViy1VqRBY1c/OmLny5AADXkFmqMUo+gOblBYlkbSDYvKIOqksb9QQyJJAnHKj/zwwmpcmRK+BW2eywlkIyBS47RaJiDc2SG5KwRFNgSA5daMYeCa+O8UK7vPE4G5akSytx4wBiCR59LAO6BlnNA5hnWHfXSMI7qX9y6AwoGsLRY8e7WiVgTdt6nifFuzclNO9Fab8dTfCBZFD5NdV1KsvBSYW0AGlDkxZ62j1D/j7Aujijjunnu9xFhqCxS5D/8CBLuDTJWwjbVuMgbtavHKyeXCU60E28AvBECfEh5+c/Y0nBvCzLxMvZaK0e41ATePlprfj+feeZx7JWIYjkArG7GHZroNPGDCssRzFCUHOxUbQFpmhrkKgmxE/QQ5MYzAmrv0sWOh3tmfZQeMHhfkPOp4aQGa2DV7Nr2ODMNEfS0GClzeojzAPJdbnthGqniAFjBKlIVAJvLhFOJi0qTkftt/HuReZqC+Bf+keR37gMPcw0Cp/w3w/Cs1FBz0x11+fXrpVKthzkqWGbEtwvKE/EzvVih5OJfN5f6KIwvNxgs+6M39ulJTdlanIw8rz5TED8u++tA2bgrftPmMFLUszs5MyNNmVjmhhpQhhM+Z1UBl/3PDAZd+j3AV3R8tZWGTBD0c7dg+4nhmd7FenDUDLS/5JOf25y62J00sp+iJneDqQK3tJutVtohjl/nKZdJ3CNAbo9pNTOx2afm41DnmZBSY1N5uXqcZCPbjv+UCkU76UtCILE0ZpPyTF6vhMZqSn2a7T1jCzmX7rysg/cMq/klggFqLX9KHbZMS2E9taXeTrHYY+F--x/CX2ZAyCoh1s4as--CKBsSzfNVDi27/Vk9YHtGg==" 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_1475808767" class="lui-token lui-entity-token lui-entity-token-general  " style="color: #212529; background-color: #F8F9FA;">
                          <i class="lui-token__icon fa-regular fa-regular fa-grid"></i>
                          <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="IvojLd8cdEnh5HRjVZIknXLJYR5SE42yZ08uta4Ri2VbT6A18ZFBxdQakC360XE_C_sICSLcUtvDFrJrLaaEdQ" autocomplete="off" />
                      <input value="LDChiZGsBqbXVdNNEzicOwgxIraidUHF2d74ICAdrtdXZd/oTgN14+fHHKYGi5NmxDh1r0dKhAD6s3WGn5Nkykwqay8a+yVd9H3bIwoSQ+U28+swY98Y9v8csWtzrNqvnTh38PWM9ADtbAam9Hn7pfJWP3R25HtfEjVFTWGymOqJcBH5pWKcXZg/AKCax3fz/zViy1VqRBY1c/OmLny5AADXkFmqMUo+gOblBYlkbSDYvKIOqksb9QQyJJAnHKj/zwwmpcmRK+BW2eywlkIyBS47RaJiDc2SG5KwRFNgSA5daMYeCa+O8UK7vPE4G5akSytx4wBiCR59LAO6BlnNA5hnWHfXSMI7qX9y6AwoGsLRY8e7WiVgTdt6nifFuzclNO9Fab8dTfCBZFD5NdV1KsvBSYW0AGlDkxZ62j1D/j7Aujijjunnu9xFhqCxS5D/8CBLuDTJWwjbVuMgbtavHKyeXCU60E28AvBECfEh5+c/Y0nBvCzLxMvZaK0e41ATePlprfj+feeZx7JWIYjkArG7GHZroNPGDCssRzFCUHOxUbQFpmhrkKgmxE/QQ5MYzAmrv0sWOh3tmfZQeMHhfkPOp4aQGa2DV7Nr2ODMNEfS0GClzeojzAPJdbnthGqniAFjBKlIVAJvLhFOJi0qTkftt/HuReZqC+Bf+keR37gMPcw0Cp/w3w/Cs1FBz0x11+fXrpVKthzkqWGbEtwvKE/EzvVih5OJfN5f6KIwvNxgs+6M39ulJTdlanIw8rz5TED8u++tA2bgrftPmMFLUszs5MyNNmVjmhhpQhhM+Z1UBl/3PDAZd+j3AV3R8tZWGTBD0c7dg+4nhmd7FenDUDLS/5JOf25y62J00sp+iJneDqQK3tJutVtohjl/nKZdJ3CNAbo9pNTOx2afm41DnmZBSY1N5uXqcZCPbjv+UCkU76UtCILE0ZpPyTF6vhMZqSn2a7T1jCzmX7rysg/cMq/klggFqLX9KHbZMS2E9taXeTrHYY+F--x/CX2ZAyCoh1s4as--CKBsSzfNVDi27/Vk9YHtGg==" 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_1514812509" class="lui-token lui-entity-token lui-entity-token-general  " style="color: #212529; background-color: #F8F9FA;">
                          <i class="lui-token__icon fa-regular fa-regular fa-grid"></i>
                          <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="1x1hGCwVH0PGt5QaxHY0nb-oy1f46rn8nsFL9un9qO-uqOIAApgqz_NJcFRrNWE_xpqiQIglZpU6mNcoakqn_w" autocomplete="off" />
                      <input value="LDChiZGsBqbXVdNNEzicOwgxIraidUHF2d74ICAdrtdXZd/oTgN14+fHHKYGi5NmxDh1r0dKhAD6s3WGn5Nkykwqay8a+yVd9H3bIwoSQ+U28+swY98Y9v8csWtzrNqvnTh38PWM9ADtbAam9Hn7pfJWP3R25HtfEjVFTWGymOqJcBH5pWKcXZg/AKCax3fz/zViy1VqRBY1c/OmLny5AADXkFmqMUo+gOblBYlkbSDYvKIOqksb9QQyJJAnHKj/zwwmpcmRK+BW2eywlkIyBS47RaJiDc2SG5KwRFNgSA5daMYeCa+O8UK7vPE4G5akSytx4wBiCR59LAO6BlnNA5hnWHfXSMI7qX9y6AwoGsLRY8e7WiVgTdt6nifFuzclNO9Fab8dTfCBZFD5NdV1KsvBSYW0AGlDkxZ62j1D/j7Aujijjunnu9xFhqCxS5D/8CBLuDTJWwjbVuMgbtavHKyeXCU60E28AvBECfEh5+c/Y0nBvCzLxMvZaK0e41ATePlprfj+feeZx7JWIYjkArG7GHZroNPGDCssRzFCUHOxUbQFpmhrkKgmxE/QQ5MYzAmrv0sWOh3tmfZQeMHhfkPOp4aQGa2DV7Nr2ODMNEfS0GClzeojzAPJdbnthGqniAFjBKlIVAJvLhFOJi0qTkftt/HuReZqC+Bf+keR37gMPcw0Cp/w3w/Cs1FBz0x11+fXrpVKthzkqWGbEtwvKE/EzvVih5OJfN5f6KIwvNxgs+6M39ulJTdlanIw8rz5TED8u++tA2bgrftPmMFLUszs5MyNNmVjmhhpQhhM+Z1UBl/3PDAZd+j3AV3R8tZWGTBD0c7dg+4nhmd7FenDUDLS/5JOf25y62J00sp+iJneDqQK3tJutVtohjl/nKZdJ3CNAbo9pNTOx2afm41DnmZBSY1N5uXqcZCPbjv+UCkU76UtCILE0ZpPyTF6vhMZqSn2a7T1jCzmX7rysg/cMq/klggFqLX9KHbZMS2E9taXeTrHYY+F--x/CX2ZAyCoh1s4as--CKBsSzfNVDi27/Vk9YHtGg==" 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_9508286743" class="lui-token lui-entity-token lui-entity-token-general  " style="color: #212529; background-color: #F8F9FA;">
                          <i class="lui-token__icon fa-regular fa-regular fa-grid"></i>
                          <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="ENDGIkR58zN10RRHDefly1e1epYz9i-gWWvlrj2jmkVpZUU6avTGv0Av8AmipLBpLocTgUM58Mn9MnlwvhSVVQ" autocomplete="off" />
                      <input value="LDChiZGsBqbXVdNNEzicOwgxIraidUHF2d74ICAdrtdXZd/oTgN14+fHHKYGi5NmxDh1r0dKhAD6s3WGn5Nkykwqay8a+yVd9H3bIwoSQ+U28+swY98Y9v8csWtzrNqvnTh38PWM9ADtbAam9Hn7pfJWP3R25HtfEjVFTWGymOqJcBH5pWKcXZg/AKCax3fz/zViy1VqRBY1c/OmLny5AADXkFmqMUo+gOblBYlkbSDYvKIOqksb9QQyJJAnHKj/zwwmpcmRK+BW2eywlkIyBS47RaJiDc2SG5KwRFNgSA5daMYeCa+O8UK7vPE4G5akSytx4wBiCR59LAO6BlnNA5hnWHfXSMI7qX9y6AwoGsLRY8e7WiVgTdt6nifFuzclNO9Fab8dTfCBZFD5NdV1KsvBSYW0AGlDkxZ62j1D/j7Aujijjunnu9xFhqCxS5D/8CBLuDTJWwjbVuMgbtavHKyeXCU60E28AvBECfEh5+c/Y0nBvCzLxMvZaK0e41ATePlprfj+feeZx7JWIYjkArG7GHZroNPGDCssRzFCUHOxUbQFpmhrkKgmxE/QQ5MYzAmrv0sWOh3tmfZQeMHhfkPOp4aQGa2DV7Nr2ODMNEfS0GClzeojzAPJdbnthGqniAFjBKlIVAJvLhFOJi0qTkftt/HuReZqC+Bf+keR37gMPcw0Cp/w3w/Cs1FBz0x11+fXrpVKthzkqWGbEtwvKE/EzvVih5OJfN5f6KIwvNxgs+6M39ulJTdlanIw8rz5TED8u++tA2bgrftPmMFLUszs5MyNNmVjmhhpQhhM+Z1UBl/3PDAZd+j3AV3R8tZWGTBD0c7dg+4nhmd7FenDUDLS/5JOf25y62J00sp+iJneDqQK3tJutVtohjl/nKZdJ3CNAbo9pNTOx2afm41DnmZBSY1N5uXqcZCPbjv+UCkU76UtCILE0ZpPyTF6vhMZqSn2a7T1jCzmX7rysg/cMq/klggFqLX9KHbZMS2E9taXeTrHYY+F--x/CX2ZAyCoh1s4as--CKBsSzfNVDi27/Vk9YHtGg==" 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_5362092628" class="lui-token lui-entity-token lui-entity-token-general  " style="color: #212529; background-color: #F8F9FA;">
                          <i class="lui-token__icon fa-regular fa-regular fa-grid"></i>
                          <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="_gW_j5GyGwQi5QyeEJK-hbmIUkh1B33HKLO2dl-7q1GHsDyXvz8uiBcb6NC_0esnwLo7XwXIoq6M6iqo3AykQQ" autocomplete="off" />
                      <input value="LDChiZGsBqbXVdNNEzicOwgxIraidUHF2d74ICAdrtdXZd/oTgN14+fHHKYGi5NmxDh1r0dKhAD6s3WGn5Nkykwqay8a+yVd9H3bIwoSQ+U28+swY98Y9v8csWtzrNqvnTh38PWM9ADtbAam9Hn7pfJWP3R25HtfEjVFTWGymOqJcBH5pWKcXZg/AKCax3fz/zViy1VqRBY1c/OmLny5AADXkFmqMUo+gOblBYlkbSDYvKIOqksb9QQyJJAnHKj/zwwmpcmRK+BW2eywlkIyBS47RaJiDc2SG5KwRFNgSA5daMYeCa+O8UK7vPE4G5akSytx4wBiCR59LAO6BlnNA5hnWHfXSMI7qX9y6AwoGsLRY8e7WiVgTdt6nifFuzclNO9Fab8dTfCBZFD5NdV1KsvBSYW0AGlDkxZ62j1D/j7Aujijjunnu9xFhqCxS5D/8CBLuDTJWwjbVuMgbtavHKyeXCU60E28AvBECfEh5+c/Y0nBvCzLxMvZaK0e41ATePlprfj+feeZx7JWIYjkArG7GHZroNPGDCssRzFCUHOxUbQFpmhrkKgmxE/QQ5MYzAmrv0sWOh3tmfZQeMHhfkPOp4aQGa2DV7Nr2ODMNEfS0GClzeojzAPJdbnthGqniAFjBKlIVAJvLhFOJi0qTkftt/HuReZqC+Bf+keR37gMPcw0Cp/w3w/Cs1FBz0x11+fXrpVKthzkqWGbEtwvKE/EzvVih5OJfN5f6KIwvNxgs+6M39ulJTdlanIw8rz5TED8u++tA2bgrftPmMFLUszs5MyNNmVjmhhpQhhM+Z1UBl/3PDAZd+j3AV3R8tZWGTBD0c7dg+4nhmd7FenDUDLS/5JOf25y62J00sp+iJneDqQK3tJutVtohjl/nKZdJ3CNAbo9pNTOx2afm41DnmZBSY1N5uXqcZCPbjv+UCkU76UtCILE0ZpPyTF6vhMZqSn2a7T1jCzmX7rysg/cMq/klggFqLX9KHbZMS2E9taXeTrHYY+F--x/CX2ZAyCoh1s4as--CKBsSzfNVDi27/Vk9YHtGg==" 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_65226010" class="lui-token lui-entity-token lui-entity-token-general  " style="color: #212529; background-color: #F8F9FA;">
                          <i class="lui-token__icon fa-regular fa-regular fa-grid"></i>
                          <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="fCII8TqwUTza2yMBSw3CBx1YqZ8KZLip_KaT6nFdaT4Fl4vpFD1ksO8lx0_kTpelZGrAiHqrZ8BY_w808upmLg" autocomplete="off" />
                      <input value="LDChiZGsBqbXVdNNEzicOwgxIraidUHF2d74ICAdrtdXZd/oTgN14+fHHKYGi5NmxDh1r0dKhAD6s3WGn5Nkykwqay8a+yVd9H3bIwoSQ+U28+swY98Y9v8csWtzrNqvnTh38PWM9ADtbAam9Hn7pfJWP3R25HtfEjVFTWGymOqJcBH5pWKcXZg/AKCax3fz/zViy1VqRBY1c/OmLny5AADXkFmqMUo+gOblBYlkbSDYvKIOqksb9QQyJJAnHKj/zwwmpcmRK+BW2eywlkIyBS47RaJiDc2SG5KwRFNgSA5daMYeCa+O8UK7vPE4G5akSytx4wBiCR59LAO6BlnNA5hnWHfXSMI7qX9y6AwoGsLRY8e7WiVgTdt6nifFuzclNO9Fab8dTfCBZFD5NdV1KsvBSYW0AGlDkxZ62j1D/j7Aujijjunnu9xFhqCxS5D/8CBLuDTJWwjbVuMgbtavHKyeXCU60E28AvBECfEh5+c/Y0nBvCzLxMvZaK0e41ATePlprfj+feeZx7JWIYjkArG7GHZroNPGDCssRzFCUHOxUbQFpmhrkKgmxE/QQ5MYzAmrv0sWOh3tmfZQeMHhfkPOp4aQGa2DV7Nr2ODMNEfS0GClzeojzAPJdbnthGqniAFjBKlIVAJvLhFOJi0qTkftt/HuReZqC+Bf+keR37gMPcw0Cp/w3w/Cs1FBz0x11+fXrpVKthzkqWGbEtwvKE/EzvVih5OJfN5f6KIwvNxgs+6M39ulJTdlanIw8rz5TED8u++tA2bgrftPmMFLUszs5MyNNmVjmhhpQhhM+Z1UBl/3PDAZd+j3AV3R8tZWGTBD0c7dg+4nhmd7FenDUDLS/5JOf25y62J00sp+iJneDqQK3tJutVtohjl/nKZdJ3CNAbo9pNTOx2afm41DnmZBSY1N5uXqcZCPbjv+UCkU76UtCILE0ZpPyTF6vhMZqSn2a7T1jCzmX7rysg/cMq/klggFqLX9KHbZMS2E9taXeTrHYY+F--x/CX2ZAyCoh1s4as--CKBsSzfNVDi27/Vk9YHtGg==" 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_3805063338" class="lui-token lui-entity-token lui-entity-token-general  " style="color: #212529; background-color: #F8F9FA;">
                          <i class="lui-token__icon fa-regular fa-regular fa-grid"></i>
                          <span class="lui-token__text">Fairy</span>
                          <div class="lui-token__actions">
                          </div>
                        </span>
                      </button></form>
                  </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>
  </turbo-frame></div>

No Usage documentation to display.

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
<h3 class="mb-4">
  ⚠️ You probably want the ModelAssociationList component. ⚠️ <br>
  Check the docs.
</h3>
<%
    pokemon = Pokemon.first
%>
<div data-controller="association-overlay-toggle" data-association-overlay-toggle-turbo-frame-value="some-frame">
  <%= turbo_frame_tag "some-frame" do %>
    <%= render LooposUi::TokenList.new(max_tokens: 4) do |tl|%>
      <% tl.with_association_button do %>
        <%= render LooposUi::Popover.new do |popover| %>
          <% popover.with_toggle_button(
            kind: :neutral,
            type: :tertiary,
            size: :tiny,
            icon: :plus
          )%>
          <% popover.with_target do %>
            <%= render LooposUi::ModelAssociationOverlay.new(
              model: pokemon,
              association: :types,
              can_create_new: false,
              component_class: LooposUi::Entities::Category,
              association_scope: -> { where.not("types.name IN (?)", ['Fire', 'Water']) }
            ) %>
          <% end %>
        <% end %>
      <% end %>
      <% pokemon.types.each do |type| %>
        <% tl.with_token_manual do %>
          <%= render LooposUi::Entities::Category.new(category: OpenStruct.new(name: type.name))%>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
</div>

No notes provided.

No params configured.

ModelAssociationOverlay

The ModelAssociationOverlay component provides an interface for managing associations between models. It displays currently attached items and allows users to add or remove associations through a searchable overlay interface. It is often used in conjunction with a TokenList, or another List component. The ModelAssociationList component is probably more appropriate for simple cases, as it greatly simplifies the display of the association and usage of the association overlay. The provided examples show how the the ModelAssociationList could be built using the ModelAssociationOverlay in conjunction with a TokenList.

Another component that is often used in conjunction with the ModelAssociationOverlay is the Popover component. The Popover component provides a button that toggles the visibility of the overlay.

This is a "end-to-end" component, as it handles the display of the overlay, the search, the display of the list of items, the adding and removing of items - using the build in LooposUI Associations Controller.

Arguments

Property Default Description
id generated Unique id. You probably do not need to set it manually.
model Required The ActiveRecord model instance that owns the associations
association Required The name of the association to manage
component_class LooposUi::TagToken The component class used to render individual items. Supports LooposUi::Token, LooposUi::TagToken and subclasses of LooposUi::Entity
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. Will be applied on the association object (instanceexec(&associationscope))
can_create_new true A boolean that can be used to disable the creation of new items. Incompatible with LooposUi::Entity component_class.
header_icon nil A string that can be used to set a custom icon for the header. When componentclass is an entity token, will use the entity icon (`componentclass::ICON`)
header_title nil A string that can be used to set a custom title for the header. When component_class is an entity token, will use the demodulized class name.
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.
create_new nil Described 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

If you wish to override the endpoint to which the overlay will send the create new request, you can pass a create_new argument. The create_new argument implies can_create_new is true. The create_new argument should be a hash with the following:

  • form_attrs: A hash of attributes that will be passed to the inner form_with call. Example keys would be url, method, etc. Mandatory.
  • payload: A hash of attributes that will be submitted with the form. Optional. Note: this request will always send name as a parameter, which is the user submitted input for the new item.

Slots

No slots.

Events

When adding or removing items, the component will emit the association-overlay:results-change event. It will contain the mutations list in the detail property. Usually you will only care about the event to refresh part of the page.

Usage

Sometimes you may want to refresh part of the page after adding/removing an association. You can listen to the model-association-overlay:results-change event and refresh the page accordingly, using a Turbo.visit on a target turbo frame, for example:

<div id="association" data-controller="association-overlay-toggle">
    <%= render LooposUi::Popover.new do |popover| %>
        <% popover.with_toggle_button(
            text: "Add option type",
            kind: :neutral,
            type: :secondary,
            size: :small,
            icon: :plus,
        )%>
        <% popover.with_target do %>
            <%= render LooposUi::ModelAssociationOverlay.new(
                model: product,
                association: :option_types,
                case_sensitive: true,
                component_class: LooposUi::Token,
                can_create_new: true,
            ) %>
        <% end %>
    <% end %>
</div>
<%#  This frame will be reloaded on association overlay toggle change %>
<%= turbo_frame_tag "frame-to-refresh" do %>
    <%# Some data that will need to be refreshed on change %>
<% end %>
<%# This script should be in a controller, but for the sake of the example, it is here %>
<script>
    document.getElementById("association").addEventListener("association-overlay:results-change", (_e) => {
        Turbo.visit(window.location.href, { action: "replace", frame: "frame-to-refresh"});
    });
</script>

To facilitate this, the association-overlay-toggle controller is provided. It will automatically listen to the association-overlay:results-change event and refresh the page accordingly. Just set the data-association-overlay-toggle-turbo-visit-url-value (optional, defaults to current url) and data-association-overlay-toggle-turbo-frame-value attributes on the element that wraps the ModelAssociationOverlay component.

<div id="option_types_association" data-controller="association-overlay-toggle"
        data-association-overlay-toggle-turbo-visit-url-value="<%= tab_admin_v2_catalog_product_path(product, tab: :options) %>"
        data-association-overlay-toggle-turbo-frame-value="<%= turbo_id(product, :options) %>" >
    <%= render LooposUi::Popover.new do |popover| %>
        <% popover.with_toggle_button(
            text: "Add option type",
            kind: :neutral,
            type: :secondary,
            size: :small,
            icon: :plus,
        )%>
        <% popover.with_target do %>
            <%= render LooposUi::ModelAssociationOverlay.new(
                model: product,
                association: :option_types,
                case_sensitive: true,
                component_class: LooposUi::Token,
                can_create_new: true,
            ) %>
        <% end %>
    <% end %>
    </div>

Implementation Notes

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

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.

Context

The Context object encapsulates all the state required to render and operate the overlay across multiple requests. It ensures the overlay can remain stateful despite being re-rendered frequently due to user actions (attach/detach, create new).

Why it is used:

  • Keeps UI and query state consistent between consecutive re-renders (e.g., which containers to update, current list configuration, policy flags).
  • Avoids recalculating or trusting client input for sensitive configuration by round-tripping a server-generated state bundle.
  • Enables stateless controller actions while the overlay behaves statefully from the user’s perspective.

How it works:

  • The context is serialized by the backend each time the component is rendered (see LooposUi::ModelAssociationOverlay::Context#serialize).
  • In development it is plain JSON; in other environments it is encrypted.
  • The serialized payload is rendered into the page as a hidden input inside the overlay forms. Every request initiated by the overlay (attach, detach, create new, list interactions) includes this payload.
  • The controller on the server side reads the submitted context and deserializes it using Context.deserialize(...), rehydrating the exact state to properly rebuild the overlay (selected/results containers, component class, policy, list data, etc.).

In summary, the lifecycle is as follows:

  1. Initial render builds a Context from the provided arguments (model, association, component class, config).
  2. The Context is serialized and embedded in the forms as a hidden field.
  3. User actions submit the form; the hidden field travels with the request.
  4. The server deserializes the context, performs the action, and re-renders the overlay with the updated, re-serialized context.

Notes:

  • Context includes identifiers like selected_container_id, results_container_id, and turbo_id that let the server target the right fragments for update.
  • association_query is persisted via association_query_sql to avoid passing raw Arel objects.
  • Configuration (config, policy, list_data) is included to restore behavior flags without trusting client-crafted values (encrypted outside development).