{% extends 'admin/base_admin.html.twig' %}
{% block title %}Réalisation{% endblock %}
{% block breadcrumb %}Réalisations / {{ realisation.id ? 'Édition' : 'Nouvelle' }}{% endblock %}
{% block content %}
{% set shot = realisation.screenshot %}
{% set shotUrl = shot ? (shot.webpPath ? '/uploads/' ~ shot.webpPath : '/uploads/' ~ shot.path) : '' %}
<form method="post">
    <div class="head-row">
        <h1 class="page-title" style="font-size:24px">{{ realisation.id ? 'Éditer' : 'Nouvelle réalisation' }}</h1>
        <div style="display:flex;gap:10px">
            <a class="btn btn--ghost" href="{{ path('admin_realisation_index') }}">Annuler</a>
            <button class="btn btn--primary" type="submit">Enregistrer</button>
        </div>
    </div>
    <div class="grid-2">
        <div class="card card--pad">
            <label class="field"><span>Titre</span><input type="text" name="title" value="{{ realisation.title }}" required></label>
            <div class="field">
                <span>Étiquettes</span>
                <div style="display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:6px">
                    {% for tag in tags %}
                        <label style="display:inline-flex;align-items:center;gap:6px;font-size:13.5px;white-space:nowrap">
                            <input type="checkbox" name="tags[]" value="{{ tag.id }}" style="width:auto"
                                   {{ realisation.tags.contains(tag) ? 'checked' }}>
                            {{ tag.name }}
                        </label>
                    {% else %}
                        <p class="page-sub" style="margin:0">Aucune étiquette pour l’instant — créez-en une ci-dessous.</p>
                    {% endfor %}
                </div>
            </div>
            <label class="field">
                <span>Nouvelles étiquettes</span>
                <input type="text" name="tags_nouveaux" value="" placeholder="Séparées par des virgules — créées à l’enregistrement">
            </label>
            <label class="field"><span>Secteur (affiché sous le titre)</span><input type="text" name="description" value="{{ realisation.description }}"></label>
            <label class="field"><span>URL du site</span><input type="url" name="url" value="{{ realisation.url }}"></label>
            <label class="field"><span>Technologies (séparées par des virgules)</span><input type="text" name="technologies" value="{{ realisation.technologies|join(', ') }}"></label>
            <div style="display:flex;gap:16px">
                <label class="field" style="flex:1"><span>Ordre d'affichage</span><input type="number" name="order_index" value="{{ realisation.orderIndex }}"></label>
                <label class="field" style="display:flex;align-items:center;gap:8px;margin-top:24px"><input type="checkbox" name="is_active" value="1" style="width:auto" {{ realisation.active ? 'checked' }}> Active</label>
            </div>
        </div>

        <div class="card card--pad" style="align-self:start">
            <div class="field"><span>Capture / visuel du projet</span></div>
            <div data-media-single
                 data-upload="{{ path('admin_media_upload') }}"
                 data-field="#screenshot_id"
                 data-remove="#screenshot_remove"
                 data-preview="#screenshot_preview">
                <div id="screenshot_preview" class="media-preview" style="{{ shotUrl ? '' : 'display:none' }}">
                    <img src="{{ shotUrl }}" alt="" style="width:100%;border-radius:10px;display:block">
                    <button type="button" class="pill-btn" data-media-clear style="color:var(--red);margin-top:8px">Retirer l’image</button>
                </div>
                <input type="file" class="filepond-single" name="file" accept="image/*">
            </div>
            <input type="hidden" name="screenshot_id" id="screenshot_id">
            <input type="hidden" name="screenshot_remove" id="screenshot_remove" value="0">
        </div>
    </div>
</form>
{% endblock %}