{% extends "base.html" %}

{% block title %}{{ 'Edit' if client else 'New' }} API Client - LSMC Atlas{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8 max-w-3xl">
    <div class="mb-6">
        <a href="/api-clients" class="text-blue-600 hover:text-blue-800">&larr; Back to API Clients</a>
    </div>

    <div class="bg-white shadow-md rounded-lg p-6">
        <h1 class="text-3xl font-bold mb-6">{{ 'Edit' if client else 'New' }} API Client</h1>

        <form method="POST" action="{{ '/api-clients/' + client.euid|string + '/edit' if client else '/api-clients/new' }}">
            <div class="space-y-6">
                {% if error %}
                <div class="alert alert-danger">{{ error }}</div>
                {% endif %}
                <!-- Client Name (only for new) -->
                {% if not client %}
                <div>
                    <label for="client_name" class="block text-sm font-medium text-gray-700 mb-1">
                        Client Name *
                    </label>
                    <input
                        type="text"
                        id="client_name"
                        name="client_name"
                        required
                        maxlength="100"
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                        placeholder="e.g., Production LIMS Integration"
                    />
                </div>

                <div>
                    <label for="site_id" class="block text-sm font-medium text-gray-700 mb-1">
                        Site{% if site_options|length > 1 %} *{% endif %}
                    </label>
                    <select
                        id="site_id"
                        name="site_id"
                        {% if site_options|length > 1 %}required{% endif %}
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    >
                        {% if site_options|length != 1 %}
                        <option value="">-- Select Site --</option>
                        {% endif %}
                        {% for site in site_options %}
                        <option value="{{ site.id }}" {% if selected_site_id and selected_site_id == site.id %}selected{% endif %}>
                            {{ site.name }}{% if site.site_code %} ({{ site.site_code }}){% endif %}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                {% endif %}

                <!-- Permissions -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        Permissions * <span class="text-xs text-gray-500">(select at least one)</span>
                    </label>
                    <div class="space-y-2 max-h-64 overflow-y-auto border border-gray-200 rounded p-3">
                        {% for perm in available_permissions %}
                        <label class="flex items-center">
                            <input
                                type="checkbox"
                                name="permissions"
                                value="{{ perm }}"
                                {% if revision and perm in revision.permissions %}checked{% endif %}
                                class="mr-2"
                            />
                            <span class="text-sm">{{ perm }}</span>
                        </label>
                        {% endfor %}
                    </div>
                </div>

                <!-- Allowed Endpoints -->
                <div>
                    <label for="allowed_endpoints" class="block text-sm font-medium text-gray-700 mb-1">
                        Allowed Endpoints (optional)
                        <span class="text-xs text-gray-500">One per line, e.g., /api/integrations/dewey/v1/storage-targets/resolve</span>
                    </label>
                    <textarea
                        id="allowed_endpoints"
                        name="allowed_endpoints"
                        rows="4"
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono text-sm"
                        placeholder="/api/integrations/dewey/v1/storage-targets/resolve&#10;/api/integrations/ursa/v1/return-targets/resolve&#10;/api/integrations/ursa/v1/fulfillment-items/{id}/analysis-results"
                    >{% if revision and revision.allowed_endpoints %}{{ revision.allowed_endpoints|join('\n') }}{% endif %}</textarea>
                </div>

                <!-- Rate Limit -->
                <div>
                    <label for="rate_limit_per_minute" class="block text-sm font-medium text-gray-700 mb-1">
                        Rate Limit (requests per minute)
                    </label>
                    <input
                        type="number"
                        id="rate_limit_per_minute"
                        name="rate_limit_per_minute"
                        value="{{ revision.rate_limit_per_minute if revision else '' }}"
                        min="1"
                        max="10000"
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                        placeholder="Leave empty for no limit"
                    />
                </div>

                <!-- IP Allowed List -->
                <div>
                    <label for="ip_allowed_list" class="block text-sm font-medium text-gray-700 mb-1">
                        IP Allowed List (optional)
                        <span class="text-xs text-gray-500">One IP per line</span>
                    </label>
                    <textarea
                        id="ip_allowed_list"
                        name="ip_allowed_list"
                        rows="3"
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono text-sm"
                        placeholder="192.168.1.1&#10;10.0.0.0/8"
                    >{% if revision and revision.ip_allowed_list %}{{ revision.ip_allowed_list|join('\n') }}{% endif %}</textarea>
                </div>

                <!-- Expires At -->
                <div>
                    <label for="expires_at" class="block text-sm font-medium text-gray-700 mb-1">
                        Expires At (optional)
                    </label>
                    <input
                        type="datetime-local"
                        id="expires_at"
                        name="expires_at"
                        value="{% if revision and revision.expires_at %}{{ revision.expires_at.strftime('%Y-%m-%dT%H:%M') }}{% endif %}"
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    />
                </div>

                <!-- Active Status (only for edit) -->
                {% if client %}
                <div>
                    <label class="flex items-center">
                        <input
                            type="checkbox"
                            name="is_active"
                            value="true"
                            {% if revision.is_active %}checked{% endif %}
                            class="mr-2"
                        />
                        <span class="text-sm font-medium text-gray-700">Active</span>
                    </label>
                </div>
                {% endif %}

                <!-- Note -->
                <div>
                    <label for="note" class="block text-sm font-medium text-gray-700 mb-1">
                        Note (optional)
                    </label>
                    <textarea
                        id="note"
                        name="note"
                        rows="3"
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                        placeholder="Add any notes about this API client..."
                    >{{ revision.note if revision else '' }}</textarea>
                </div>

                <!-- Submit -->
                <div class="flex gap-3">
                    <button
                        type="submit"
                        class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded font-medium"
                    >
                        {{ 'Update' if client else 'Create' }} Client
                    </button>
                    <a href="/api-clients" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-2 rounded font-medium inline-block">
                        Cancel
                    </a>
                </div>
            </div>
        </form>
    </div>
</div>
{% endblock %}