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

{% set block_title = 'Liste des tickets' %}

{% block boffice_content %}
{# Filters #}
<div class="box box-default" style="margin-bottom:10px;">
    <div class="box-body" style="padding:10px 15px;">
        <div style="display:flex;align-items:center;flex-wrap:wrap;gap:6px;">
            {# Selects + search + buttons #}
            <form class="form-inline" id="boffice-list-filters" style="display:contents;">
                <select name="type" class="form-control input-sm" id="boffice-list-filter-type" style="width:auto;" data-sonata-select2="false">
                    <option value="">Tous types</option>
                    <option value="bug">Bugs</option>
                    <option value="evolution">Évolutions</option>
                </select>
                <select name="priority" class="form-control input-sm" id="boffice-list-filter-priority" style="width:auto;" data-sonata-select2="false">
                    <option value="">Toutes priorités</option>
                    <option value="critical">Critique</option>
                    <option value="high">Haute</option>
                    <option value="normal">Normale</option>
                    <option value="low">Basse</option>
                </select>
                <select name="status" class="form-control input-sm" id="boffice-list-filter-status" style="width:auto;" data-sonata-select2="false">
                    <option value="">Tous statuts</option>
                </select>
                <input type="text" name="search" class="form-control input-sm" id="boffice-list-filter-search" placeholder="Rechercher..." style="width:160px;">
            </form>
            {# Separator #}
            <span style="display:inline-block;width:1px;height:24px;background:#ddd;margin:0 4px;"></span>
            <label style="margin:0;font-weight:normal;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:5px;">
                <input type="checkbox" id="boffice-list-show-archived" style="cursor:pointer;">
                <i class="fa fa-archive" style="color:#888;"></i> Archivés
            </label>
            <span style="display:inline-block;width:1px;height:24px;background:#ddd;margin:0 4px;"></span>
            <button type="button" class="btn btn-sm btn-default" id="boffice-list-toggle-menu">
                <i class="fa fa-filter"></i> Monnaies
            </button>
        </div>
    </div>
</div>

{# Toggle panel for installations #}
<div id="boffice-list-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-list-show-all" title="Tout afficher">
            <i class="fa fa-eye"></i> Tout afficher
        </button>
    </div>
    <div id="boffice-list-toggle-buttons" style="display:flex;flex-wrap:wrap;gap:5px;"></div>
</div>

{# Table #}
<div class="box box-primary">
    <div class="box-body table-responsive no-padding">
        <table class="table table-hover table-striped" id="boffice-list-table">
            <thead>
                <tr>
                    <th style="width:40px;">#</th>
                    <th style="width:70px;">Type</th>
                    <th>Titre / Dernier commentaire</th>
                    <th style="width:110px;">Monnaie</th>
                    <th style="width:70px;">Priorité</th>
                    <th style="width:90px;">Statut</th>
                    <th style="width:85px;">Créé le</th>
                    <th style="width:85px;">Début</th>
                    <th style="width:85px;">Fin</th>
                    <th style="width:110px;">Auteur</th>
                    <th style="width:80px;">Actions</th>
                </tr>
            </thead>
            <tbody id="boffice-list-body">
                <tr>
                    <td colspan="10" style="text-align:center;padding:30px;color:#999;">
                        <i class="fa fa-spinner fa-spin"></i> Chargement...
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="box-footer clearfix">
        <div class="pull-left" id="boffice-list-info" style="padding-top:8px;color:#999;"></div>
        <ul class="pagination pagination-sm no-margin pull-right" id="boffice-list-pagination"></ul>
    </div>
</div>
{% endblock %}

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