{% extends "base.html" %}

{% block title %}BrandKit — {{ workspace.name }}{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto py-6 px-4 sm:px-6 space-y-6">
    <div class="flex items-center justify-between pb-4 border-b border-stone-200">
        <div>
            <h1 class="text-2xl font-bold text-stone-900 tracking-tight">Diretrizes BrandKit</h1>
            <p class="text-sm text-stone-500 mt-1">Configurações de voz, tom e diretrizes de marca para a IA.</p>
        </div>
        <a href="{% url 'creative:create_panel' workspace_id=workspace.id %}"
           class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm text-stone-600 hover:text-stone-900 bg-stone-100 hover:bg-stone-200 rounded-lg transition-colors">
            &larr; Voltar ao Painel
        </a>
    </div>

    <div class="bg-white rounded-xl border border-stone-200 shadow-sm p-6">
        <form method="post" action="{% url 'creative:brand_kit' workspace_id=workspace.id %}" class="space-y-6">
            {% csrf_token %}
            <div>
                <label for="id_voice_tone" class="block text-sm font-semibold text-stone-800 mb-1">
                    Tom de Voz
                </label>
                <textarea id="id_voice_tone"
                          name="voice_tone"
                          rows="3"
                          {% if not can_manage_settings %}disabled{% endif %}
                          class="w-full rounded-lg border border-stone-300 p-3 text-sm focus:border-orange-500 focus:ring-1 focus:ring-orange-500 outline-none shadow-sm {% if not can_manage_settings %}bg-stone-50 text-stone-500 cursor-not-allowed{% endif %}">{{ brand_kit.voice_tone }}</textarea>
                <p class="text-xs text-stone-400 mt-1">Ex: Audaz, inovador e profissional. Evitar formalidades excessivas.</p>
            </div>

            <div>
                <label for="id_target_audience" class="block text-sm font-semibold text-stone-800 mb-1">
                    Público-Alvo
                </label>
                <textarea id="id_target_audience"
                          name="target_audience"
                          rows="3"
                          {% if not can_manage_settings %}disabled{% endif %}
                          class="w-full rounded-lg border border-stone-300 p-3 text-sm focus:border-orange-500 focus:ring-1 focus:ring-orange-500 outline-none shadow-sm {% if not can_manage_settings %}bg-stone-50 text-stone-500 cursor-not-allowed{% endif %}">{{ brand_kit.target_audience }}</textarea>
            </div>

            <div>
                <label for="id_default_first_comment" class="block text-sm font-semibold text-stone-800 mb-1">
                    Primeiro Comentário Padrão
                </label>
                <textarea id="id_default_first_comment"
                          name="default_first_comment"
                          rows="2"
                          {% if not can_manage_settings %}disabled{% endif %}
                          class="w-full rounded-lg border border-stone-300 p-3 text-sm focus:border-orange-500 focus:ring-1 focus:ring-orange-500 outline-none shadow-sm {% if not can_manage_settings %}bg-stone-50 text-stone-500 cursor-not-allowed{% endif %}">{{ brand_kit.default_first_comment }}</textarea>
            </div>

            {% if can_manage_settings %}
            <div class="pt-4 border-t border-stone-100 flex justify-end">
                <button type="submit"
                        class="px-5 py-2.5 bg-orange-600 hover:bg-orange-700 text-white text-sm font-semibold rounded-lg transition-colors shadow-sm cursor-pointer">
                    Salvar Alterações
                </button>
            </div>
            {% else %}
            <div class="rounded-lg bg-stone-50 p-4 border border-stone-200 text-xs text-stone-500">
                A edição do BrandKit requer a permissão de administrador <strong class="text-stone-700">manage_workspace_settings</strong>.
            </div>
            {% endif %}
        </form>
    </div>
</div>
{% endblock %}