{% extends 'admin/layout.html.twig' %}
{% block title %}{{ title }} — WTL{% endblock %}
{% block admin_body %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h2 mb-1">{{ title }}</h1>
        {% if document is defined %}<p class="text-secondary mb-0">Version actuelle : v{{ document.version }}</p>{% endif %}
    </div>
    <a class="btn btn-outline-secondary" href="{{ path('admin_library_index') }}">Retour</a>
</div>
<div class="card border-0 shadow-sm">
    <div class="card-body p-4">
        {{ form_start(form) }}
        <div class="row g-3">
            <div class="col-md-4">{{ form_row(form.code) }}</div>
            <div class="col-md-4">{{ form_row(form.type) }}</div>
            <div class="col-md-4">{{ form_row(form.name) }}</div>
            <div class="col-12">{{ form_row(form.description) }}</div>
            {% if form.file is defined %}<div class="col-12">{{ form_row(form.file) }}</div>{% endif %}
        </div>
        <div class="border rounded p-3 mt-4">
            <h2 class="h6">Disponibilité par projet</h2>
            <div class="row g-3 align-items-start">
                <div class="col-md-4">{{ form_row(form.globalAvailability) }}</div>
                <div class="col-md-8" id="projectAvailabilityBox">{{ form_row(form.availableProjects) }}</div>
            </div>
            <div class="small text-secondary">Par défaut, un document générique est global. Décochez cette option pour limiter sa disponibilité à un ou plusieurs projets.</div>
        </div>
        <div class="border rounded p-3 mt-4">
            <h2 class="h6">Droits de consultation</h2>
            <div class="row g-3">
                <div class="col-md-4">{{ form_row(form.public) }}</div>
                <div class="col-md-4">{{ form_row(form.press) }}</div>
                <div class="col-md-4">{{ form_row(form.admin) }}</div>
            </div>
            <div class="alert alert-warning py-2 mb-0 d-none" id="protectedNotice">
                Les devis, factures et conventions sont obligatoirement <strong>Admin uniquement</strong>. Cette règle est aussi imposée côté serveur.
            </div>
        </div>
        <div class="mt-4 d-flex gap-2">
            <button class="btn btn-dark">Enregistrer</button>
            <a class="btn btn-outline-secondary" href="{{ path('admin_library_index') }}">Annuler</a>
        </div>
        {{ form_end(form) }}
    </div>
</div>
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script>
document.addEventListener('DOMContentLoaded', () => {
    const type = document.getElementById('{{ form.type.vars.id }}');
    const pub = document.getElementById('{{ form.public.vars.id }}');
    const press = document.getElementById('{{ form.press.vars.id }}');
    const admin = document.getElementById('{{ form.admin.vars.id }}');
    const notice = document.getElementById('protectedNotice');
    const globalAvailability = document.getElementById('{{ form.globalAvailability.vars.id }}');
    const projectAvailabilityBox = document.getElementById('projectAvailabilityBox');
    const availableProjects = document.getElementById('{{ form.availableProjects.vars.id }}');
    const protectedTypes = {{ protectedTypes|json_encode|raw }};
    const refresh = () => {
        const locked = protectedTypes.includes(type.value);
        pub.disabled = locked;
        press.disabled = locked;
        admin.disabled = locked;
        if (locked) {
            pub.checked = false;
            press.checked = false;
            admin.checked = true;
            notice.classList.remove('d-none');
        } else {
            notice.classList.add('d-none');
        }
        const scopeLocked = locked || type.value === 'technical';
        if (scopeLocked) {
            globalAvailability.checked = false;
            globalAvailability.disabled = true;
            availableProjects.disabled = true;
            projectAvailabilityBox.classList.add('opacity-50');
        } else {
            globalAvailability.disabled = false;
            availableProjects.disabled = globalAvailability.checked;
            projectAvailabilityBox.classList.toggle('opacity-50', globalAvailability.checked);
        }
    };
    type.addEventListener('change', refresh);
    globalAvailability.addEventListener('change', refresh);
    refresh();
});
</script>
{% endblock %}