{% extends "v3/base.html" %}

{% block content %}
<!-- Feuille de style isolee des artefacts (variables heritees de v3.css) -->
<link rel="stylesheet" href="{{ url_for('static', filename='artifacts.css') }}?v={{ asset_v }}">

<div class="art-wrap">
    <!-- Colonne gauche : liste artefacts + templates -->
    <aside class="art-list-col">
        <div class="art-tabs">
            <button class="art-tab active" id="art-tab-docs" type="button">Artefacts</button>
            <button class="art-tab" id="art-tab-tpls" type="button">Templates</button>
        </div>

        <!-- Panneau Artefacts -->
        <div class="art-panel" id="art-panel-docs">
            <div class="art-list-head">
                <button class="btn btn-primary btn-sm" id="art-new-btn" type="button">+ Nouvel artefact</button>
            </div>
            <div class="art-list" id="art-list">
                <div class="art-empty" id="art-list-empty">Aucun artefact.</div>
            </div>
        </div>

        <!-- Panneau Templates -->
        <div class="art-panel" id="art-panel-tpls" style="display:none;">
            <div class="art-list-head">
                <label class="btn btn-secondary btn-sm" for="art-tpl-import">+ Importer (.docx/.pptx/.html)
                    <input type="file" id="art-tpl-import" accept=".docx,.pptx,.html,.htm" hidden></label>
            </div>
            <div class="art-list" id="art-tpl-list">
                <div class="art-empty" id="art-tpl-empty">Aucun template.</div>
            </div>
        </div>
    </aside>

    <!-- Colonne droite : detail -->
    <section class="art-main" id="art-main">
        <!-- Accueil -->
        <div class="art-welcome" id="art-welcome">
            <h2>Artefacts</h2>
            <p>
                Un artefact = un document genere (rapport, devis...) que vous pouvez
                sauvegarder, editer, exporter (PDF / Word / PowerPoint) et reutiliser
                comme template. Tout reste 100% local.
            </p>
            <p class="art-welcome-hint">
                Selectionnez un artefact a gauche, creez-en un nouveau, ou importez un
                template a remplir.
            </p>
        </div>

        <!-- Vue artefact -->
        <div class="art-view" id="art-view" style="display:none;">
            <header class="art-view-head">
                <div class="art-view-title">
                    <input type="text" id="art-title" class="art-title-input" placeholder="Titre">
                    <span class="art-meta" id="art-meta"></span>
                </div>
                <div class="art-view-actions">
                    <select id="art-format" class="art-format-select" title="Format du contenu">
                        <option value="markdown">Markdown</option>
                        <option value="html">HTML</option>
                    </select>
                    <button class="btn btn-secondary btn-sm" id="art-save-btn" type="button">Enregistrer</button>
                    <button class="btn btn-secondary btn-sm" id="art-promote-btn" type="button">En template</button>
                    <button class="btn btn-danger btn-sm" id="art-delete-btn" type="button">Supprimer</button>
                </div>
            </header>

            <div class="art-export-bar">
                <span class="art-export-label">Exporter :</span>
                <button class="btn btn-ghost btn-sm" data-export="pdf" type="button">PDF</button>
                <button class="btn btn-ghost btn-sm" data-export="docx" type="button">Word</button>
                <button class="btn btn-ghost btn-sm" data-export="pptx" type="button">PowerPoint</button>
                <button class="btn btn-ghost btn-sm" data-export="html" type="button">HTML</button>
                <span class="art-export-state" id="art-export-state" aria-live="polite"></span>
            </div>

            <div class="art-editor-grid">
                <div class="art-editor-col">
                    <label class="art-field-label" for="art-content">Contenu</label>
                    <textarea id="art-content" class="art-content-area" spellcheck="false"
                              placeholder="Contenu de l'artefact (markdown ou HTML)."></textarea>
                </div>
                <div class="art-preview-col">
                    <label class="art-field-label">Apercu</label>
                    <div class="art-preview" id="art-preview"></div>
                </div>
            </div>
        </div>

        <!-- Vue template -->
        <div class="art-tpl-view" id="art-tpl-view" style="display:none;">
            <header class="art-view-head">
                <div class="art-view-title">
                    <h2 id="art-tpl-name">Template</h2>
                    <span class="art-meta" id="art-tpl-meta"></span>
                </div>
                <div class="art-view-actions">
                    <button class="btn btn-danger btn-sm" id="art-tpl-delete-btn" type="button">Supprimer</button>
                </div>
            </header>
            <div class="art-card">
                <div class="art-card-title">Champs a remplir</div>
                <form id="art-tpl-form" class="art-tpl-form">
                    <div id="art-tpl-fields"><span class="art-empty">Aucun placeholder detecte.</span></div>
                    <div class="art-tpl-actions">
                        <button class="btn btn-primary btn-sm" id="art-tpl-apply-btn" type="submit">
                            Generer un artefact
                        </button>
                        <span class="art-export-state" id="art-tpl-state" aria-live="polite"></span>
                    </div>
                </form>
            </div>
        </div>
    </section>
</div>
{% endblock %}

{% block scripts %}
<!-- Libs vendorisees en local (static/chat-vendor/) : rendu markdown securise
     (marked -> DOMPurify). Reutilise les memes que le Chat (pas de CDN). -->
<script src="{{ url_for('static', filename='chat-vendor/marked.min.js') }}?v={{ asset_v }}"></script>
<script src="{{ url_for('static', filename='chat-vendor/purify.min.js') }}?v={{ asset_v }}"></script>
<script src="{{ url_for('static', filename='artifacts.js') }}?v={{ asset_v }}"></script>
{% endblock %}