{% extends 'base.html' %}
{% load static %}

{% block title %}
    {% if workspace %}Editar Workspace{% else %}Novo Workspace{% endif %} - {{ block.super }}
{% endblock %}

{% block breadcrumb %}
<nav aria-label="breadcrumb" class="bg-light">
    <div class="container-fluid">
        <ol class="breadcrumb mb-0 py-2">
            <li class="breadcrumb-item"><a href="{% url 'home' %}">Início</a></li>
            <li class="breadcrumb-item"><a href="{% url 'workspace:list' %}">Workspaces</a></li>
            <li class="breadcrumb-item active" aria-current="page">
                {% if workspace %}Editar{% else %}Novo{% endif %}
            </li>
        </ol>
    </div>
</nav>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card shadow">
            <div class="card-header">
                <h3 class="mb-0">
                    <i class="bi bi-house"></i>
                    {% if workspace %}Editar Workspace{% else %}Novo Workspace{% endif %}
                </h3>
            </div>
            <div class="card-body">
                <form method="post" novalidate>
                    {% csrf_token %}
                    
                    <div class="row">
                        <div class="col-md-8">
                            <div class="mb-3">
                                <label for="{{ form.nome.id_for_label }}" class="form-label">
                                    {{ form.nome.label }}
                                </label>
                                {{ form.nome }}
                                {% if form.nome.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.nome.errors %}
                                            {{ error }}
                                        {% endfor %}
                                    </div>
                                {% endif %}
                                {% if form.nome.help_text %}
                                    <div class="form-text">{{ form.nome.help_text }}</div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="{{ form.cor.id_for_label }}" class="form-label">
                                    {{ form.cor.label }}
                                </label>
                                <div class="input-group">
                                    {{ form.cor }}
                                    <span class="input-group-text" id="color-preview" 
                                          style="background-color: {{ form.cor.value|default:'#007bff' }}; width: 50px;">
                                    </span>
                                </div>
                                {% if form.cor.errors %}
                                    <div class="invalid-feedback d-block">
                                        {% for error in form.cor.errors %}
                                            {{ error }}
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="{{ form.cliente.id_for_label }}" class="form-label">
                            {{ form.cliente.label }}
                        </label>
                        {{ form.cliente }}
                        {% if form.cliente.errors %}
                            <div class="invalid-feedback d-block">
                                {% for error in form.cliente.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                        {% if form.cliente.help_text %}
                            <div class="form-text">{{ form.cliente.help_text }}</div>
                        {% endif %}
                    </div>
                    
                    <div class="mb-3">
                        <label for="{{ form.descricao.id_for_label }}" class="form-label">
                            {{ form.descricao.label }}
                        </label>
                        {{ form.descricao }}
                        {% if form.descricao.errors %}
                            <div class="invalid-feedback d-block">
                                {% for error in form.descricao.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                        {% if form.descricao.help_text %}
                            <div class="form-text">{{ form.descricao.help_text }}</div>
                        {% endif %}
                    </div>
                    
                    <div class="mb-3">
                        <div class="form-check">
                            {{ form.ativo }}
                            <label class="form-check-label" for="{{ form.ativo.id_for_label }}">
                                {{ form.ativo.label }}
                            </label>
                            {% if form.ativo.errors %}
                                <div class="invalid-feedback d-block">
                                    {% for error in form.ativo.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-between">
                        <a href="{% url 'workspace:list' %}" class="btn btn-secondary">
                            <i class="bi bi-arrow-left"></i> Voltar
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-circle"></i>
                            {% if workspace %}Salvar Alterações{% else %}Criar Workspace{% endif %}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Preview da cor
    const colorInput = document.getElementById('{{ form.cor.id_for_label }}');
    const colorPreview = document.getElementById('color-preview');
    
    function updateColorPreview() {
        colorPreview.style.backgroundColor = colorInput.value;
    }
    
    colorInput.addEventListener('input', updateColorPreview);
    colorInput.addEventListener('change', updateColorPreview);
    
    // Inicializar preview
    updateColorPreview();
    
    // Adicionar classes Bootstrap aos campos
    const formFields = document.querySelectorAll('input, select, textarea');
    formFields.forEach(field => {
        if (field.type !== 'checkbox' && field.type !== 'radio') {
            field.classList.add('form-control');
        }
    });
    
    // Adicionar classe ao textarea
    const textarea = document.querySelector('textarea');
    if (textarea) {
        textarea.classList.add('form-control');
        textarea.rows = 4;
    }
});
</script>
{% endblock %}