From c1eeeb58d8b3c38492509e217689d5bb1f84ce87 Mon Sep 17 00:00:00 2001
From: Ryan Lerch <rlerch@redhat.com>
Date: Thu, 29 Aug 2024 16:56:07 +1000
Subject: [PATCH] Style up-to-date paths this host carries section in host edit

Signed-off-by: Ryan Lerch <rlerch@redhat.com>
---
 mirrormanager2/templates/fedora/host.html | 28 ++++++++++++++++-------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/mirrormanager2/templates/fedora/host.html b/mirrormanager2/templates/fedora/host.html
index d783d869..48fdd8d2 100644
--- a/mirrormanager2/templates/fedora/host.html
+++ b/mirrormanager2/templates/fedora/host.html
@@ -231,14 +231,26 @@ <h5 class="text-center text-secondary">No URLS</h5>
           </div>
           {% endif %}
           {% if category.directories %}
-          <h3>Up-to-Date Directories this host carries</h3>
-          <ul>
-          {% for dir in category.directories %}
-            {% if dir.up2date %}
-              <li>{{ dir.path }}</li>
-            {% endif %}
-          {% endfor %}
-          </ul>
+          <div class="accordion accordion-flush" id="accordion-category-{{category.id}}">
+            <div class="accordion-item">
+              <h2 class="accordion-header fw-bold" id="heading-category-{{category.id}}">
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-category-{{category.id}}" aria-expanded="false" aria-controls="flush-collapseOne">
+                  <strong>Up-to-Date Directories this host carries <span class="badge bg-primary"> {{category.directories|length}}</span></strong>
+                </button>
+              </h2>
+              <div id="collapse-category-{{category.id}}" class="accordion-collapse collapse" aria-labelledby="#heading-category-{{category.id}}" data-bs-parent="#accordion-category-{{category.id}}">
+                <div class="accordion-body">
+                  <ul>
+                    {% for dir in category.directories %}
+                      {% if dir.up2date %}
+                        <li>{{ dir.path }}</li>
+                      {% endif %}
+                    {% endfor %}
+                    </ul>
+                </div>
+              </div>
+            </div>
+          </div>
           {% endif %}
 
           </li>