wizarr/app/templates/settings/connections.html

<section class="animate__animated animate__fadeIn">
  <div class="p-6 space-y-8">
    <!-- Page Header -->
    <div class="border-b border-gray-200 dark:border-gray-700 pb-6">
      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ _("Connections") }}</h1>
          <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
            {{ _("Manage external service connections for automated user invitations") }}
          </p>
        </div>
        <div class="flex gap-2">
          <button hx-get="{{ url_for('connections.create_connection') }}"
                  hx-target="#connection-modal"
                  hx-swap="innerHTML"
                  class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-primary border border-transparent rounded-lg hover:bg-primary-dark focus:z-10 focus:ring-2 focus:ring-primary">
            <svg class="w-4 h-4 mr-2"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
            </svg>
            {{ _("Add Connection") }}
          </button>
        </div>
      </div>
    </div>
    <!-- Connections Content -->
    <div class="w-full">
      {% if connections %}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
          <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
            <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
              <tr>
                <th scope="col" class="px-6 py-3">{{ _("Connection Name") }}</th>
                <th scope="col" class="px-6 py-3">{{ _("Type") }}</th>
                <th scope="col" class="px-6 py-3">{{ _("Media Server") }}</th>
                <th scope="col" class="px-6 py-3">{{ _("URL") }}</th>
                <th scope="col" class="px-6 py-3">{{ _("Actions") }}</th>
              </tr>
            </thead>
            <tbody>
              {% for connection in connections %}
                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                  <td class="px-6 py-4 font-medium text-gray-900 dark:text-white">{{ connection.name }}</td>
                  <td class="px-6 py-4">
                    {% if connection.connection_type == 'overseerr' %}
                      <span class="inline-flex items-center px-2 py-1 text-xs font-medium text-orange-800 bg-orange-100 rounded-full dark:bg-orange-900 dark:text-orange-300">
                        <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd">
                          </path>
                        </svg>
                        {{ _("Overseerr (Info)") }}
                      </span>
                    {% elif connection.connection_type == 'ombi' %}
                      <span class="inline-flex items-center px-2 py-1 text-xs font-medium text-green-800 bg-green-100 rounded-full dark:bg-green-900 dark:text-green-300">
                        <svg xmlns="http://www.w3.org/2000/svg"
                             fill="none"
                             viewBox="0 0 24 24"
                             stroke-width="1.5"
                             stroke="currentColor"
                             class="w-3 h-3 mr-1">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />
                        </svg>
                        {{ _("Ombi") }}
                      </span>
                    {% elif connection.connection_type == 'audiobookrequest' %}
                      <span class="inline-flex items-center px-2 py-1 text-xs font-medium text-purple-800 bg-purple-100 rounded-full dark:bg-purple-900 dark:text-purple-300">
                        <svg xmlns="http://www.w3.org/2000/svg"
                             fill="none"
                             viewBox="0 0 24 24"
                             stroke-width="1.5"
                             stroke="currentColor"
                             class="w-3 h-3 mr-1">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M19.114 5.636a9 9 0 0 1 0 12.728M16.463 8.288a5.25 5.25 0 0 1 0 7.424M6.75 8.25l4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.59-.79-1.59-1.77V9.98c0-.98.71-1.77 1.59-1.77H6.75Z" />
                        </svg>
                        {{ _("Audiobookrequest") }}
                      </span>
                    {% else %}
                      <span class="inline-flex items-center px-2 py-1 text-xs font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-900 dark:text-gray-300">
                        <svg xmlns="http://www.w3.org/2000/svg"
                             fill="none"
                             viewBox="0 0 24 24"
                             stroke-width="1.5"
                             stroke="currentColor"
                             class="w-3 h-3 mr-1">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
                        </svg>
                        {{ connection.connection_type.title() }}
                      </span>
                    {% endif %}
                  </td>
                  <td class="px-6 py-4">
                    <div class="flex items-center">
                      <span class="inline-flex items-center px-2 py-1 text-xs font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300">
                        {{ connection.media_server.name }}
                      </span>
                      <span class="ml-2 text-xs text-gray-500 dark:text-gray-400">({{ connection.media_server.server_type.title() }})</span>
                    </div>
                  </td>
                  <td class="px-6 py-4">
                    {% if connection.url %}
                      <a href="{{ connection.url }}"
                         target="_blank"
                         class="text-blue-600 hover:underline dark:text-blue-400">{{ connection.url }}</a>
                    {% else %}
                      <span class="text-gray-500 dark:text-gray-400 italic">{{ _("Auto-import enabled") }}</span>
                    {% endif %}
                  </td>
                  <td class="px-6 py-4">
                    <div class="flex items-center space-x-2">
                      <button hx-get="{{ url_for('connections.edit_connection', connection_id=connection.id) }}"
                              hx-target="#connection-modal"
                              hx-swap="innerHTML"
                              class="inline-flex items-center px-3 py-1 text-sm font-medium text-blue-600 bg-blue-50 border border-blue-200 rounded hover:bg-blue-100 dark:bg-blue-900 dark:text-blue-300 dark:border-blue-700 dark:hover:bg-blue-800">
                        <svg class="w-3 h-3 mr-1"
                             fill="none"
                             stroke="currentColor"
                             viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                        </svg>
                        {{ _("Edit") }}
                      </button>
                      <form hx-post="{{ url_for('connections.delete_connection', connection_id=connection.id) }}"
                            hx-target="#tab-body"
                            hx-swap="innerHTML"
                            hx-confirm="{{ _('Are you sure you want to delete this connection?') }}"
                            class="inline">
                        <button type="submit"
                                class="inline-flex items-center px-3 py-1 text-sm font-medium text-red-600 bg-red-50 border border-red-200 rounded hover:bg-red-100 dark:bg-red-900 dark:text-red-300 dark:border-red-700 dark:hover:bg-red-800">
                          <svg class="w-3 h-3 mr-1"
                               fill="none"
                               stroke="currentColor"
                               viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                          </svg>
                          {{ _("Delete") }}
                        </button>
                      </form>
                    </div>
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      {% else %}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-8 text-center">
          <svg xmlns="http://www.w3.org/2000/svg"
               fill="none"
               viewBox="0 0 24 24"
               stroke-width="1.5"
               stroke="currentColor"
               class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500 mb-4">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />
          </svg>
          <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">{{ _("No connections configured") }}</h3>
          <p class="text-gray-500 dark:text-gray-400 mb-4">
            {{ _("Connect your external services to automate user invitations when invites are created for specific media servers.") }}
          </p>
          <button hx-get="{{ url_for('connections.create_connection') }}"
                  hx-target="#connection-modal"
                  hx-swap="innerHTML"
                  class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-primary border border-transparent rounded-lg hover:bg-primary-dark focus:z-10 focus:ring-2 focus:ring-primary">
            <svg class="w-4 h-4 mr-2"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
            </svg>
            {{ _("Add Your First Connection") }}
          </button>
        </div>
      {% endif %}
    </div>
  </div>
</section>
<!-- Modal Container -->
<div id="connection-modal"></div>