Implement more UI elements

core/templates/ui/results.html

@@ -9,14 +9,21 @@
       <script src="{% static 'chart.js' %}"></script>
     </div>
     <div class="box">
+      <span class="tag is-success">Online</span>
+      <span class="tag is-danger">Offline</span>
+      <span class="tag is-warning">Unknown</span>
+      IRC: <i class="fa-solid fa-hashtag" aria-hidden="true"></i>
+      Discord: <i class="fa-brands fa-discord" aria-hidden="true"></i>
       <div class="table-container">
         <table class="table is-striped is-hoverable is-fullwidth">
           <thead>
             <tr>
+              <th>src</th>
               <th>TS</th>
               <th>msg</th>
               <th>host</th>
               <th>nick</th>
+              <th>actions</th>
               <th>channel</th>
               <th>net</th>
             </tr>
@@ -25,10 +32,43 @@
           <tbody>
             {% for item in results %}
               <tr>
-                <td>{{ item.ts }}</td>
+                <td>
+                  {% if item.src == 'irc' %}
+                    <i class="fa-solid fa-hashtag" aria-hidden="true"></i>
+                  {% elif item.src == 'dis' %}
+                    <i class="fa-brands fa-discord" aria-hidden="true"></i>
+                  {% endif %}
+                </td>
+                <td>
+                  <p>{{ item.date }}</p>
+                  <p>{{ item.time }}</p>
+                </td>
                 <td>{{ item.msg }}</td>
                 <td>{{ item.host }}</td>
-                <td>{{ item.nick }}</td>
+                <td>
+                  {% if item.online is True %}
+                    <span class="tag is-success">{{ item.nick }}</span>
+                  {% elif item.online is False %}
+                    <span class="tag is-danger">{{ item.nick }}</span>
+                  {% else %}
+                    <span class="tag is-warning">{{ item.nick }}</span>
+                  {% endif %}
+                </td>
+                <td>
+                  {% if item.src == 'irc' %}
+                    <button
+                      hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+                      hx-post="{% url 'modal_info' %}"
+                      hx-vals='{"net": "{{ item.net }}", "nick": "{{ item.nick }}", "channel": "{{ item.channel }}"}'
+                      hx-target="#modals-here" 
+                      hx-trigger="click"
+                      class="btn btn-primary"
+                      _="on htmx:afterOnLoad wait 10ms then add .show to #modal then add .show to #modal-backdrop">
+                        Information
+                    </button>
+                    <div id="modals-here"></div>
+                  {% endif %}
+                </td>
                 <td>{{ item.channel }}</td>
                 <td>{{ item.net }}</td>
               </tr>