{% extends "base/skeleton.html.jinja" %}

{% block title %}
    Debug - OAuth Apps
{% endblock title %}
{% block body %}
    <div class="container mx-auto px-4 py-8 max-w-4xl">
        <!-- Header -->
        <header class="mb-8">
            <h1 class="text-4xl font-bold text-base-content mb-2">OAuth Provider Apps</h1>
            <p class="text-base-content/70">
                Manage OAuth app credentials per provider
            </p>
        </header>
        <!-- Actions Bar -->
        <div class="flex justify-between items-center mb-6">
            <div class="flex gap-2">
                {% if DEBUG %}
                    <a href="{{ url_for('debug_oauth_app_create') }}"
                       class="btn btn-primary btn-sm gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg"
                             class="h-4 w-4"
                             fill="none"
                             viewBox="0 0 24 24"
                             stroke="currentColor">
                            <path stroke-linecap="round"
                                  stroke-linejoin="round"
                                  stroke-width="2"
                                  d="M12 4v16m8-8H4" />
                        </svg>
                        Add App
                    </a>
                {% endif %}
            </div>
            <div class="text-sm text-base-content/60">
                <span>{{ apps | length }} app{{ 's' if apps | length != 1 else '' }}</span>
            </div>
        </div>
        <!-- Apps Table -->
        {% if apps %}
            {% set grouped_providers = apps | map(attribute='provider') | unique | sort %}
            {% for provider in grouped_providers %}
                <div class="card bg-base-100 shadow-xl mb-6">
                    <div class="card-body">
                        <h2 class="card-title text-xl mb-4 capitalize">
                            <svg xmlns="http://www.w3.org/2000/svg"
                                 class="h-5 w-5"
                                 fill="none"
                                 viewBox="0 0 24 24"
                                 stroke="currentColor">
                                <path stroke-linecap="round"
                                      stroke-linejoin="round"
                                      stroke-width="2"
                                      d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
                            </svg>
                            {{ provider }}
                        </h2>
                        <div class="overflow-x-auto">
                            <table class="table table-zebra w-full">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Client ID</th>
                                        <th>Scopes</th>
                                        <th>Status</th>
                                        {% if DEBUG %}<th class="text-center">Actions</th>{% endif %}
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for app in apps if app.provider == provider %}
                                        <tr>
                                            <td>
                                                <span class="font-medium">{{ app.name }}</span>
                                                {% if app.external_app_id %}
                                                    <div class="text-xs text-base-content/60 mt-1">
                                                        ext: {{ app.external_app_id }}
                                                    </div>
                                                {% endif %}
                                            </td>
                                            <td>
                                                <code class="text-sm bg-base-200 px-2 py-1 rounded">
                                                    {{ app.client_id[:16] }}{{ '...' if app.client_id | length > 16 else '' }}
                                                </code>
                                            </td>
                                            <td>
                                                {% if app.scopes %}
                                                    {% for scope in app.scopes %}
                                                        <span class="badge badge-outline badge-sm">{{ scope }}</span>
                                                    {% endfor %}
                                                {% else %}
                                                    <span class="text-base-content/40 text-xs">provider defaults</span>
                                                {% endif %}
                                            </td>
                                            <td>
                                                {% if app.is_active %}
                                                    <span class="badge badge-success badge-sm">active</span>
                                                {% else %}
                                                    <span class="badge badge-error badge-sm">inactive</span>
                                                {% endif %}
                                            </td>
                                            {% if DEBUG %}
                                                <td class="text-center">
                                                    <div class="flex gap-1 justify-center">
                                                        <a href="{{ url_for('debug_oauth_app_edit', app_id=app.id) }}"
                                                           class="btn btn-outline btn-xs">Edit</a>
                                                        <form method="post"
                                                              action="{{ url_for('debug_oauth_app_delete', app_id=app.id) }}"
                                                              onsubmit="return confirm('Delete this OAuth app?')">
                                                            <button type="submit"
                                                                    class="btn btn-outline btn-error btn-xs">
                                                                Delete
                                                            </button>
                                                        </form>
                                                    </div>
                                                </td>
                                            {% endif %}
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            {% endfor %}
        {% else %}
            <div class="alert alert-info">
                <svg xmlns="http://www.w3.org/2000/svg"
                     class="stroke-current shrink-0 h-6 w-6"
                     fill="none"
                     viewBox="0 0 24 24">
                    <path stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span>
                    No OAuth apps configured.
                    {% if providers %}
                        Registered providers: {{ providers | join(', ') }}.
                    {% else %}
                        No providers registered yet (configure in tune.py).
                    {% endif %}
                </span>
            </div>
        {% endif %}
        <!-- Debug Navigation Footer -->
        {% include "debug/components/debug_nav.html.jinja" %}

    </div>
{% endblock body %}
