{% extends '@kohinos/admin/boffice/layout.html.twig' %}

{% set block_title = 'SAV — Notes de version' %}

{% block boffice_content %}
<div class="boffice-changelog-container">

    {# ── Tab navigation ── #}
    <ul class="nav nav-tabs boffice-cl-tabs" id="bofficeChangelogTabs" style="margin-bottom:0;border-bottom:none;">
        <li class="active">
            <a href="#cl-user" data-toggle="tab">
                <i class="fa fa-users"></i> Notes utilisateurs
                <span class="badge" style="background:#28a745;margin-left:5px;font-size:10px;">Fonctionnel</span>
            </a>
        </li>
        <li>
            <a href="#cl-tech" data-toggle="tab">
                <i class="fa fa-code"></i> Notes techniques
                <span class="badge" style="background:#337ab7;margin-left:5px;font-size:10px;">Dev</span>
            </a>
        </li>
    </ul>

    <div class="tab-content boffice-cl-tab-content">

        {# ── User changelog ── #}
        <div class="tab-pane active" id="cl-user">
            <div class="boffice-cl-toolbar">
                <div class="boffice-cl-search-wrap">
                    <i class="fa fa-search"></i>
                    <input type="text" id="cl-user-search" class="boffice-cl-search" placeholder="Rechercher dans les nouveautés...">
                    <button type="button" class="boffice-cl-search-clear" id="cl-user-search-clear" style="display:none;">&times;</button>
                </div>
                <span class="boffice-cl-meta">
                    <i class="fa fa-file-text-o"></i> CHANGELOG_USER.md
                </span>
            </div>
            <div id="cl-user-no-results" class="boffice-cl-no-results" style="display:none;">
                <i class="fa fa-search fa-2x"></i><br>Aucun résultat pour cette recherche.
            </div>
            <div class="boffice-cl-body markdown-body" id="cl-user-body">
                {# Raw Markdown passed to JS for rendering — not displayed directly #}
                <script id="cl-user-raw" type="text/plain">{{ user_changelog|e }}</script>
            </div>
        </div>

        {# ── Technical changelog ── #}
        <div class="tab-pane" id="cl-tech">
            <div class="boffice-cl-toolbar">
                <div class="boffice-cl-search-wrap">
                    <i class="fa fa-search"></i>
                    <input type="text" id="cl-tech-search" class="boffice-cl-search" placeholder="Rechercher dans le changelog technique...">
                    <button type="button" class="boffice-cl-search-clear" id="cl-tech-search-clear" style="display:none;">&times;</button>
                </div>
                <span class="boffice-cl-meta">
                    <i class="fa fa-file-code-o"></i> CHANGELOG.md
                </span>
            </div>
            <div id="cl-tech-no-results" class="boffice-cl-no-results" style="display:none;">
                <i class="fa fa-search fa-2x"></i><br>Aucun résultat pour cette recherche.
            </div>
            <div class="boffice-cl-body markdown-body" id="cl-tech-body">
                <script id="cl-tech-raw" type="text/plain">{{ tech_changelog|e }}</script>
            </div>
        </div>

    </div>{# /.tab-content #}
</div>{# /.boffice-changelog-container #}
{% endblock %}

{% block boffice_css %}{% endblock %}

{% block boffice_js %}
{{ encore_entry_script_tags('boffice-changelog') }}
{% endblock %}