{% extends "base.html" %}

{% block title %}Configuration - VidAI{% endblock %}

{% block head %}
<style>
    .config-container { max-width: 800px; margin: 2rem auto; background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
    .config-title { color: #333; text-align: center; margin-bottom: 2rem; font-size: 2rem; font-weight: 600; }
    .config-form { margin-bottom: 2rem; }
    .form-group { margin-bottom: 1.5rem; }
    .form-group label { display: block; margin-bottom: 0.5rem; color: #374151; font-weight: 500; }
    .form-group select { width: 100%; padding: 0.75rem; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 1rem; }
    .form-group select:focus { outline: none; border-color: #667eea; }
    .btn-submit { width: 100%; padding: 0.75rem; background: #667eea; color: white; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; }
    .btn-submit:hover { background: #5a67d8; }
</style>
{% endblock %}

{% block content %}
<div class="config-container">
    <h1 class="config-title">Configuration</h1>
    <form method="post" class="config-form">
        <div class="form-group">
            <label for="analysis_backend">Analysis Backend:</label>
            <select name="analysis_backend" id="analysis_backend">
                <option value="cuda" {% if current_config.get('analysis_backend') == 'cuda' %}selected{% endif %}>CUDA</option>
                <option value="rocm" {% if current_config.get('analysis_backend') == 'rocm' %}selected{% endif %}>ROCm</option>
            </select>
        </div>
        <div class="form-group">
            <label for="training_backend">Training Backend:</label>
            <select name="training_backend" id="training_backend">
                <option value="cuda" {% if current_config.get('training_backend') == 'cuda' %}selected{% endif %}>CUDA</option>
                <option value="rocm" {% if current_config.get('training_backend') == 'rocm' %}selected{% endif %}>ROCm</option>
            </select>
        </div>
        <button type="submit" class="btn-submit">Save Configuration</button>
    </form>
</div>
{% endblock %}