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

{% set block_title = 'Timeline' %}

{% block boffice_css %}
<link rel="stylesheet" href="{{ asset('css/vendor/vis-timeline.min.css') }}">
{% endblock %}

{% block boffice_content %}
{# Filter bar #}
<div class="box box-default" style="margin-bottom:10px;">
    <div class="box-body" style="padding:25px 15px;">
        <form class="form-inline" id="boffice-timeline-filters">
            <button type="button" class="btn btn-sm btn-default" id="boffice-tl-fit">
                <i class="fa fa-arrows-alt"></i> Ajuster
            </button>
            <div class="btn-group" style="margin-left:5px;">
                <button type="button" class="btn btn-sm btn-default" id="boffice-tl-toggle-menu">
                    <i class="fa fa-filter"></i> Monnaies
                </button>
            </div>
        </form>
    </div>
</div>

{# Toggle panel for installations visibility #}
<div id="boffice-tl-toggle-panel" style="display:none;margin-bottom:10px;padding:8px 12px;background:#f9f9f9;border:1px solid #ddd;border-radius:4px;">
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;">
        <span style="font-size:12px;font-weight:600;color:#555;"><i class="fa fa-filter"></i> Filtrer les monnaies</span>
        <button type="button" class="btn btn-xs btn-default" id="boffice-tl-show-all" title="Tout afficher">
            <i class="fa fa-eye"></i> Tout afficher
        </button>
    </div>
    <div id="boffice-tl-toggle-buttons" style="display:flex;flex-wrap:wrap;gap:5px;"></div>
</div>

<div style="text-align:right;margin-bottom:5px;">
    <i style="font-size:11px;color:#999;">
        Clic = détails · Double clic = ouvrir ticket{% if isGlobalAdmin is defined and isGlobalAdmin %} · Drag &amp; drop = modifier les dates du ticket{% endif %} · Molette = zoom · Lecture seule : pour ajouter un événement, renseigner les dates sur le ticket
    </i>
</div>

{# Timeline container #}
<div id="boffice-timeline" style="width:100%;min-height:400px;background:#fff;border:1px solid #ddd;border-radius:4px;position:relative;"></div>

{% endblock %}

{% block boffice_js %}
<script src="{{ asset('js/vendor/vis-timeline.min.js') }}"></script>
{{ encore_entry_script_tags('boffice-api') }}
{{ encore_entry_script_tags('boffice-timeline') }}
{% endblock %}