{% extends "base.html" %}

{% block title %}AutoML Engine{% endblock %}

{% block content %}
<div class="container" style="padding-top: 24px;">
    <div class="dashboard-header">
        <div>
            <h1 class="dashboard-title">🤖 AutoML Engine</h1>
            <p style="color: var(--text-muted); margin-top: 4px;">Automatic machine learning with model leaderboard</p>
        </div>
    </div>

    {% if not has_data %}
    <div class="no-data">
        <div class="no-data-icon">🤖</div>
        <div class="no-data-title">No Dataset Loaded</div>
        <p class="no-data-desc">Upload a dataset to train automatic machine learning models.</p>
        <a href="/upload" class="btn-liquid"><i class="fas fa-cloud-upload-alt"></i> Upload Dataset</a>
    </div>
    {% else %}

    <div class="glass-card" style="margin-bottom: 24px;">
        <h3 style="margin-bottom: 20px;"><i class="fas fa-bullseye" style="margin-right: 8px;"></i> Select Target Column</h3>

        <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: end;">
            <div class="form-group">
                <label class="form-label">Target Column (what to predict)</label>
                <select class="form-select" id="target-column">
                    {% for col in columns %}
                    <option value="{{ col }}" {% if col in suggestions %}selected{% endif %}>{{ col }}</option>
                    {% endfor %}
                </select>
                {% if suggestions %}
                <p style="color: var(--text-muted); font-size: 0.8rem; margin-top: 8px;">
                    <i class="fas fa-star" style="color: var(--accent);"></i> Suggested: {{ suggestions | join(', ') }}
                </p>
                {% endif %}
            </div>
            <button class="btn-liquid" id="train-models-btn" style="height: fit-content;">
                <i class="fas fa-rocket"></i> Train Models
            </button>
        </div>
    </div>

    <div id="automl-results" style="display: none;"></div>
    {% endif %}
</div>
{% endblock %}