{% extends "base.html" %}
{% block title %}Provider Profiles — Shoreguard{% endblock %}

{% block breadcrumbs %}
<ol class="breadcrumb mb-0">
    <li class="breadcrumb-item"><a href="/gateways">Gateways</a></li>
    <li class="breadcrumb-item"><a href="/gateways/{{ gateway_name }}">{{ gateway_name }}</a></li>
    <li class="breadcrumb-item active">Provider Profiles</li>
</ol>
{% endblock %}

{% block content %}
<div x-data="providerProfilesPage()" x-init="load()">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h5 class="mb-0">
            Provider Profiles
            <span class="badge text-bg-light border ms-2 small">M37 · OpenShell PR&nbsp;#1170</span>
        </h5>
        <div class="btn-group btn-group-sm">
            <button class="btn btn-outline-secondary" @click="load()" title="Refresh">
                <i class="bi bi-arrow-clockwise"></i>
            </button>
            <button class="btn btn-outline-success" @click="openImportDialog()" data-sg-min-role="operator">
                <i class="bi bi-upload me-1"></i>Import
            </button>
        </div>
    </div>

    <div x-show="loading" class="text-center text-muted py-5">
        <div class="spinner-border spinner-border-sm me-2"></div>Loading profiles…
    </div>
    <div x-show="error" x-cloak class="alert alert-danger" x-text="error"></div>

    <template x-if="!loading && !error">
        <div>
            <div x-show="profiles.length === 0" class="alert alert-info">
                No provider profiles registered. Set
                <code>providers_v2_enabled = true</code> on the gateway and
                import profiles to populate the registry.
            </div>
            <div x-show="profiles.length > 0" class="table-responsive">
                <table class="table table-sm align-middle">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Display name</th>
                            <th>Category</th>
                            <th class="text-end">Credentials</th>
                            <th class="text-end">Endpoints</th>
                            <th>Inference</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-for="prof in profiles" :key="prof.id">
                            <tr>
                                <td class="font-monospace" x-text="prof.id"></td>
                                <td x-text="prof.display_name"></td>
                                <td><span class="badge text-bg-light border" x-text="prof.category"></span></td>
                                <td class="text-end" x-text="(prof.credentials || []).length"></td>
                                <td class="text-end" x-text="prof.endpoint_count || 0"></td>
                                <td>
                                    <i class="bi" :class="prof.inference_capable ? 'bi-check-circle text-success' : 'bi-dash-circle text-muted'"></i>
                                </td>
                                <td class="text-end">
                                    <button class="btn btn-sm btn-outline-danger"
                                            data-sg-min-role="operator"
                                            @click="deleteProfile(prof.id)"
                                            title="Delete">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
        </div>
    </template>

    <!-- Import dialog -->
    <div x-show="importOpen" x-cloak class="modal fade show d-block" tabindex="-1"
         style="background: rgba(0,0,0,.4);" @click.self="importOpen = false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">Import Provider Profiles</h6>
                    <button type="button" class="btn-close" @click="importOpen = false"></button>
                </div>
                <div class="modal-body">
                    <p class="small text-muted">
                        Paste a JSON array of <code>{profile, source}</code> items, then
                        run <strong>Lint</strong> to preview gateway-side diagnostics
                        before <strong>Apply</strong>.
                    </p>
                    <textarea class="form-control font-monospace small" rows="10"
                              x-model="importText"
                              placeholder='[{"profile": {"id": "claude", "display_name": "Claude", "description": "Anthropic", "inference_capable": true}, "source": "inline"}]'></textarea>
                    <div x-show="importDiagnostics.length > 0" class="mt-3">
                        <div class="small fw-bold mb-1">Diagnostics</div>
                        <ul class="list-group list-group-flush small">
                            <template x-for="(d, idx) in importDiagnostics" :key="idx">
                                <li class="list-group-item py-1 px-2 d-flex gap-2 align-items-baseline">
                                    <span class="badge"
                                          :class="d.severity === 'error' ? 'text-bg-danger' : 'text-bg-warning'"
                                          x-text="d.severity"></span>
                                    <span class="font-monospace" x-text="d.profile_id || '(global)'"></span>
                                    <span class="text-muted" x-text="d.field"></span>
                                    <span x-text="d.message"></span>
                                </li>
                            </template>
                        </ul>
                    </div>
                    <div x-show="importLastValid !== null" class="mt-2 small">
                        <span x-show="importLastValid" class="text-success">
                            <i class="bi bi-check-circle me-1"></i>Validation passed.
                        </span>
                        <span x-show="!importLastValid" class="text-danger">
                            <i class="bi bi-exclamation-triangle me-1"></i>Validation failed.
                        </span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-outline-secondary" @click="importOpen = false">Cancel</button>
                    <button class="btn btn-outline-primary" @click="lintProfiles()" :disabled="importBusy">
                        <span x-show="importBusy" class="spinner-border spinner-border-sm me-1"></span>
                        Lint
                    </button>
                    <button class="btn btn-success" @click="applyProfiles()"
                            :disabled="importBusy || !importLastValid"
                            data-sg-min-role="operator">
                        Apply
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}


{% block extra_js %}
<script src="/static/js/provider_profiles.js"></script>
{% endblock %}