{% extends "base.html" %}

{% block title %}S3 Configuration - HKFC Men's C Team{% endblock %}

{% block extra_head %}
<style>
    .config-section {
        background-color: #f8f9fa;
        border-radius: 0.375rem;
        padding: 1rem;
        margin-bottom: 1rem;
    }
    .help-text {
        font-size: 0.875rem;
        color: #6c757d;
    }
</style>
{% endblock %}

{% block content %}
                
                {% with messages = get_flashed_messages(with_categories=true) %}
                    {% if messages %}
                        {% for category, message in messages %}
                            <div class="alert alert-{{ 'danger' if category == 'error' else 'success' }} alert-dismissible fade show" role="alert">
                                {{ message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        {% endfor %}
                    {% endif %}
                {% endwith %}
                
                <form method="POST">
                    {{ form.hidden_tag() }}
                    
                    <!-- Enable S3 Section -->
                    <div class="config-section">
                        <h4>Storage Configuration</h4>
                        <div class="form-check form-switch mb-3">
                            {{ form.enable_s3(class="form-check-input") }}
                            {{ form.enable_s3.label(class="form-check-label") }}
                            <div class="help-text">When enabled, logos and assets will be served from S3. When disabled, local static files will be used.</div>
                        </div>
                        
                        <div class="form-check form-switch mb-3">
                            {{ form.fallback_to_static(class="form-check-input") }}
                            {{ form.fallback_to_static.label(class="form-check-label") }}
                            <div class="help-text">If S3 is unavailable, fallback to local static files.</div>
                        </div>
                    </div>
                    
                    <!-- Storage Provider Section -->
                    <div class="config-section">
                        <h4>Storage Provider</h4>
                        <div class="mb-3">
                            {{ form.storage_provider.label(class="form-label") }}
                            {{ form.storage_provider(class="form-select") }}
                            <div class="help-text">Choose between AWS S3 or MinIO (self-hosted S3-compatible storage).</div>
                        </div>
                    </div>
                    
                    <!-- Credentials Section -->
                    <div class="config-section">
                        <h4>Access Credentials</h4>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    {{ form.aws_access_key_id.label(class="form-label") }}
                                    {{ form.aws_access_key_id(class="form-control", placeholder="AKIA...") }}
                                    <div class="help-text">Your Access Key ID (AWS or MinIO)</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    {{ form.aws_secret_access_key.label(class="form-label") }}
                                    {{ form.aws_secret_access_key(class="form-control", placeholder="Enter secret key") }}
                                    <div class="help-text">Your Secret Access Key (AWS or MinIO)</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    {{ form.aws_region.label(class="form-label") }}
                                    {{ form.aws_region(class="form-control") }}
                                    <div class="help-text">Region (AWS) or leave default for MinIO</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- MinIO Configuration Section -->
                    <div class="config-section" id="minio-config" style="display: none;">
                        <h4>MinIO Configuration</h4>
                        <div class="row">
                            <div class="col-md-8">
                                <div class="mb-3">
                                    {{ form.minio_endpoint.label(class="form-label") }}
                                    {{ form.minio_endpoint(class="form-control", placeholder="minio.example.com:9000") }}
                                    <div class="help-text">MinIO server endpoint (hostname:port)</div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <div class="form-check form-switch">
                                        {{ form.minio_use_ssl(class="form-check-input") }}
                                        {{ form.minio_use_ssl.label(class="form-check-label") }}
                                    </div>
                                    <div class="help-text">Enable SSL/TLS for MinIO connection</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- S3 Bucket Configuration -->
                    <div class="config-section">
                        <h4>S3 Bucket Configuration</h4>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    {{ form.bucket_name.label(class="form-label") }}
                                    {{ form.bucket_name(class="form-control", placeholder="my-motm-assets") }}
                                    <div class="help-text">Name of your S3 bucket</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    {{ form.bucket_prefix.label(class="form-label") }}
                                    {{ form.bucket_prefix(class="form-control") }}
                                    <div class="help-text">Prefix for objects in the bucket (e.g., motm-assets/)</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- URL Configuration -->
                    <div class="config-section">
                        <h4>URL Configuration</h4>
                        <div class="form-check form-switch mb-3">
                            {{ form.use_signed_urls(class="form-check-input") }}
                            {{ form.use_signed_urls.label(class="form-check-label") }}
                            <div class="help-text">Use signed URLs for secure access to private objects. If disabled, objects must be public.</div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    {{ form.signed_url_expiry.label(class="form-label") }}
                                    {{ form.signed_url_expiry(class="form-control") }}
                                    <div class="help-text">How long signed URLs remain valid (in seconds)</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Action Buttons -->
                    <div class="d-flex gap-2">
                        {{ form.test_connection(class="btn btn-info") }}
                        {{ form.save_config(class="btn btn-primary") }}
                        {{ form.cancel(class="btn btn-secondary") }}
                    </div>
                </form>
                
                <!-- Current Configuration Display -->
                <div class="config-section mt-4">
                    <h4>Current Configuration</h4>
                    <div class="row">
                        <div class="col-md-6">
                            <strong>S3 Status:</strong> 
                            <span class="badge bg-{{ 'success' if current_config.get('enable_s3') else 'secondary' }}">
                                {{ 'Enabled' if current_config.get('enable_s3') else 'Disabled' }}
                            </span>
                        </div>
                        <div class="col-md-6">
                            <strong>Bucket:</strong> {{ current_config.get('bucket_name', 'Not configured') }}
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-md-6">
                            <strong>Region:</strong> {{ current_config.get('aws_region', 'Not configured') }}
                        </div>
                        <div class="col-md-6">
                            <strong>Signed URLs:</strong> 
                            <span class="badge bg-{{ 'success' if current_config.get('use_signed_urls') else 'secondary' }}">
                                {{ 'Enabled' if current_config.get('use_signed_urls') else 'Disabled' }}
                            </span>
                        </div>
                    </div>
                </div>
                
                <!-- Help Section -->
                <div class="config-section mt-4">
                    <h4>Setup Instructions</h4>
                    <ol>
                        <li><strong>Create S3 Bucket:</strong> Create an S3 bucket in your AWS account</li>
                        <li><strong>Set Permissions:</strong> Configure bucket permissions for your access key</li>
                        <li><strong>Upload Assets:</strong> Upload your logos and assets to the bucket</li>
                        <li><strong>Configure Here:</strong> Enter your credentials and bucket details above</li>
                        <li><strong>Test Connection:</strong> Use the "Test S3 Connection" button to verify</li>
                        <li><strong>Save Configuration:</strong> Save your settings to enable S3 storage</li>
                    </ol>
                    
                    <div class="alert alert-info">
                        <h6>Asset Organization</h6>
                        <p>Organize your assets in the S3 bucket as follows:</p>
                        <ul class="mb-0">
                            <li><code>assets/images/clubs/</code> - Club logos</li>
                            <li><code>assets/images/</code> - General images</li>
                            <li><code>assets/logos/</code> - Alternative logo location</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // Show/hide MinIO configuration based on storage provider selection
        function toggleMinioConfig() {
            const storageProvider = document.getElementById('storage_provider');
            const minioConfig = document.getElementById('minio-config');
            
            if (storageProvider.value === 'minio') {
                minioConfig.style.display = 'block';
            } else {
                minioConfig.style.display = 'none';
            }
        }
        
        // Initialize on page load
        document.addEventListener('DOMContentLoaded', function() {
            toggleMinioConfig();
            
            // Add event listener for storage provider changes
            const storageProviderSelect = document.getElementById('storage_provider');
            if (storageProviderSelect) {
                storageProviderSelect.addEventListener('change', toggleMinioConfig);
            }
        });
    </script>
{% endblock %}