wizarr/app/templates/settings/servers.html

<div id="create-server-modal"></div>
<section class="py-8 animate__animated animate__fadeIn">
  <div class="container px-4 mx-auto">
    <h1 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">{{ _("Media Servers") }}</h1>
    <div class="grid grid-cols-1 gap-4 animate__animated" id="servers_grid">
      {% for s in servers %}
        <div class="mb-4 animate__animated flex flex-col justify-between bg-white dark:bg-gray-800 dark:border-gray-700 rounded-lg shadow-xs overflow-hidden border border-gray-200 dark:border-gray-700"
             data-server-id="{{ s.id }}">
          <div class="p-4">
            <!-- Header -->
            <div class="flex justify-between items-start mb-3">
              <h2 class="text-lg font-medium text-gray-900 dark:text-white truncate"
                  title="{{ s.name }}">{{ s.name }}</h2>
              {{ s.server_type|server_type_tag }}
            </div>
            <!-- Details -->
            <div class="space-y-2 text-sm text-gray-500 dark:text-gray-400">
              <!-- URL -->
              <div class="flex items-center">
                <svg class="w-4 h-4 mr-1.5"
                     fill="currentColor"
                     viewBox="0 0 20 20"
                     xmlns="http://www.w3.org/2000/svg">
                  <path d="M12.293 2.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-8 8a1 1 0 01-.707.293H5a1 1 0 01-1-1v-4a1 1 0 01.293-.707l8-8zM5 12v3h3l7-7-3-3-7 7z">
                  </path>
                </svg>
                <a href="{{ s.url }}"
                   target="_blank"
                   rel="noopener"
                   class="truncate hover:underline text-primary dark:text-primary_hover">{{ s.url }}</a>
              </div>
              <!-- Verification Status -->
              <div class="flex items-center gap-2">
                <svg class="w-4 h-4
                            {% if s.verified %}
                              text-green-500
                            {% else %}
                              text-red-500
                            {% endif %}"
                     fill="currentColor"
                     viewBox="0 0 20 20"
                     xmlns="http://www.w3.org/2000/svg">
                  {% if s.verified %}
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd">
                    </path>
                  {% else %}
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.536-10.121a1 1 0 00-1.414-1.414L10 8.586 7.879 6.465a1 1 0 00-1.414 1.414L8.586 10l-2.121 2.121a1 1 0 001.414 1.414L10 11.414l2.121 2.121a1 1 0 001.414-1.414L11.414 10l2.122-2.121z" clip-rule="evenodd">
                    </path>
                  {% endif %}
                </svg>
                <span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium
                             {% if s.verified %}
                               bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100
                             {% else %}
                               bg-red-100 text-red-800 dark:bg-red-700 dark:text-red-100
                             {% endif %}">{{ _("Verified") if s.verified else _("Unverified") }}</span>
                <!-- Connection status badge (auto-updates via HTMX) -->
                <span hx-get="{{ url_for('media_servers.ping_server', server_id=s.id) }}"
                      hx-trigger="load"
                      hx-swap="outerHTML"
                      class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100">
                  {{ _("Checking...") }}
                </span>
              </div>
            </div>
          </div>
          <!-- Divider -->
          <hr class="border-t border-gray-200 dark:border-gray-700" />
          <!-- Actions -->
          <div class="flex justify-end p-3 bg-gray-50 dark:bg-gray-700 space-x-2">
            <button hx-get="{{ url_for('media_servers.edit_server', server_id=s.id) }}"
                    hx-target="#create-server-modal"
                    hx-trigger="click"
                    _="on htmx:afterOnLoad wait 10ms then remove .hidden to #modal"
                    class="inline-flex items-center justify-center p-2 text-gray-800 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 mr-2">
              <svg class="w-5 h-5"
                   fill="currentColor"
                   viewBox="0 0 20 20"
                   xmlns="http://www.w3.org/2000/svg">
                <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z">
                </path>
              </svg>
            </button>
            <button hx-delete="{{ url_for('media_servers.delete_server', delete=s.id) }}"
                    hx-target="#tab-body"
                    hx-swap="innerHTML swap:0.5s"
                    hx-confirm="Are you sure you wish to delete {{ s.name }} ?"
                    class="inline-flex items-center justify-center p-2 text-red-500 rounded-lg hover:text-white hover:bg-red-500 dark:text-red-400 dark:hover:text-white dark:hover:bg-red-600">
              <svg class="w-5 h-5"
                   fill="currentColor"
                   viewBox="0 0 20 20"
                   xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd">
                </path>
              </svg>
            </button>
          </div>
        </div>
      {% endfor %}
    </div>
    <div class="flex items-center justify-center mt-6">
      <button hx-get="{{ url_for('media_servers.create_server') }}"
              hx-target="#create-server-modal"
              hx-trigger="click"
              _="on htmx:afterOnLoad wait 10ms then remove .hidden to #modal"
              class="bg-primary hover:bg-amber-700 focus:ring-4 focus:outline-hidden focus:ring-amber-300 text-white font-medium rounded-lg px-5 py-2.5 text-sm dark:bg-primary dark:hover:bg-amber-700 dark:focus:ring-primary_hover">
        {{ _("Add Server") }}
      </button>
    </div>
  </div>
</section>