{% extends "base.html" %}

{% block title %}Configuration - SEREACT Web Client{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-cog"></i> API Configuration
                </h5>
            </div>
            <div class="card-body">
                <form method="POST">
                    <div class="mb-3">
                        <label for="api_base_url" class="form-label">
                            <i class="fas fa-link"></i> API Base URL
                        </label>
                        <input type="url" class="form-control" id="api_base_url" name="api_base_url" 
                               value="{{ api_base_url }}" placeholder="http://localhost:8000" required>
                        <div class="form-text">
                            The base URL of your SEREACT API server (without /api/v1)
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="api_key" class="form-label">
                            <i class="fas fa-key"></i> API Key
                        </label>
                        <div class="input-group">
                            <input type="password" class="form-control" id="api_key" name="api_key" 
                                   value="{{ api_key if api_key else '' }}" placeholder="Your API key">
                            <button class="btn btn-outline-secondary" type="button" id="toggleApiKey">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                        <div class="form-text">
                            Your SEREACT API key for authentication
                        </div>
                    </div>

                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <a href="{{ url_for('index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Save Configuration
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="fas fa-info-circle"></i> Configuration Help
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6><i class="fas fa-server"></i> API Base URL</h6>
                        <p class="small">
                            This should point to your running SEREACT API server. Common examples:
                        </p>
                        <ul class="small">
                            <li><code>http://localhost:8000</code> - Local development</li>
                            <li><code>https://your-api.example.com</code> - Production server</li>
                            <li><code>http://192.168.1.100:8000</code> - Network server</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h6><i class="fas fa-key"></i> API Key</h6>
                        <p class="small">
                            You can obtain an API key by:
                        </p>
                        <ul class="small">
                            <li>Using the <a href="{{ url_for('bootstrap') }}">Bootstrap</a> process for initial setup</li>
                            <li>Creating one through the API Keys management page</li>
                            <li>Having an admin create one for you</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        {% if api_key %}
        <div class="card mt-4">
            <div class="card-header bg-success text-white">
                <h6 class="mb-0">
                    <i class="fas fa-check-circle"></i> Connection Test
                </h6>
            </div>
            <div class="card-body">
                <p class="mb-2">
                    <i class="fas fa-info-circle text-info"></i> 
                    Configuration appears to be set. You can test the connection by trying to access any of the management pages.
                </p>
                <div class="btn-group" role="group">
                    <a href="{{ url_for('teams') }}" class="btn btn-outline-primary btn-sm">
                        <i class="fas fa-users"></i> Test Teams
                    </a>
                    <a href="{{ url_for('users') }}" class="btn btn-outline-primary btn-sm">
                        <i class="fas fa-user"></i> Test Users
                    </a>
                    <a href="{{ url_for('images') }}" class="btn btn-outline-primary btn-sm">
                        <i class="fas fa-images"></i> Test Images
                    </a>
                </div>
            </div>
        </div>
        {% else %}
        <div class="card mt-4">
            <div class="card-header bg-warning text-dark">
                <h6 class="mb-0">
                    <i class="fas fa-exclamation-triangle"></i> No API Key Set
                </h6>
            </div>
            <div class="card-body">
                <p class="mb-2">
                    You need to set an API key to use this client. If this is your first time:
                </p>
                <a href="{{ url_for('bootstrap') }}" class="btn btn-warning">
                    <i class="fas fa-rocket"></i> Start with Bootstrap
                </a>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.getElementById('toggleApiKey').addEventListener('click', function() {
    const apiKeyInput = document.getElementById('api_key');
    const icon = this.querySelector('i');
    
    if (apiKeyInput.type === 'password') {
        apiKeyInput.type = 'text';
        icon.className = 'fas fa-eye-slash';
    } else {
        apiKeyInput.type = 'password';
        icon.className = 'fas fa-eye';
    }
});
</script>
{% endblock %}