<head>
    <script src='/technical-scripts/add-providers.js' defer></script>
</head>
<section>
    <div class="card mb-4">
        <div class="card-header">
            <p class="card-title">Add API Providers</p>
        </div>
        <div class="card-body">
            <form id="createProviderForm" class="provider-form">
                <div class="input-group">
                    <label for="providerId">Provider Name</label>
                    <input type="text" id="name" name="name" required>
                </div>
                <div class="input-group">
                    <label for="providerUrl">Provider URL</label>
                    <input type="url" id="providerURL" name="providerURL" required>
                </div>
                <button type="button" class="btn btn-primary" onClick="addProviders('{{orgID}}')">Add</button>
            </form>
            <div class="card-body">
                <div id="providerList">
                    <h6>Added Providers:</h6>
                    {{#apiProviders}}
                    <form id="editProviderForm{{name}}">
                        <div class="d-flex align-items-center mb-2">
                            <div class="input-group me-2">
                                <label for="name" class="me-2">Provider Name</label>
                                <input type="text" id="name" name="name" value="{{name}}">
                            </div>
                            <div class="input-group me-2">
                                <label for="providerUrl" class="me-2">Provider URL</label>
                                <input type="url" id="providerUrl" name="providerURL" value="{{providerURL}}">
                            </div>
                            <button type="button" class="btn btn-sm btn-outline-primary me-2 d-flex align-items-center"
                                id="providerEdit" onclick="editProvider('{{../orgID}}', 'editProviderForm{{name}}')">
                                <i class="bi bi-pencil me-1"></i> Edit
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-danger d-flex align-items-center"
                                onclick="if (confirm('Are you sure you want to delete this Provider?')) 
                                { deleteProvider('{{../orgID}}', '{{name}}', 'providerURL'); }">
                                <i class="bi bi-trash me-1"></i> Delete
                            </button>
                        </div>
                    </form>

                    {{/apiProviders}}
                </div>
            </div>
        </div>
    </div>
</section>