{% extends 'base.html' %}

{% block content %}
    <div class="form-container">
        <div class="glass-card" style="padding: 2.5rem;">
            <h1 style="margin-bottom: 2rem;">
                {% if form.instance.pk %}Editar Proyecto{% else %}Nuevo Proyecto{% endif %}
            </h1>

            <form method="post">
                {% csrf_token %}
                
                <div class="form-group">
                    <label for="{{ form.name.id_for_label }}">Nombre del Proyecto</label>
                    {{ form.name }}
                    {% if form.name.errors %}
                        <div style="color: var(--danger); font-size: 0.8rem; margin-top: 0.25rem;">{{ form.name.errors }}</div>
                    {% endif %}
                </div>

                <div class="form-group">
                    <label for="{{ form.description.id_for_label }}">Descripción</label>
                    {{ form.description }}
                    {% if form.description.errors %}
                        <div style="color: var(--danger); font-size: 0.8rem; margin-top: 0.25rem;">{{ form.description.errors }}</div>
                    {% endif %}
                </div>

                <div class="form-group">
                    <label for="{{ form.manager.id_for_label }}">Encargado / Responsable del Proyecto</label>
                    {{ form.manager }}
                    {% if form.manager.errors %}
                        <div style="color: var(--danger); font-size: 0.8rem; margin-top: 0.25rem;">{{ form.manager.errors }}</div>
                    {% endif %}
                </div>

                <div style="display: flex; gap: 1rem; margin-top: 2rem;">
                    <button type="submit" class="btn btn-primary">Guardar</button>
                    <a href="{% url 'gestion_panel' %}" class="btn btn-outline">Cancelar</a>
                </div>
            </form>
        </div>
    </div>
    
    <script>
        // Apply form-control class to all inputs
        document.querySelectorAll('input, select, textarea').forEach(el => {
            el.classList.add('form-control');
        });
    </script>
{% endblock %}