{% extends "base.html" %}

{% block title %}Train Model - VidAI{% endblock %}

{% block head %}
<style>
    .container { max-width: 800px; margin: 2rem auto; padding: 0 2rem; }
    .training-form { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
    .form-group { margin-bottom: 1.5rem; }
    .form-group label { display: block; margin-bottom: 0.5rem; color: #374151; font-weight: 500; }
    .form-group input, .form-group textarea { width: 100%; padding: 0.75rem; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 1rem; }
    .form-group input:focus, .form-group textarea:focus { outline: none; border-color: #667eea; }
    .form-group textarea { resize: vertical; min-height: 100px; }
    .btn { padding: 0.75rem 2rem; background: #667eea; color: white; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; }
    .btn:hover { background: #5a67d8; }
    .result { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-top: 2rem; }
    .alert { padding: 0.75rem; border-radius: 8px; margin-bottom: 1rem; }
    .alert-error { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
    .alert-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
    .tokens { background: #f0f9ff; padding: 1rem; border-radius: 8px; margin-bottom: 1rem; border-left: 4px solid #667eea; }
    .warning { background: #fef3c7; padding: 1rem; border-radius: 8px; margin-bottom: 1rem; border-left: 4px solid #d97706; }
</style>
{% endblock %}

{% block content %}
<div class="container">
        <div class="tokens">
            <strong>Available Tokens:</strong> {{ tokens }} (Training costs ~100 tokens)
        </div>

        <div class="warning">
            <strong><i class="fas fa-exclamation-triangle"></i> Training Notice:</strong> Model training requires significant computational resources and may take several hours to complete. Ensure you have sufficient tokens and system resources.
        </div>

        <div class="training-form">
            <h2 style="margin-bottom: 1.5rem; color: #1e293b;"><i class="fas fa-graduation-cap"></i> Train Custom Model</h2>

            {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ 'error' if category == 'error' else 'success' }}">{{ message }}</div>
                {% endfor %}
            {% endif %}
            {% endwith %}

            <form method="post" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="output_model">Output Model Name</label>
                    <input type="text" id="output_model" name="output_model" value="MyCustomModel" placeholder="Name for your trained model">
                    <small style="color: #6b7280;">Choose a unique name for your custom model</small>
                </div>

                <div class="form-group">
                    <label for="data">Upload Training Data</label>
                    <input type="file" id="data" name="data" accept=".zip,image/*,video/*">
                    <small style="color: #6b7280;">Upload a ZIP file containing training images/videos, or individual media files</small>
                </div>

                <div class="form-group">
                    <label for="train_dir">Or Training Directory Path</label>
                    <input type="text" id="train_dir" name="train_dir" placeholder="/path/to/training/data">
                    <small style="color: #6b7280;">Path to local directory containing training data</small>
                </div>

                <div class="form-group">
                    <label for="description">Training Description</label>
                    <textarea id="description" name="description" placeholder="Describe what you want the model to learn...">Train a custom model to recognize specific objects, scenes, or patterns in images and videos.</textarea>
                    <small style="color: #6b7280;">Provide context about what the model should learn from the training data</small>
                </div>

                <button type="submit" class="btn"><i class="fas fa-rocket"></i> Start Training</button>
            </form>
        </div>

        {% if message %}
        <div class="result">
            <h3 style="margin-bottom: 1rem; color: #1e293b;"><i class="fas fa-check-circle"></i> Training Status</h3>
            <div style="background: #f8fafc; padding: 1rem; border-radius: 8px; border-left: 4px solid #10b981;">
                <p style="margin: 0;">{{ message }}</p>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}