26.9 Finally, let's frost this cake. Near the bottom of the content, …

…I'll paste in the planet checkboxes

 This is more boring code! I loop over the planets and render input check boxes. My Symfony controller is already set up to read the planets parameter and filter the query.

 Final test. Open it up. Lovely! Now watch: click a few. When I press "See Results", the table should update. Boom. It did!

 But the coolest part is... how this worked! Think about it: I click this button... and the table reloads. That means the form is submitting. But... what caused that? Look at the button: there's no code to submit the form. So what's going on?

 Remember: this button, the planet checkboxes and this modal physically live inside the <form> element. And what happens when you press a button that lives inside a form? It submits the form! We run the modal#close, but we also allow the browser to do the default behavior: submitting the form. This is ancient alien technology at work!

 On the close button, I was a bit sneaky. When I added that, I included a type="button". That tells the browser to not submit any form that it might be inside. That's why when we click "X", nothing updates. But when we click "see results", the form submits.

 Woh! Best day ever! Tomorrow, it's time to look at Live components, where we take Twig components and let them re-render on the page via Ajax as the user interacts when them.

templates/main/homepage.html.twig

@@ -62,8 +62,26 @@
                   data-action="modal#open"
               >Options</twig:Button>
             </twig:block>
+
             <h3 class="text-white text-lg font-semibold mb-2">Search Options</h3>
             <hr class="mb-4">
+            <h4 class="text-white text-sm font-semibold mb-2">
+              Planets
+            </h4>
+            {% for planet in planets %}
+              <div class="flex items-center mb-4">
+                <input
+                    type="checkbox"
+                    class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                    name="planets[]"
+                    value="{{ planet.id }}"
+                    id="planet-search-{{ planet.id }}"
+                    {{ planet.id in searchPlanets ? 'checked' : '' }}
+                >
+                <label for="planet-search-{{ planet.id }}" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">{{ planet.name }}</label>
+              </div>
+            {% endfor %}
+
             <div class="flex justify-end">
               <twig:Button
                   variant="success"