{% extends "dashboard/base.html" %}

{% block page_title %}
    {% if action == 'create' %}Nuovo Progetto{% else %}Modifica Progetto{% endif %}
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-body">
                <form method="POST">
                    <div class="mb-3">
                        <label for="title" class="form-label">Titolo *</label>
                        <input type="text" class="form-control" id="title" name="title" 
                               value="{{ project.title if project else '' }}" required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="description" class="form-label">Descrizione Breve</label>
                        <textarea class="form-control" id="description" name="description" rows="3" 
                                  maxlength="1000">{{ project.description if project else '' }}</textarea>
                        <div class="form-text">Massimo 1000 caratteri</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="content" class="form-label">Contenuto Completo</label>
                        <textarea class="form-control" id="content" name="content" rows="10">{{ project.content if project else '' }}</textarea>
                        <div class="form-text">Supporta HTML di base</div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="github_url" class="form-label">URL GitHub</label>
                                <input type="url" class="form-control" id="github_url" name="github_url" 
                                       value="{{ project.github_url if project else '' }}" 
                                       placeholder="https://github.com/username/repo">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="demo_url" class="form-label">URL Demo/Live</label>
                                <input type="url" class="form-control" id="demo_url" name="demo_url" 
                                       value="{{ project.demo_url if project else '' }}" 
                                       placeholder="https://example.com">
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="image_url" class="form-label">URL Immagine</label>
                        <input type="url" class="form-control" id="image_url" name="image_url" 
                               value="{{ project.image_url if project else '' }}" 
                               placeholder="https://example.com/image.jpg">
                    </div>
                    
                    <div class="mb-3">
                        <label for="technologies" class="form-label">Tecnologie</label>
                        <div class="row">
                            {% set common_techs = ['Python', 'JavaScript', 'HTML', 'CSS', 'React', 'Vue.js', 'Node.js', 'MySQL', 'PostgreSQL', 'MongoDB', 'Docker', 'Git', 'Bootstrap', 'jQuery'] %}
                            {% for tech in common_techs %}
                                <div class="col-md-3 col-sm-4 col-6">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="technologies" 
                                               value="{{ tech }}" id="tech_{{ loop.index }}"
                                               {% if project and tech in project.technologies %}checked{% endif %}>
                                        <label class="form-check-label" for="tech_{{ loop.index }}">
                                            {{ tech }}
                                        </label>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="category_id" class="form-label">Categoria</label>
                                <select class="form-select" id="category_id" name="category_id">
                                    <option value="">Seleziona categoria</option>
                                    {% for category in categories %}
                                        <option value="{{ category.id }}" 
                                                {% if project and project.category_id == category.id %}selected{% endif %}>
                                            {{ category.name }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="is_featured" name="is_featured" value="1"
                                   {% if project and project.is_featured %}checked{% endif %}>
                            <label class="form-check-label" for="is_featured">
                                Progetto in evidenza
                            </label>
                        </div>
                        
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="is_published" name="is_published" value="1"
                                   {% if not project or project.is_published %}checked{% endif %}>
                            <label class="form-check-label" for="is_published">
                                Pubblica progetto
                            </label>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-between">
                        <a href="{{ url_for('dashboard.projects') }}" class="btn btn-secondary">
                            <i class="bi bi-arrow-left"></i> Annulla
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check"></i> 
                            {% if action == 'create' %}Crea Progetto{% else %}Aggiorna Progetto{% endif %}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <div class="card">
            <div class="card-body">
                <h6 class="card-title">Suggerimenti</h6>
                <ul class="list-unstyled small">
                    <li><i class="bi bi-lightbulb text-warning"></i> Un titolo chiaro e descrittivo attira più attenzione</li>
                    <li><i class="bi bi-lightbulb text-warning"></i> La descrizione breve appare nelle anteprime</li>
                    <li><i class="bi bi-lightbulb text-warning"></i> Usa il contenuto completo per dettagli tecnici</li>
                    <li><i class="bi bi-lightbulb text-warning"></i> I progetti "featured" appaiono in homepage</li>
                </ul>
            </div>
        </div>
        
        {% if project and project.image_url %}
            <div class="card mt-3">
                <div class="card-body">
                    <h6 class="card-title">Anteprima Immagine</h6>
                    <img src="{{ project.image_url }}" class="img-fluid rounded" alt="Project preview">
                </div>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}